TypeCellOS · YousefED · Jun 17, 2025 · Jul 30, 2025 · Jul 30, 2025 · Jul 31, 2025
diff --git a/docs/content/docs/ai/reference.mdx b/docs/content/docs/ai/reference.mdx
@@ -206,11 +206,11 @@ type LLMRequestOptions = {
    * @default { add: true, update: true, delete: true }
    */
   defaultStreamTools?: {
-    /** Enable the add tool (default: true) */
+    /** Enable the add tool (default: false) */
     add?: boolean;
-    /** Enable the update tool (default: true) */
+    /** Enable the update tool (default: false) */
     update?: boolean;
-    /** Enable the delete tool (default: true) */
+    /** Enable the delete tool (default: false) */
     delete?: boolean;
   };
   /**

diff --git a/docs/content/docs/features/ai/reference.mdx b/docs/content/docs/features/ai/reference.mdx
@@ -206,11 +206,11 @@ type LLMRequestOptions = {
    * @default { add: true, update: true, delete: true }
    */
   defaultStreamTools?: {
-    /** Enable the add tool (default: true) */
+    /** Enable the add tool (default: false) */
     add?: boolean;
-    /** Enable the update tool (default: true) */
+    /** Enable the update tool (default: false) */
     update?: boolean;
-    /** Enable the delete tool (default: true) */
+    /** Enable the delete tool (default: false) */
     delete?: boolean;
   };
   /**

diff --git a/docs/package.json b/docs/package.json
@@ -68,7 +68,7 @@
     "@vercel/analytics": "^1.5.0",
     "@vercel/og": "^0.6.8",
     "@y-sweet/react": "^0.6.3",
-    "ai": "^4.1.0",
+    "ai": "^4.3.15",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "better-auth": "^1.2.10",
     "better-sqlite3": "^11.10.0",

diff --git a/examples/09-ai/01-minimal/src/App.tsx b/examples/09-ai/01-minimal/src/App.tsx
@@ -7,9 +7,9 @@ import "@blocknote/mantine/style.css";
 import {
   FormattingToolbar,
   FormattingToolbarController,
-  SuggestionMenuController,
   getDefaultReactSlashMenuItems,
   getFormattingToolbarItems,
+  SuggestionMenuController,
   useCreateBlockNote,
 } from "@blocknote/react";
 import {
@@ -29,7 +29,7 @@ import { getEnv } from "./getEnv";
 const client = createBlockNoteAIClient({
   apiKey: getEnv("BLOCKNOTE_AI_SERVER_API_KEY") || "PLACEHOLDER",
   baseURL:
-    getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai",
+    getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai/proxy",
 });
 
 // Use an "open" model such as llama, in this case via groq.com

diff --git a/examples/09-ai/05-manual-execution/.bnexample.json b/examples/09-ai/05-manual-execution/.bnexample.json
@@ -0,0 +1,15 @@
+{
+  "playground": true,
+  "docs": false,
+  "author": "yousefed",
+  "tags": ["AI", "llm"],
+  "dependencies": {
+    "@blocknote/xl-ai": "latest",
+    "@mantine/core": "^7.17.3",
+    "ai": "^4.3.15",
+    "@ai-sdk/groq": "^1.2.9",
+    "y-partykit": "^0.0.25",
+    "yjs": "^13.6.27",
+    "zustand": "^5.0.3"
+  }
+}
diff --git a/examples/09-ai/05-manual-execution/README.md b/examples/09-ai/05-manual-execution/README.md
@@ -0,0 +1,3 @@
+# AI manual execution
+
+Instead of calling AI models directly, this example shows how you can use an existing stream of responses and apply them to the editor
diff --git a/examples/09-ai/05-manual-execution/index.html b/examples/09-ai/05-manual-execution/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI manual execution</title>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/09-ai/05-manual-execution/main.tsx b/examples/09-ai/05-manual-execution/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./src/App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/09-ai/05-manual-execution/package.json b/examples/09-ai/05-manual-execution/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@blocknote/example-ai-manual-execution",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build:prod": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@blocknote/xl-ai": "latest",
+    "@mantine/core": "^7.17.3",
+    "ai": "^4.3.15",
+    "@ai-sdk/groq": "^1.2.9",
+    "y-partykit": "^0.0.25",
+    "yjs": "^13.6.27",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.4"
+  }
+}
diff --git a/examples/09-ai/05-manual-execution/src/App.tsx b/examples/09-ai/05-manual-execution/src/App.tsx
@@ -0,0 +1,200 @@
+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 {
+  StreamToolExecutor,
+  createAIExtension,
+  getAIExtension,
+  llmFormats,
+} from "@blocknote/xl-ai";
+import { en as aiEn } from "@blocknote/xl-ai/locales";
+import "@blocknote/xl-ai/style.css";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    dictionary: {
+      ...en,
+      ai: aiEn, // add default translations for the AI extension
+    },
+    // Register the AI extension
+    extensions: [
+      createAIExtension({
+        executor: undefined as any, // disable
+      }),
+    ],
+    // We set some initial content for demo purposes
+    initialContent: [
+      {
+        type: "heading",
+        props: {
+          level: 1,
+        },
+        content: "Open source software",
+      },
+      {
+        type: "paragraph",
+        content:
+          "Open source software refers to computer programs whose source code is made available to the public, allowing anyone to view, modify, and distribute the code. This model stands in contrast to proprietary software, where the source code is kept secret and only the original creators have the right to make changes. Open projects are developed collaboratively, often by communities of developers from around the world, and are typically distributed under licenses that promote sharing and openness.",
+      },
+      {
+        type: "paragraph",
+        content:
+          "One of the primary benefits of open source is the promotion of digital autonomy. By providing access to the source code, these programs empower users to control their own technology, customize software to fit their needs, and avoid vendor lock-in. This level of transparency also allows for greater security, as anyone can inspect the code for vulnerabilities or malicious elements. As a result, users are not solely dependent on a single company for updates, bug fixes, or continued support.",
+      },
+      {
+        type: "paragraph",
+        content:
+          "Additionally, open development fosters innovation and collaboration. Developers can build upon existing projects, share improvements, and learn from each other, accelerating the pace of technological advancement. The open nature of these projects often leads to higher quality software, as bugs are identified and fixed more quickly by a diverse group of contributors. Furthermore, using open source can reduce costs for individuals, businesses, and governments, as it is often available for free and can be tailored to specific requirements without expensive licensing fees.",
+      },
+    ],
+  });
+
+  // Renders the editor instance using a React component.
+  return (
+    <div>
+      <BlockNoteView editor={editor} />
+
+      <div className={"edit-buttons"}>
+        {/*Inserts a new block at start of document.*/}
+        <button
+          className={"edit-button"}
+          onClick={async () => {
+            const blockToChange = editor.document[1].id;
+
+            // Let's get the stream tools so we can invoke them manually
+            // In this case, we're using the default stream tools, which allow all operations
+            const tools = llmFormats.html.getStreamTools(editor, true);
+
+            // Create an executor that can execute StreamToolCalls
+            const executor = new StreamToolExecutor(tools);
+
+            // Use `executeOne` to invoke a single, non-streaming StreamToolCall
+            await executor.executeOne({
+              type: "update",
+              id: blockToChange,
+              block: "<p>Open source software is cool</p>",
+            });
+
+            // make sure the executor is done
+            await executor.waitTillEnd();
+
+            // accept the changes after 1 second
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            await getAIExtension(editor).acceptChanges();
+          }}
+        >
+          Update first block
+        </button>
+        <button
+          className={"edit-button"}
+          onClick={async () => {
+            const blockToChange = editor.document[1].id;
+
+            // Let's get the stream tools so we can invoke them manually
+            // In this case, we choose to only get the "update" tool
+            const tools = llmFormats.html.getStreamTools(editor, true, {
+              // only allow "update" operations
+              update: true,
+            });
+
+            // Create an executor that can execute StreamToolCalls
+            const executor = new StreamToolExecutor(tools);
+
+            // We'll stream two updates: a partial update and a full update
+            // to use streaming operations, we need to get a writer
+            const writer = executor.writable.getWriter();
+
+            // write a partial update
+            writer.write({
+              operation: {
+                type: "update",
+                id: blockToChange,
+                block:
+                  "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here.",
+              },
+              // this is not an update to an earlier "update" StreamToolCall
+              isUpdateToPreviousOperation: false,
+              // this operation is a partial update and will be "completed" by the next update
+              isPossiblyPartial: true,
+            });
+            await new Promise((resolve) => setTimeout(resolve, 3000));
+            writer.write({
+              operation: {
+                type: "update",
+                id: blockToChange,
+                block:
+                  "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here. And now let's write a second sentence.</p>",
+              },
+              // this is an update to an earlier "update" StreamToolCall
+              isUpdateToPreviousOperation: true,
+              // this operation is not a partial update, we've received the entire invocation
+              isPossiblyPartial: false,
+            });
+
+            // close the writer
+            writer.close();
+
+            // wait till the executor is done
+            await executor.waitTillEnd();
+
+            // accept the changes after 1 second
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            await getAIExtension(editor).acceptChanges();
+          }}
+        >
+          Update first block (streaming)
+        </button>
+        <button
+          className={"edit-button"}
+          onClick={async () => {
+            const blockToChange = editor.document[1].id;
+
+            // Let's get the stream tools so we can invoke them manually
+            // In this case, we choose to only get the "update" tool
+            const tools = llmFormats.html.getStreamTools(editor, true, {
+              // only allow "update" operations
+              update: true,
+            });
+
+            // Create an executor that can execute StreamToolCalls
+            const executor = new StreamToolExecutor(tools);
+
+            // We'll stream two updates: a partial update and a full update
+            // to use streaming operations, we need to get a writer
+            const writer = executor.writable.getWriter();
+
+            // write a partial update, notice how the JSON is cut off (simulating a streaming json response)
+            writer.write(
+              `{
+  "type": "update",
+  "id": ${JSON.stringify(blockToChange + "$")},
+  "block": "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here.`,
+            );
+            await new Promise((resolve) => setTimeout(resolve, 3000));
+            writer.write(`{
+  "type": "update",
+  "id": ${JSON.stringify(blockToChange + "$")},
+  "block":
+    "<p>This Open source software like Hello World refers to computer programs, this is a longer update, let's write a first sentence that's quite long long long long here. And now let's write a second sentence.</p>"
+}`);
+
+            // close the writer
+            writer.close();
+
+            // wait till the executor is done
+            await executor.waitTillEnd();
+
+            // accept the changes after 1 second
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            await getAIExtension(editor).acceptChanges();
+          }}
+        >
+          Update first block (streaming strings)
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/09-ai/05-manual-execution/src/getEnv.ts b/examples/09-ai/05-manual-execution/src/getEnv.ts
@@ -0,0 +1,20 @@
+// 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;
+}
diff --git a/examples/09-ai/05-manual-execution/src/styles.css b/examples/09-ai/05-manual-execution/src/styles.css
@@ -0,0 +1,15 @@
+.edit-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+
+.edit-button {
+  border: 1px solid gray;
+  border-radius: 4px;
+  padding-inline: 4px;
+}
+
+.edit-button:hover {
+  border: 1px solid lightgrey;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# AI manual execution

		Instead of calling AI models directly, this example shows how you can use an existing stream of responses and apply them to the editor