Register a custom command and prompt

To register your own AI commands, simply extend the AI extension, add your command in addCommands() (don't forget to inherit the predefined commands in this.parent?.()), and execute aiTextPrompt() to run your individual prompt.

Please note that this example uses your prompt on the client-side, which means that users could read it. If you're looking to use a custom Language Model (LLM) or a prompt on your backend, please refer to the example provided here.

import { Ai, getHTMLContentBetween } from '@tiptap-pro/extension-ai'

// … other imports

// Declare typings if TypeScript is used:
//
// declare module '@tiptap/core' {
//   interface Commands<ReturnType> {
//     ai: {
//       aiCustomTextCommand: () => ReturnType,
//     }
//   }
// }

const AiExtended = Ai.extend({
  addCommands() {
    return {
      ...this.parent?.(),

      aiCustomTextCommand:
        () =>
        ({ editor, state }) => {
          const { from, to } = state.selection
          const selectedText = getHTMLContentBetween(editor, from, to)

          return editor.commands.aiTextPrompt({
            text: `Translate the following text to French and add some emojis: ${selectedText}`,
          })
        },
    }
  },
})

// … this is where you initialize your Tiptap editor instance and register the extended extension

const editor = useEditor({
  extensions: [
    StarterKit,
    AiExtended.configure({
      /* … */
    }),
  ],
  content: '',
})

// … use this to run your new command:
// editor.chain().focus().aiCustomTextCommand().run()