diff --git a/docs/content/docs/ai/getting-started.mdx b/docs/content/docs/ai/getting-started.mdx deleted file mode 100644 index 3a78811210..0000000000 --- a/docs/content/docs/ai/getting-started.mdx +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Getting Started with BlockNote AI -description: Add AI functionality to your BlockNote rich text editor -imageTitle: 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: - -```bash -npm install @blocknote/xl-ai -``` - -## Creating a Model - -BlockNote AI uses the the [AI SDK](https://ai-sdk.dev/docs/foundations/overview) to standardize integrating artificial intelligence (AI) models across [supported providers](https://ai-sdk.dev/docs/foundations/providers-and-models). - -As a first step, you'll need to register a new model with the AI SDK. For example, for Llama hosted on Groq: - -```bash -npm install @ai-sdk/groq -``` - -```ts -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](https://github.com/TypeCellOS/BlockNote/tree/main/packages/xl-ai-server) - 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: - -```ts -import { createBlockNoteEditor } from "@blocknote/core"; -import { BlockNoteAIExtension } from "@blocknote/xl-ai"; -import { en } from "@blocknote/core/locales"; -import { en as aiEn } from "@blocknote/xl-ai/locales"; -import { createAIExtension } from "@blocknote/xl-ai"; -import "@blocknote/xl-ai/style.css"; // add the AI stylesheet - -const editor = createBlockNoteEditor({ - dictionary: { - ...en, - ai: aiEn, // add default translations for the AI extension - }, - extensions: [ - createAIExtension({ - model, - }), - ], - // ... other editor options -}); -``` - -See the [API Reference](/docs/features/ai/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](/docs/react/components) for more information. - -```tsx - - {/* Add the AI Command menu to the editor */} - - - {/* Create you own Formatting Toolbar with an AI button, - (see the full example code below) */} - - - {/* Create you own SlashMenu with an AI option, - (see the full example code below) */} - - -``` - -## 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. - - diff --git a/docs/content/docs/ai/index.mdx b/docs/content/docs/ai/index.mdx deleted file mode 100644 index 7a500c5ea3..0000000000 --- a/docs/content/docs/ai/index.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: AI Rich Text Editing -description: Add AI functionality to your BlockNote rich text editor ---- - -With BlockNote AI, you can add AI functionality to your rich text editor. -Users can work with an AI agent to edit, write and format their documents. - -