AI Autocomplete

The AI Autocomplete extension provides real-time, AI-powered text completion suggestions as users type. When enabled, the editor will display inline suggestions that can be accepted with the Tab key or dismissed with Escape.

Installation

First, ensure you have the @blocknote/xl-ai package installed:

npm install @blocknote/xl-ai

Basic Setup and demo

To enable AI autocomplete in your editor, add the AIAutoCompleteExtension to your editor configuration. Here's a the basic code setup and live demo:

GitHub

StackBlitz

import "@blocknote/core/fonts/inter.css";
import { en } from "@blocknote/core/locales";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
import {
  AIAutoCompleteExtension
} from "@blocknote/xl-ai";
import { en as aiEn } from "@blocknote/xl-ai/locales";
import "@blocknote/xl-ai/style.css";

import { getEnv } from "./getEnv";

const BASE_URL =
  getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai";

export default function App() {
  // Creates a new editor instance with AI autocomplete enabled
  const editor = useCreateBlockNote({
    dictionary: {
      ...en,
      ai: aiEn,
    },
    // Register the AI Autocomplete extension
    extensions: [
      AIAutoCompleteExtension({
        provider: `${BASE_URL}/autocomplete/generateText`,
      }),
    ],
    // We set some initial content for demo purposes
    initialContent: [
      {
        type: "heading",
        props: {
          level: 1,
        },
        content: "AI Autocomplete Demo",
      },
      {
        type: "paragraph",
        content:
          "Start typing and the AI will suggest completions based on the current context. When suggestions appear, you can press Tab to accept the suggestion.",
      },
      {
        type: "paragraph",
        content:
          "For example, type at the end of this sentence. Open source software is: ",
      },
      {
        type: "paragraph",
        content: "",
      },
    ],
  });

  // Renders the editor instance using a React component.
  return (
    <div>
      <BlockNoteView
        editor={editor}
        style={{ paddingBottom: "300px" }}
      />
    </div>
  );
}

// helper function to get env variables across next / vite
// only needed so this example works in BlockNote demos and docs
export function getEnv(key: string) {
  const env = (import.meta as any).env
    ? {
        BLOCKNOTE_AI_SERVER_API_KEY: (import.meta as any).env
          .VITE_BLOCKNOTE_AI_SERVER_API_KEY,
        BLOCKNOTE_AI_SERVER_BASE_URL: (import.meta as any).env
          .VITE_BLOCKNOTE_AI_SERVER_BASE_URL,
      }
    : {
        BLOCKNOTE_AI_SERVER_API_KEY:
          process.env.NEXT_PUBLIC_BLOCKNOTE_AI_SERVER_API_KEY,
        BLOCKNOTE_AI_SERVER_BASE_URL:
          process.env.NEXT_PUBLIC_BLOCKNOTE_AI_SERVER_BASE_URL,
      };

  const value = env[key as keyof typeof env];
  return value;
}

Configuration

The AIAutoCompleteExtension accepts the following options:

Prop	Type	Default
`onlyAtEndOfBlock?`	`boolean`	`false`
`debounceDelay?`	`number`	`300`
`cancelKey?`	`string`	`"Escape"`
`acceptKey?`	`string`	`"Tab"`
`contextLength?`	`number`	`300`
`provider`	`string \| function`	-

Using a Custom Provider

When you provide a URL (string) as provider, the extension will use the default provider that fetches suggestions from that URL.

Alternatively, you can provide a custom provider function that should return an array of suggestions at the current cursor position.

Backend Integration

With BlockNote AI Autocomplete, you have full control over the backend and LLM integration.

The default URL provider sends a POST request with the following body:

{
  "text": "The last 300 characters of text before the cursor"
}

It expects a JSON response with an array of suggestion strings:

{
  "suggestions": ["completion text", "more text"]
}

When multiple suggestions are returned, the first one will be used by default. As the user continues typing, the extension will automatically select alternative matching suggestions (or do a new backend requests if none of the cached suggestions match).

Here's an example API route using the Vercel AI SDK with Mistral's Codestral model:

Codestral is a code completion model that excels in speed (for as-you-type suggestions low latency is important). Even though it's designed for code completion, we can use it for general text completion as well. See the reference implementation for a complete example.

// app/api/autocomplete/route.ts
import { createMistral } from "@ai-sdk/mistral";
import { generateText } from "ai";

const model = createMistral({
  apiKey: process.env.MISTRAL_API_KEY,
})("codestral-latest");

export async function POST(req: Request) {
  const { text } = await req.json();

  const result = await generateText({
    model,
    system: `You are a writing assistant. Predict the most likely next part of the text.
- Provide up to 3 suggestions separated by newlines
- Keep suggestions short (max 5 words each)
- Only return the text to append (no explanations)
- Add a space before the suggestion if starting a new word`,
    messages: [
      {
        role: "user",
        content: `Complete the following text: \n${text}[SUGGESTION_HERE]`,
      },
    ],
    abortSignal: req.signal,
  });

  return Response.json({
    suggestions: result.text
      .split("\n")
      .map((s) => s.trimEnd())
      .filter((s) => s.trim().length > 0),
  });
}

Programmatic Control

You can also control the autocomplete extension programmatically:

const ext = editor.getExtension(AIAutoCompleteExtension);

// Accept the current suggestion
ext.acceptAutoCompleteSuggestion();

// Discard suggestions
ext.discardAutoCompleteSuggestions();

// Manually trigger autocomplete at the current cursor position
// (useful if you want to configure a custom key to trigger autocomplete)
ext.triggerAutoComplete();

AI Autocomplete

Installation

Basic Setup and demo

Configuration

Using a Custom Provider

Backend Integration

Programmatic Control

On this page

Learn

Collaborate

Community

Legal

Theme