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-aiBasic Setup
To enable AI autocomplete in your editor, add the AIAutoCompleteExtension to your editor configuration:
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";
const editor = useCreateBlockNote({
dictionary: {
...en,
ai: aiEn, // add translations for the AI extension
},
extensions: [
AIAutoCompleteExtension({
// Fetch suggestions from this URL
provider: "/api/autocomplete",
}),
],
});Configuration
The AIAutoCompleteExtension accepts the following options:
| Option | Type | Default | Description |
|---|---|---|---|
provider | string | function | Required | URL to fetch suggestions from, or a custom provider function. |
contextLength | number | 300 | Number of characters of context to send when using a URL provider. |
acceptKey | string | "Tab" | Key to accept the current suggestion. |
cancelKey | string | "Escape" | Key to discard suggestions. |
debounceDelay | number | 300 | Delay in ms before fetching suggestions. |
Using a Custom Provider
If you need more control than the default URL provider offers, you can pass a function to provider.
AIAutoCompleteExtension({
provider: async (editor, signal) => {
// Get context
const state = editor.prosemirrorState;
const text = state.doc.textBetween(
state.selection.from - 500,
state.selection.from,
"\n"
);
// Fetch suggestions
const response = await fetch("/api/autocomplete", {
method: "POST",
body: JSON.stringify({ text }),
signal,
});
const data = await response.json();
// Return suggestions
return data.suggestions.map(suggestion => ({
suggestion: suggestion,
// Optional: specify position (defaults to cursor)
// position: state.selection.from
}));
},
})User Interaction
When autocomplete suggestions are available:
- Tab (or configured
acceptKey): Accept the current suggestion - Escape (or configured
cancelKey): Dismiss the suggestion - Continue typing: The suggestion updates as you type if it still matches
Backend 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"]
}Here's an example API route using the Vercel AI SDK:
// app/api/autocomplete/route.ts
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
export async function POST(req: Request) {
const { text } = await req.json();
const result = await generateText({
model: openai("gpt-4"),
prompt: `Complete the following text:\n\n${text}`,
});
return Response.json({
suggestions: [result.text],
});
}Programmatic Control
You can also control the autocomplete extension programmatically:
const ext = editor.extensions.aiAutoCompleteExtension;
// Accept the current suggestion
ext.acceptAutoCompleteSuggestion();
// Discard suggestions
ext.discardAutoCompleteSuggestions();Combining with Other AI Features
The AIAutoCompleteExtension works seamlessly alongside the main AIExtension:
import { AIExtension, AIAutoCompleteExtension } from "@blocknote/xl-ai";
const editor = useCreateBlockNote({
extensions: [
AIExtension({
transport: new DefaultChatTransport({ api: "/api/chat" }),
}),
AIAutoCompleteExtension({
provider: "/api/autocomplete",
}),
],
});See the AI Getting Started guide for more information on the main AI extension.