Docs
AI
Getting Started

Getting Started with BlockNote AI

This guide walks you through the steps to add AI functionality to your BlockNote rich text editor.

First, install the @blocknote/xl-ai package:

npm install @blocknote/xl-ai

Creating a Model

BlockNote AI uses the the AI SDK (opens in a new tab) to standardize integrating artificial intelligence (AI) models across supported providers (opens in a new tab).

As a first step, you'll need to register a new model with the AI SDK. For example, for Llama hosted on Groq:

npm install @ai-sdk/groq
import { createGroq } from "@ai-sdk/groq";
 
const provider = createGroq({
  apiKey: "YOUR_GROQ_API_KEY",
});
 
const model = provider("llama-3.3-70b-versatile");
⚠️

Note that this setup directly calls the provider from the client, and exposes your API keys on the client. For Production scenarios, a more common approach is to handle authentication on your own server and proxy requests to a provider. See our Demo AI Server (opens in a new tab) for a Node.js example or check the AI SDK best practices.

Setting up the editor

Now, you can create the editor with the AI Extension enabled:

import { createBlockNoteEditor } from "@blocknote/core";
import { BlockNoteAIExtension } from "@blocknote/xl-ai";
import {
  locales as aiLocales,
  createAIExtension,
} from "@blocknote/xl-ai";
 
const editor = createBlockNoteEditor({
  dictionary: {
    ...en,
    ai: aiLocales.en, // add default translations for the AI extension
  },
  extensions: [
    createAIExtension({
      model,
    }),
  ],
  // ... other editor options
});

See the API Reference for more information on the createAIExtension method.

Adding AI UI elements

Now, the only thing left to do is to customize the UI elements of your editor. We want to:

  • add an AI button to the formatting toolbar (shown when selecting text)
  • add an AI option to the slash menu (shown when typing a /)

We do this by disabling the default FormattingToolbar and SuggestionMenu and adding our own. See Changing UI Elements for more information.

<BlockNoteView
  editor={editor}
  // We're disabling some default UI elements
  formattingToolbar={false}
  slashMenu={false}
>
  {/* Add the AI Command menu to the editor */}
  <AIMenuController />
 
  {/* Create you own Formatting Toolbar with an AI button,
    (see the full example code below) */}
  <FormattingToolbarWithAI />
 
  {/* Create you own SlashMenu with an AI option,
    (see the full example code below) */}
  <SuggestionMenuWithAI editor={editor} />
</BlockNoteView>

Full Example

See the full example code and live demo. Select some text and click the AI (stars) button, or type /ai anywhere in the editor to access AI functionality.

AICustom Commands