AI Ask Button

Available in Start plan

A fully accessible AI-powered button for Tiptap editors. Trigger intelligent content generation and editing on selected text with keyboard shortcut support and flexible customization options.

Integration

The AI Ask Button require ai-menu and ui-state-extension to be installed in your Tiptap editor. To see demo, Navigate to Ai menu.

Installation

Add the component via the Tiptap CLI:

npx @tiptap/cli@latest add ai-ask-button

Components

`<AiAskButton />`

A prebuilt React component that triggers AI assistance for selected content.

Usage

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { Ai } from '@tiptap-pro/extension-ai'
import { AiAskButton } from '@/components/tiptap-ui/ai-ask-button'
import { UiState } from '@/components/tiptap-extension/ui-state-extension'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      UiState,
      Ai.configure({
        appId: 'your-app-id',
        token: 'your-ai-token',
        autocompletion: false,
        showDecorations: true,
        onLoading: (context) => {
          context.editor.commands.aiGenerationSetIsLoading(true)
          context.editor.commands.aiGenerationHasMessage(false)
        },
        onSuccess: (context) => {
          context.editor.commands.aiGenerationSetIsLoading(false)
          context.editor.commands.aiGenerationHasMessage(!!context.response)
        },
      }),
    ],
    content: `
      <p>Select some text and click the AI button to get intelligent suggestions and improvements.</p>
      <p>The AI can help improve writing, fix grammar, translate, and much more!</p>
    `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <AiAskButton
        editor={editor}
        text="Ask AI"
        hideWhenUnavailable={true}
        showShortcut={true}
        onAiAsked={() => console.log('AI assistance triggered!')}
      />

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`text`	`string`	`undefined`	Optional text label for the button
`hideWhenUnavailable`	`boolean`	`false`	Hides the button when AI features are not available
`onAiAsked`	`() => void`	`undefined`	Callback fired after AI assistance is triggered
`showShortcut`	`boolean`	`false`	Shows a keyboard shortcut badge (Cmd/Ctrl + J)

Hooks

`useAiAsk()`

A custom hook to build your own AI ask button with full control over rendering and behavior.

Usage

import { useAiAsk } from '@/components/tiptap-ui/ai-ask-button'

function MyAiAskButton() {
  const { isVisible, canAiAsk, handleAiAsk, label, shortcutKeys, Icon } = useAiAsk({
    editor: myEditor,
    hideWhenUnavailable: true,
    onAiAsked: () => console.log('AI assistance requested!'),
  })

  if (!isVisible) return null

  return (
    <button
      onClick={handleAiAsk}
      disabled={!canAiAsk}
      aria-label={label}
      title={`${label} (${shortcutKeys})`}
    >
      <Icon />
      {label}
    </button>
  )
}

Props

Name	Type	Default	Description
`editor`	`Editor \| null`	`undefined`	The Tiptap editor instance
`hideWhenUnavailable`	`boolean`	`false`	Hides the button if AI features are unavailable
`onAiAsked`	`() => void`	`undefined`	Callback fired after triggering AI assistance

Return Values

Name	Type	Description
`isVisible`	`boolean`	Whether the button should be rendered
`canAiAsk`	`boolean`	If AI assistance can be triggered currently
`handleAiAsk`	`() => boolean`	Function to trigger AI assistance
`label`	`string`	Accessible label text for the button
`shortcutKeys`	`string`	Keyboard shortcut (Cmd/Ctrl + J)
`Icon`	`React.FC`	Icon component for the AI ask button

Utilities

`canPerformAiAsk(editor)`

Checks if AI assistance can be triggered in the current editor state.

import { canPerformAiAsk } from '@/components/tiptap-ui/ai-ask-button'

const canTriggerAi = canPerformAiAsk(editor)
if (canTriggerAi) {
  console.log('AI assistance is available for the current selection')
}

Parameters

Name	Type	Description
`editor`	`Editor \| null`	The Tiptap editor instance

Returns

boolean - Whether AI assistance can be performed on the current selection.

`shouldShowButton(props)`

Determines if the AI ask button should be visible based on editor state and configuration.

import { shouldShowButton } from '@/components/tiptap-ui/ai-ask-button'

const isVisible = shouldShowButton({
  editor: myEditor,
  hideWhenUnavailable: true,
})

Parameters

Name	Type	Description
`props.editor`	`Editor \| null`	The Tiptap editor instance
`props.hideWhenUnavailable`	`boolean`	Whether to hide when AI features are unavailable

Returns

boolean - Whether the button should be shown.

Behavior and Constraints

Selection Requirements

The AI Ask Button works with text selections and has specific requirements:

Text Selection Required: The button is only active when text is selected
Supported Content: Works with paragraphs, headings, lists, and most text content
Excluded Content Types:
- Images and image uploads
- Code blocks
- Horizontal rules
- Empty selections

Keyboard Shortcuts

The AI ask button supports the following keyboard shortcut:

Cmd/Ctrl + J: Trigger AI assistance for selected content

The shortcut is automatically registered when using either the <AiAskButton /> component or the useAiAsk() hook, and is only active when:

The button is visible
AI assistance can be performed on the current selection
The editor is focused and editable

Requirements

Dependencies

@tiptap/react - Core Tiptap React integration
@tiptap-pro/extension-ai - AI extension for content generation
react-hotkeys-hook - Keyboard shortcut management

Extensions

ui-state-extension - Manages UI state for AI operations (recommended)
One of: @tiptap-pro/extension-ai or custom aiGeneration extension

Referenced Components

use-tiptap-editor (hook)
button (primitive)
badge (primitive)
tiptap-utils (lib)
ai-sparkles-icon (icon)