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)

PreviouslyComponents

Next upAi menu