Tiptap AI

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

Pro Extension

This extension requires a valid subscription in an eligible plan and access to our private registry, set this up first.

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

Text
aiAdjustTone() Adjusts the tone of voice
aiComplete() Completes the selected text
aiEmojify() Add emojis ✨ to your text
aiExtend() Extends your text
aiFixSpellingAndGrammar() Fixes spelling & grammar
aiTextPrompt() Run your custom prompt
aiRephrase() Rephrases the selected text
aiShorten() Shortens the selected text
aiSimplify() Rephrases your text in simplified words
aiSummarize() Summarizes your text
aiTranslate() Translates the selected text into the specified language
Image
aiImagePrompt() Generates an image based on prompt and style

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()