---
title: "AI Ask Button"
description: "AI-powered button to trigger intelligent content generation and editing on selected text. More in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/components/ai-ask-button"
---

# AI Ask Button

AI-powered button to trigger intelligent content generation and editing on selected text. More in the docs.

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](https://tiptap.dev/docs/ui-components/components/ai-menu.md).

## Installation

Add the component via the Tiptap CLI:

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

## Components

### `<AiAskButton />`

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

#### Usage

```tsx
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

```tsx
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.

```tsx
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.

```tsx
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)