Tiptap AI

• Introduction
• Roadmap
• Installation
  • Extension Installation
  • Setting up Tiptap AI for your team
• Extension Settings
  • appId
  • token
  • autocomplete
• Commands
  • aiAdjustTone()
  • aiComplete()
  • aiEmojify()
  • aiExtend()
  • aiFixSpellingAndGrammar()
  • aiTextPrompt()
  • aiRephrase()
  • aiShorten()
  • aiSimplify()
  • aiSummarize()
  • aiTranslate()
  • aiImagePrompt()

#Introduction

Ready to take your product to the next level with some amazing AI features? Look no further than Tiptap Editor and Tiptap AI - they're a match made in heaven! ✨

With our awesome extension, you'll get access to a whole range of pre-built commands, a free prompt option, image generation, and autocompletion. And the best part? We're always working on optimizing and expanding the functionality.

Just imagine how much smoother your editing experience can be with an AI assistant right there in your editor. It's like having a helpful friend by your side!

→ Have a look at our Tiptap AI demo ✨

#Roadmap

✅ A set of sensible default commands
✅ Custom prompt command
✅ Autocompletion
⏳ Streaming support for every command available
⏳ Tiptap AI SDK for usage outside of the editor instance
✨ … Many more features we'll explore along the way and with your feedback.

Leave us a message, if you’ve got any feedback for us.
– We’d love to hear what you’re building with Tiptap & Tiptap AI.

#Installation

#Extension Installation

Once done, you can install the extension from our private registry:

npm install @tiptap-pro/extension-ai

#Setting up Tiptap AI for your team

This extension relies on using our Tiptap AI backend service. You'll need a valid subscription in an eligible plan. Just head over to our pricing page to learn more.

1. You’ll need to provide an OpenAI API token yourself, which we’re using in order to send requests to the OpenAI API. Your token is stored well encrypted and is only used on a per-request basis. Add the OpenAI API Key to your team
2. Generate a JWT (HS256 algorithm) with our provided secret to authenticate the extension against our service. Get your JWT secret.
3. Set up the extension as described below.

#Extension Settings

#appId

Your Application ID which can be obtained by visiting the AI settings in Tiptap Cloud.

Type: string

Default: ''

#token

In order to authenticate against our AI backend service, you’ll need to generate a JWT (with HS256) using your JWT secret, which you also obtain in your team’s AI settings page.

Type: string

Default: ''

#autocomplete

Enables the autocompletion feature. When writing text, just hit Tab to trigger the autocompletion and another Tab to accept the completion. We’re using a portion of your already written text to build a prompt for OpenAI.

Type: boolean

Default: false

#Commands

#aiAdjustTone()

Adjusts the tone of voice of the selected text to the specified TONE.

// Tone: 'default' | 'academic' | 'business' | 'casual' | 'childfriendly' | 'confident' | 'conversational' | 'creative' | 'emotional' | 'excited' | 'formal' | 'friendly' | 'funny' | 'humorous' | 'informative' | 'inspirational' | 'memeify' | 'narrative' | 'objective' | 'persuasive' | 'poetic' | string
editor.chain().focus().aiAdjustTone(tone: Tone, options: TextOptions).run()

#aiComplete()

Completes the selected text.

editor.chain().focus().aiComplete(options: TextOptions).run()

#aiEmojify()

Adds emojis ✨ to your text selection.

editor.chain().focus().aiEmojify(options: TextOptions).run()

#aiExtend()

Extends your written text.

editor.chain().focus().aiExtend(options: TextOptions).run()

#aiFixSpellingAndGrammar()

Runs a spell- and grammar-check on your selected text.

editor.chain().focus().aiFixSpellingAndGrammar(options: TextOptions).run()

#aiTextPrompt()

Useful to run your own, custom prompt. The given text will be used as the prompt.

editor.chain().focus().aiTextPrompt(options: TextOptions).run()

#aiRephrase()

Rephrases your currently selected text.

editor.chain().focus().aiRephrase(options: TextOptions).run()

#aiShorten()

Shortens your currently selected text.

editor.chain().focus().aiShorten(options: TextOptions).run()

#aiSimplify()

Uses simple language to rephrase your selected text.

editor.chain().focus().aiSimplify(options: TextOptions).run()

#aiSummarize()

Summarizes the selected text content.

editor.chain().focus().aiSummarize(options: TextOptions).run()

#aiTranslate()

Translates the selected text content into the given output language.

It accepts two letter ISO 639-1 language codes.

// Language: 'en' | 'de' | 'nl' | ...
editor.chain().focus().aiTranslate(language: Language, options: TextOptions).run()

#aiImagePrompt()

Generates an image based on your prompt and the desired style.

Make sure to load the image extension ('@tiptap/extension-image') in your editor instance.

editor.chain().focus().aiImagePrompt(options: ImageOptions).run()