docs wip

Author: YousefED

docs/pages/docs/_meta.json

@@ -8,6 +8,7 @@
   "custom-schemas": "Custom Schemas",
   "collaboration": "Collaboration",
   "advanced": "Advanced",
+  "ai": "AI",
   "discord-link": {
     "title": "Community ↗",
     "href": "https://discord.gg/Qc2QTTH5dF",

docs/pages/docs/ai.mdx

@@ -0,0 +1,43 @@
+---
+title: AI Rich Text Editing
+description: Add AI functionality to your BlockNote rich text editor
+imageTitle: BlockNote AI
+path: /docs/ai
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+# BlockNote AI integration
+
+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.
+
+[VIDEO]
+
+- Try the [basic AI demo](/examples/ai/minimal)
+- ..or try different models in the [AI playground](/examples/ai/playground)
+- [Setup documentation](/docs/ai/getting-started)
+- TODO
+
+## Features
+
+BlockNote AI has been designed to be fully customizable.
+BlockNote shows exactly what the AI agent is doing - making it easy for users to
+work hand in hand with AI agents.
+
+- Customize commands to write new content or update existing content or formatting
+- Streaming support for quick feedback
+- Users can accept or reject AI suggestions
+- Connect any LLM model (from Llama to OpenAI, Mistral or Anthropic)
+- Customizable prompts
+- Built directly on the [Vercel AI SDK](https://sdk.vercel.ai)
+- No dependency on our backend - use your own infrastructure or connect directly to a hosted LLM API
+- Feature requests? [Get in touch](/about).
+
+<Callout type={"info"}>
+  This feature is provided by the `@blocknote/xl-ai`. `xl-` packages are fully
+  open source, but released under a copyleft license. A commercial license for
+  usage in closed source, proprietary products comes as part of the [Business
+  subscription](/pricing).
+</Callout>

docs/pages/docs/ai/_meta.json

@@ -0,0 +1,5 @@
+{
+  "setup": "Editor Setup",
+  "custom-commands": "Customizing Commands",
+  "reference": "Reference"
+}

docs/pages/docs/ai/custom-commands.mdx

@@ -0,0 +1,106 @@
+---
+title: AI Rich Text Editing
+description: Add AI functionality to your BlockNote rich text editor
+imageTitle: BlockNote AI
+path: /docs/ai
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+# Getting Started with BlockNote AI
+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");
+```
+
+<Callout type={"warning"}>
+  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.
+</Callout>
+
+## 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 {
+  AIToolbarButton,
+  BlockNoteAIUI,
+  locales as aiLocales,
+  createAIExtension,
+  createBlockNoteAIClient,
+  getAISlashMenuItems,
+} 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
+});
+```
+
+### The `createAIExtension` method
+
+TODO
+
+## Adding AI UI elements
+
+Now, the only thing left to do is to customize the UI elements of your editor.
+
+```tsx
+<BlockNoteView
+    editor={editor}
+    // We're disabling some default UI elements
+    formattingToolbar={false}
+    slashMenu={false}>
+    {/* This has AI specific components like the AI Command menu */}
+    <BlockNoteAIUI />
+
+    {/* 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
+
+<Example name="ai/minimal" />

docs/pages/docs/ai/reference.mdx

@@ -1,5 +1,3 @@
-/// <reference types="./vite-env.d.ts" />
-
 import { createGroq } from "@ai-sdk/groq";
 import { BlockNoteEditor, filterSuggestionItems } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
@@ -27,10 +25,9 @@ import "@blocknote/xl-ai/style.css";
 // Optional: proxy requests through the `@blocknote/xl-ai-server` proxy server
 // so that we don't have to expose our API keys to the client
 const client = createBlockNoteAIClient({
-  apiKey: import.meta.env.VITE_BLOCKNOTE_AI_SERVER_API_KEY || "PLACEHOLDER",
+  apiKey: getEnv("BLOCKNOTE_AI_SERVER_API_KEY") || "PLACEHOLDER",
   baseURL:
-    import.meta.env.VITE_BLOCKNOTE_AI_SERVER_BASE_URL ||
-    "https://localhost:3000/ai",
+    getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai",
 });
 
 // Use an "open" model such as llama, in this case via groq.com
@@ -100,6 +97,7 @@ export default function App() {
     <div>
       <BlockNoteView
         editor={editor}
+        // We're disabling some default UI elements
         formattingToolbar={false}
         slashMenu={false}>
         {/* This has AI specific components like the AI Command menu */}
@@ -128,6 +126,7 @@ function FormattingToolbarWithAI() {
       formattingToolbar={() => (
         <FormattingToolbar>
           {...getFormattingToolbarItems()}
+          {/* Add the AI button */}
           <AIToolbarButton />
         </FormattingToolbar>
       )}
@@ -146,6 +145,7 @@ function SuggestionMenuWithAI(props: {
         filterSuggestionItems(
           [
             ...getDefaultReactSlashMenuItems(props.editor),
+            // add the default AI slash menu items, or define your own
             ...getAISlashMenuItems(props.editor),
           ],
           query,
@@ -154,3 +154,13 @@ function SuggestionMenuWithAI(props: {
     />
   );
 }
+
+// helper function to get env variables across next / vite
+// only needed so this example works in BlockNote demos and docs
+function getEnv(key: string) {
+  // TODO
+  // const env2 = process.env.NEXT_PUBLIC_BLOCKNOTE_AI_SERVER_BASE_URL;
+  return (import.meta as any).env
+    ? (import.meta as any).env["VITE_" + key]
+    : process.env["NEXT_PUBLIC_" + key];
+}