From 0e7041dd1e7b7217b92974257d228de0baa16d2a Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Mon, 4 May 2026 17:37:39 +0200
Subject: [PATCH] Cleaned up custom UI components in examples

---
 .../02-formatting-toolbar-buttons/src/App.tsx |  89 ++++-------
 .../src/App.tsx                               |  45 +++---
 .../04-side-menu-buttons/src/App.tsx          |  19 +--
 .../src/App.tsx                               |  11 +-
 .../11-uppy-file-panel/src/App.tsx            |  27 ++--
 .../16-link-toolbar-buttons/src/App.tsx       |  41 ++---
 .../03-font-style/src/App.tsx                 |  80 ++++------
 .../05-alert-block-full-ux/src/App.tsx        |  45 +++---
 examples/09-ai/01-minimal/src/App.tsx         |  70 ++++-----
 examples/09-ai/02-playground/src/App.tsx      |  61 +++-----
 .../09-ai/03-custom-ai-menu-items/src/App.tsx | 147 ++++++++----------
 .../09-ai/04-with-collaboration/src/App.tsx   |  65 +++-----
 .../06-client-side-transport/src/App.tsx      |  65 +++-----
 .../09-ai/07-server-persistence/src/App.tsx   |  65 +++-----
 14 files changed, 361 insertions(+), 469 deletions(-)

diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx
index b5a5abb6bc..900f1c6080 100644
--- a/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx
+++ b/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx
@@ -18,6 +18,39 @@ import {
 
 import { BlueButton } from "./BlueButton";
 
+const CustomFormattingToolbar = () => (
+  <FormattingToolbar>
+    <BlockTypeSelect key={"blockTypeSelect"} />
+
+    {/* Extra button to toggle blue text & background */}
+    <BlueButton key={"customButton"} />
+
+    <FileCaptionButton key={"fileCaptionButton"} />
+    <FileReplaceButton key={"replaceFileButton"} />
+
+    <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />
+    <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />
+    <BasicTextStyleButton
+      basicTextStyle={"underline"}
+      key={"underlineStyleButton"}
+    />
+    <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />
+    {/* Extra button to toggle code styles */}
+    <BasicTextStyleButton key={"codeStyleButton"} basicTextStyle={"code"} />
+
+    <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />
+    <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />
+    <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />
+
+    <ColorStyleButton key={"colorStyleButton"} />
+
+    <NestBlockButton key={"nestBlockButton"} />
+    <UnnestBlockButton key={"unnestBlockButton"} />
+
+    <CreateLinkButton key={"createLinkButton"} />
+  </FormattingToolbar>
+);
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -80,61 +113,7 @@ export default function App() {
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor} formattingToolbar={false}>
-      <FormattingToolbarController
-        formattingToolbar={() => (
-          <FormattingToolbar>
-            <BlockTypeSelect key={"blockTypeSelect"} />
-
-            {/* Extra button to toggle blue text & background */}
-            <BlueButton key={"customButton"} />
-
-            <FileCaptionButton key={"fileCaptionButton"} />
-            <FileReplaceButton key={"replaceFileButton"} />
-
-            <BasicTextStyleButton
-              basicTextStyle={"bold"}
-              key={"boldStyleButton"}
-            />
-            <BasicTextStyleButton
-              basicTextStyle={"italic"}
-              key={"italicStyleButton"}
-            />
-            <BasicTextStyleButton
-              basicTextStyle={"underline"}
-              key={"underlineStyleButton"}
-            />
-            <BasicTextStyleButton
-              basicTextStyle={"strike"}
-              key={"strikeStyleButton"}
-            />
-            {/* Extra button to toggle code styles */}
-            <BasicTextStyleButton
-              key={"codeStyleButton"}
-              basicTextStyle={"code"}
-            />
-
-            <TextAlignButton
-              textAlignment={"left"}
-              key={"textAlignLeftButton"}
-            />
-            <TextAlignButton
-              textAlignment={"center"}
-              key={"textAlignCenterButton"}
-            />
-            <TextAlignButton
-              textAlignment={"right"}
-              key={"textAlignRightButton"}
-            />
-
-            <ColorStyleButton key={"colorStyleButton"} />
-
-            <NestBlockButton key={"nestBlockButton"} />
-            <UnnestBlockButton key={"unnestBlockButton"} />
-
-            <CreateLinkButton key={"createLinkButton"} />
-          </FormattingToolbar>
-        )}
-      />
+      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
     </BlockNoteView>
   );
 }
diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx b/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx
index 2ee1da2771..54f6f43d3f 100644
--- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx
+++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx
@@ -5,6 +5,7 @@ import "@blocknote/mantine/style.css";
 import {
   FormattingToolbarController,
   blockTypeSelectItems,
+  useBlockNoteEditor,
   useCreateBlockNote,
   BlockTypeSelectItem,
   FormattingToolbar,
@@ -24,6 +25,31 @@ const schema = BlockNoteSchema.create({
   },
 });
 
+const CustomFormattingToolbar = () => {
+  const editor = useBlockNoteEditor<
+    typeof schema.blockSchema,
+    typeof schema.inlineContentSchema,
+    typeof schema.styleSchema
+  >();
+
+  return (
+    // Uses the default Formatting Toolbar.
+    <FormattingToolbar
+      // Sets the items in the Block Type Select.
+      blockTypeSelectItems={[
+        // Gets the default Block Type Select items.
+        ...blockTypeSelectItems(editor.dictionary),
+        // Adds an item for the Alert block.
+        {
+          name: "Alert",
+          type: "alert",
+          icon: RiAlertFill,
+        } satisfies BlockTypeSelectItem,
+      ]}
+    />
+  );
+};
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -53,24 +79,7 @@ export default function App() {
   return (
     <BlockNoteView editor={editor} formattingToolbar={false}>
       {/* Replaces the default Formatting Toolbar */}
-      <FormattingToolbarController
-        formattingToolbar={() => (
-          // Uses the default Formatting Toolbar.
-          <FormattingToolbar
-            // Sets the items in the Block Type Select.
-            blockTypeSelectItems={[
-              // Gets the default Block Type Select items.
-              ...blockTypeSelectItems(editor.dictionary),
-              // Adds an item for the Alert block.
-              {
-                name: "Alert",
-                type: "alert",
-                icon: RiAlertFill,
-              } satisfies BlockTypeSelectItem,
-            ]}
-          />
-        )}
-      />
+      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
     </BlockNoteView>
   );
 }
diff --git a/examples/03-ui-components/04-side-menu-buttons/src/App.tsx b/examples/03-ui-components/04-side-menu-buttons/src/App.tsx
index 96ef099ef3..29e82e9f2f 100644
--- a/examples/03-ui-components/04-side-menu-buttons/src/App.tsx
+++ b/examples/03-ui-components/04-side-menu-buttons/src/App.tsx
@@ -5,11 +5,20 @@ import {
   DragHandleButton,
   SideMenu,
   SideMenuController,
+  SideMenuProps,
   useCreateBlockNote,
 } from "@blocknote/react";
 
 import { RemoveBlockButton } from "./RemoveBlockButton";
 
+const CustomSideMenu = (props: SideMenuProps) => (
+  <SideMenu {...props}>
+    {/* Button which removes the hovered block. */}
+    <RemoveBlockButton />
+    <DragHandleButton {...props} />
+  </SideMenu>
+);
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -35,15 +44,7 @@ export default function App() {
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor} sideMenu={false}>
-      <SideMenuController
-        sideMenu={(props) => (
-          <SideMenu {...props}>
-            {/* Button which removes the hovered block. */}
-            <RemoveBlockButton />
-            <DragHandleButton {...props} />
-          </SideMenu>
-        )}
-      />
+      <SideMenuController sideMenu={CustomSideMenu} />
     </BlockNoteView>
   );
 }
diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx
index 0ff3a07174..f734898e1a 100644
--- a/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx
+++ b/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx
@@ -7,6 +7,7 @@ import {
   RemoveBlockItem,
   SideMenu,
   SideMenuController,
+  SideMenuProps,
   useCreateBlockNote,
 } from "@blocknote/react";
 
@@ -24,6 +25,10 @@ const CustomDragHandleMenu = () => (
   </DragHandleMenu>
 );
 
+const CustomSideMenu = (props: SideMenuProps) => (
+  <SideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
+);
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -50,11 +55,7 @@ export default function App() {
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor} sideMenu={false}>
-      <SideMenuController
-        sideMenu={(props) => (
-          <SideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
-        )}
-      />
+      <SideMenuController sideMenu={CustomSideMenu} />
     </BlockNoteView>
   );
 }
diff --git a/examples/03-ui-components/11-uppy-file-panel/src/App.tsx b/examples/03-ui-components/11-uppy-file-panel/src/App.tsx
index 8f4ed37a5b..aa66eedd49 100644
--- a/examples/03-ui-components/11-uppy-file-panel/src/App.tsx
+++ b/examples/03-ui-components/11-uppy-file-panel/src/App.tsx
@@ -5,6 +5,7 @@ import {
   FilePanelController,
   FormattingToolbar,
   FormattingToolbarController,
+  FormattingToolbarProps,
   getFormattingToolbarItems,
   useCreateBlockNote,
 } from "@blocknote/react";
@@ -12,6 +13,18 @@ import {
 import { FileReplaceButton } from "./FileReplaceButton";
 import { uploadFile, UppyFilePanel } from "./UppyFilePanel";
 
+const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
+  // Replaces default file replace button with one that opens Uppy.
+  const items = getFormattingToolbarItems();
+  items.splice(
+    items.findIndex((c) => c.key === "replaceFileButton"),
+    1,
+    <FileReplaceButton key={"fileReplaceButton"} />,
+  );
+
+  return <FormattingToolbar {...props}>{items}</FormattingToolbar>;
+};
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -37,19 +50,7 @@ export default function App() {
   // Renders the editor instance using a React component.
   return (
     <BlockNoteView editor={editor} formattingToolbar={false} filePanel={false}>
-      <FormattingToolbarController
-        formattingToolbar={(props) => {
-          // Replaces default file replace button with one that opens Uppy.
-          const items = getFormattingToolbarItems();
-          items.splice(
-            items.findIndex((c) => c.key === "replaceFileButton"),
-            1,
-            <FileReplaceButton key={"fileReplaceButton"} />,
-          );
-
-          return <FormattingToolbar {...props}>{items}</FormattingToolbar>;
-        }}
-      />
+      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
       {/* Replaces default file panel with Uppy one. */}
       <FilePanelController filePanel={UppyFilePanel} />
     </BlockNoteView>
diff --git a/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx b/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx
index 1714e18a0d..4b44b399d9 100644
--- a/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx
+++ b/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx
@@ -6,12 +6,32 @@ import {
   EditLinkButton,
   LinkToolbar,
   LinkToolbarController,
+  LinkToolbarProps,
   OpenLinkButton,
   useCreateBlockNote,
 } from "@blocknote/react";
 
 import { AlertButton } from "./AlertButton";
 
+const CustomLinkToolbar = (props: LinkToolbarProps) => (
+  <LinkToolbar {...props}>
+    <EditLinkButton
+      url={props.url}
+      text={props.text}
+      range={props.range}
+      setToolbarOpen={props.setToolbarOpen}
+      setToolbarPositionFrozen={props.setToolbarPositionFrozen}
+    />
+    <OpenLinkButton url={props.url} />
+    <DeleteLinkButton
+      range={props.range}
+      setToolbarOpen={props.setToolbarOpen}
+    />
+    {/* Extra button to open alert. */}
+    <AlertButton {...props} />
+  </LinkToolbar>
+);
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -49,26 +69,7 @@ export default function App() {
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor} linkToolbar={false}>
-      <LinkToolbarController
-        linkToolbar={(props) => (
-          <LinkToolbar {...props}>
-            <EditLinkButton
-              url={props.url}
-              text={props.text}
-              range={props.range}
-              setToolbarOpen={props.setToolbarOpen}
-              setToolbarPositionFrozen={props.setToolbarPositionFrozen}
-            />
-            <OpenLinkButton url={props.url} />
-            <DeleteLinkButton
-              range={props.range}
-              setToolbarOpen={props.setToolbarOpen}
-            />
-            {/* Extra button to open alert. */}
-            <AlertButton {...props} />
-          </LinkToolbar>
-        )}
-      />
+      <LinkToolbarController linkToolbar={CustomLinkToolbar} />
     </BlockNoteView>
   );
 }
diff --git a/examples/06-custom-schema/03-font-style/src/App.tsx b/examples/06-custom-schema/03-font-style/src/App.tsx
index 4cae9935b1..25667f9d70 100644
--- a/examples/06-custom-schema/03-font-style/src/App.tsx
+++ b/examples/06-custom-schema/03-font-style/src/App.tsx
@@ -60,6 +60,36 @@ const SetFontStyleButton = () => {
   );
 };
 
+const CustomFormattingToolbar = () => (
+  <FormattingToolbar>
+    <BlockTypeSelect key={"blockTypeSelect"} />
+
+    <FileCaptionButton key={"fileCaptionButton"} />
+    <FileReplaceButton key={"replaceFileButton"} />
+
+    <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />
+    <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />
+    <BasicTextStyleButton
+      basicTextStyle={"underline"}
+      key={"underlineStyleButton"}
+    />
+    <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />
+    {/* Adds SetFontStyleButton */}
+    <SetFontStyleButton />
+
+    <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />
+    <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />
+    <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />
+
+    <ColorStyleButton key={"colorStyleButton"} />
+
+    <NestBlockButton key={"nestBlockButton"} />
+    <UnnestBlockButton key={"unnestBlockButton"} />
+
+    <CreateLinkButton key={"createLinkButton"} />
+  </FormattingToolbar>
+);
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -100,55 +130,7 @@ export default function App() {
   return (
     <BlockNoteView editor={editor} formattingToolbar={false}>
       {/* Replaces the default Formatting Toolbar. */}
-      <FormattingToolbarController
-        formattingToolbar={() => (
-          <FormattingToolbar>
-            <BlockTypeSelect key={"blockTypeSelect"} />
-
-            <FileCaptionButton key={"fileCaptionButton"} />
-            <FileReplaceButton key={"replaceFileButton"} />
-
-            <BasicTextStyleButton
-              basicTextStyle={"bold"}
-              key={"boldStyleButton"}
-            />
-            <BasicTextStyleButton
-              basicTextStyle={"italic"}
-              key={"italicStyleButton"}
-            />
-            <BasicTextStyleButton
-              basicTextStyle={"underline"}
-              key={"underlineStyleButton"}
-            />
-            <BasicTextStyleButton
-              basicTextStyle={"strike"}
-              key={"strikeStyleButton"}
-            />
-            {/* Adds SetFontStyleButton */}
-            <SetFontStyleButton />
-
-            <TextAlignButton
-              textAlignment={"left"}
-              key={"textAlignLeftButton"}
-            />
-            <TextAlignButton
-              textAlignment={"center"}
-              key={"textAlignCenterButton"}
-            />
-            <TextAlignButton
-              textAlignment={"right"}
-              key={"textAlignRightButton"}
-            />
-
-            <ColorStyleButton key={"colorStyleButton"} />
-
-            <NestBlockButton key={"nestBlockButton"} />
-            <UnnestBlockButton key={"unnestBlockButton"} />
-
-            <CreateLinkButton key={"createLinkButton"} />
-          </FormattingToolbar>
-        )}
-      />
+      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
     </BlockNoteView>
   );
 }
diff --git a/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx b/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx
index 625dcce896..09393854b6 100644
--- a/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx
+++ b/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx
@@ -13,6 +13,7 @@ import {
   SuggestionMenuController,
   blockTypeSelectItems,
   getDefaultReactSlashMenuItems,
+  useBlockNoteEditor,
   useCreateBlockNote,
 } from "@blocknote/react";
 
@@ -28,6 +29,31 @@ const schema = BlockNoteSchema.create().extend({
   },
 });
 
+const CustomFormattingToolbar = () => {
+  const editor = useBlockNoteEditor<
+    typeof schema.blockSchema,
+    typeof schema.inlineContentSchema,
+    typeof schema.styleSchema
+  >();
+
+  return (
+    // Uses the default Formatting Toolbar.
+    <FormattingToolbar
+      // Sets the items in the Block Type Select.
+      blockTypeSelectItems={[
+        // Gets the default Block Type Select items.
+        ...blockTypeSelectItems(editor.dictionary),
+        // Adds an item for the Alert block.
+        {
+          name: "Alert",
+          type: "alert",
+          icon: RiAlertFill,
+        } satisfies BlockTypeSelectItem,
+      ]}
+    />
+  );
+};
+
 // Slash menu item to insert an Alert block
 const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({
   title: "Alert",
@@ -85,24 +111,7 @@ export default function App() {
   return (
     <BlockNoteView editor={editor} formattingToolbar={false} slashMenu={false}>
       {/* Replaces the default Formatting Toolbar */}
-      <FormattingToolbarController
-        formattingToolbar={() => (
-          // Uses the default Formatting Toolbar.
-          <FormattingToolbar
-            // Sets the items in the Block Type Select.
-            blockTypeSelectItems={[
-              // Gets the default Block Type Select items.
-              ...blockTypeSelectItems(editor.dictionary),
-              // Adds an item for the Alert block.
-              {
-                name: "Alert",
-                type: "alert",
-                icon: RiAlertFill,
-              } satisfies BlockTypeSelectItem,
-            ]}
-          />
-        )}
-      />
+      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
       {/* Replaces the default Slash Menu. */}
       <SuggestionMenuController
         triggerCharacter={"/"}
diff --git a/examples/09-ai/01-minimal/src/App.tsx b/examples/09-ai/01-minimal/src/App.tsx
index 37417d292b..3ada0eea97 100644
--- a/examples/09-ai/01-minimal/src/App.tsx
+++ b/examples/09-ai/01-minimal/src/App.tsx
@@ -22,12 +22,27 @@ import { en as aiEn } from "@blocknote/xl-ai/locales";
 import "@blocknote/xl-ai/style.css";
 
 import { DefaultChatTransport } from "ai";
-import { useEffect } from "react";
 import { getEnv } from "./getEnv";
 
 const BASE_URL =
   getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai";
 
+// Formatting toolbar with the `AIToolbarButton` added
+const FormattingToolbarWithAI = () => (
+  <FormattingToolbar>
+    {...getFormattingToolbarItems()}
+    {/* Add the AI button */}
+    <AIToolbarButton />
+  </FormattingToolbar>
+);
+
+// Slash menu items with the AI option added
+const getSlashMenuItemsWithAI = (editor: BlockNoteEditor<any, any, any>) => [
+  ...getDefaultReactSlashMenuItems(editor),
+  // add the default AI slash menu items, or define your own
+  ...getAISlashMenuItems(editor),
+];
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -84,54 +99,23 @@ export default function App() {
         {/* Add the AI Command menu to the editor */}
         <AIMenuController />
 
-        {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
-        and replace it for one with an "AI button" (defined below). 
+        {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+        and replace it for one with an "AI button" (defined below).
         (See "Formatting Toolbar" in docs)
         */}
-        <FormattingToolbarWithAI />
+        <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} />
 
-        {/* We disabled the default SlashMenu with `slashMenu=false` 
-        and replace it for one with an AI option (defined below). 
+        {/* We disabled the default SlashMenu with `slashMenu=false`
+        and replace it for one with an AI option (defined below).
         (See "Suggestion Menus" in docs)
         */}
-        <SuggestionMenuWithAI editor={editor} />
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems(getSlashMenuItemsWithAI(editor), query)
+          }
+        />
       </BlockNoteView>
     </div>
   );
 }
-
-// Formatting toolbar with the `AIToolbarButton` added
-function FormattingToolbarWithAI() {
-  return (
-    <FormattingToolbarController
-      formattingToolbar={() => (
-        <FormattingToolbar>
-          {...getFormattingToolbarItems()}
-          {/* Add the AI button */}
-          <AIToolbarButton />
-        </FormattingToolbar>
-      )}
-    />
-  );
-}
-
-// Slash menu with the AI option added
-function SuggestionMenuWithAI(props: {
-  editor: BlockNoteEditor<any, any, any>;
-}) {
-  return (
-    <SuggestionMenuController
-      triggerCharacter="/"
-      getItems={async (query) =>
-        filterSuggestionItems(
-          [
-            ...getDefaultReactSlashMenuItems(props.editor),
-            // add the default AI slash menu items, or define your own
-            ...getAISlashMenuItems(props.editor),
-          ],
-          query,
-        )
-      }
-    />
-  );
-}
diff --git a/examples/09-ai/02-playground/src/App.tsx b/examples/09-ai/02-playground/src/App.tsx
index ace8b47d79..008b17b40a 100644
--- a/examples/09-ai/02-playground/src/App.tsx
+++ b/examples/09-ai/02-playground/src/App.tsx
@@ -33,6 +33,20 @@ import { getEnv } from "./getEnv";
 const BASE_URL =
   getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai";
 
+// Formatting toolbar with the `AIToolbarButton` added
+const FormattingToolbarWithAI = () => (
+  <FormattingToolbar>
+    {...getFormattingToolbarItems()}
+    <AIToolbarButton />
+  </FormattingToolbar>
+);
+
+// Slash menu items with the AI option added
+const getSlashMenuItemsWithAI = (editor: BlockNoteEditor<any, any, any>) => [
+  ...getDefaultReactSlashMenuItems(editor),
+  ...getAISlashMenuItems(editor),
+];
+
 export default function App() {
   const [model, setModel] = useState<string>(
     "groq.chat/llama-3.3-70b-versatile",
@@ -129,52 +143,23 @@ export default function App() {
         {/* Add the AI Command menu to the editor */}
         <AIMenuController />
 
-        {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
-        and replace it for one with an "AI button" (defined below). 
+        {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+        and replace it for one with an "AI button" (defined below).
         (See "Formatting Toolbar" in docs)
         */}
-        <FormattingToolbarWithAI />
+        <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} />
 
         {/* We disabled the default SlashMenu with `slashMenu=false` 
         and replace it for one with an AI option (defined below). 
         (See "Suggestion Menus" in docs)
         */}
-        <SuggestionMenuWithAI editor={editor} />
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems(getSlashMenuItemsWithAI(editor), query)
+          }
+        />
       </BlockNoteView>
     </div>
   );
 }
-
-// Formatting toolbar with the `AIToolbarButton` added
-function FormattingToolbarWithAI() {
-  return (
-    <FormattingToolbarController
-      formattingToolbar={() => (
-        <FormattingToolbar>
-          {...getFormattingToolbarItems()}
-          <AIToolbarButton />
-        </FormattingToolbar>
-      )}
-    />
-  );
-}
-
-// Slash menu with the AI option added
-function SuggestionMenuWithAI(props: {
-  editor: BlockNoteEditor<any, any, any>;
-}) {
-  return (
-    <SuggestionMenuController
-      triggerCharacter="/"
-      getItems={async (query) =>
-        filterSuggestionItems(
-          [
-            ...getDefaultReactSlashMenuItems(props.editor),
-            ...getAISlashMenuItems(props.editor),
-          ],
-          query,
-        )
-      }
-    />
-  );
-}
diff --git a/examples/09-ai/03-custom-ai-menu-items/src/App.tsx b/examples/09-ai/03-custom-ai-menu-items/src/App.tsx
index 8eee964b9f..3646cc8d9e 100644
--- a/examples/09-ai/03-custom-ai-menu-items/src/App.tsx
+++ b/examples/09-ai/03-custom-ai-menu-items/src/App.tsx
@@ -30,6 +30,63 @@ import { addRelatedTopics, makeInformal } from "./customAIMenuItems";
 const BASE_URL =
   getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai";
 
+function CustomAIMenu() {
+  return (
+    <AIMenu
+      items={(
+        editor: BlockNoteEditor<any, any, any>,
+        aiResponseStatus:
+          | "user-input"
+          | "thinking"
+          | "ai-writing"
+          | "error"
+          | "user-reviewing"
+          | "closed",
+      ) => {
+        if (aiResponseStatus === "user-input") {
+          // Returns different items based on whether the AI Menu was
+          // opened via the Formatting Toolbar or the Slash Menu.
+          if (editor.getSelection()) {
+            return [
+              // Gets the default AI Menu items
+              ...getDefaultAIMenuItems(editor, aiResponseStatus),
+              // Adds our custom item to make the text more casual.
+              // Only appears when the AI Menu is opened via the
+              // Formatting Toolbar.
+              makeInformal(editor),
+            ];
+          } else {
+            return [
+              // Gets the default AI Menu items
+              ...getDefaultAIMenuItems(editor, aiResponseStatus),
+              // Adds our custom item to find related topics. Only
+              // appears when the AI Menu is opened via the Slash
+              // Menu.
+              addRelatedTopics(editor),
+            ];
+          }
+        }
+        // for other states, return the default items
+        return getDefaultAIMenuItems(editor, aiResponseStatus);
+      }}
+    />
+  );
+}
+
+// Formatting toolbar with the `AIToolbarButton` added
+const FormattingToolbarWithAI = () => (
+  <FormattingToolbar>
+    {...getFormattingToolbarItems()}
+    <AIToolbarButton />
+  </FormattingToolbar>
+);
+
+// Slash menu items with the AI option added
+const getSlashMenuItemsWithAI = (editor: BlockNoteEditor<any, any, any>) => [
+  ...getDefaultReactSlashMenuItems(editor),
+  ...getAISlashMenuItems(editor),
+];
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -85,95 +142,23 @@ export default function App() {
         as well as our custom ones. */}
         <AIMenuController aiMenu={CustomAIMenu} />
 
-        {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
-        and replace it for one with an "AI button" (defined below). 
+        {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+        and replace it for one with an "AI button" (defined below).
         (See "Formatting Toolbar" in docs)
         */}
-        <FormattingToolbarWithAI />
+        <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} />
 
         {/* We disabled the default SlashMenu with `slashMenu=false` 
         and replace it for one with an AI option (defined below). 
         (See "Suggestion Menus" in docs)
         */}
-        <SuggestionMenuWithAI editor={editor} />
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems(getSlashMenuItemsWithAI(editor), query)
+          }
+        />
       </BlockNoteView>
     </div>
   );
 }
-
-function CustomAIMenu() {
-  return (
-    <AIMenu
-      items={(
-        editor: BlockNoteEditor<any, any, any>,
-        aiResponseStatus:
-          | "user-input"
-          | "thinking"
-          | "ai-writing"
-          | "error"
-          | "user-reviewing"
-          | "closed",
-      ) => {
-        if (aiResponseStatus === "user-input") {
-          // Returns different items based on whether the AI Menu was
-          // opened via the Formatting Toolbar or the Slash Menu.
-          if (editor.getSelection()) {
-            return [
-              // Gets the default AI Menu items
-              ...getDefaultAIMenuItems(editor, aiResponseStatus),
-              // Adds our custom item to make the text more casual.
-              // Only appears when the AI Menu is opened via the
-              // Formatting Toolbar.
-              makeInformal(editor),
-            ];
-          } else {
-            return [
-              // Gets the default AI Menu items
-              ...getDefaultAIMenuItems(editor, aiResponseStatus),
-              // Adds our custom item to find related topics. Only
-              // appears when the AI Menu is opened via the Slash
-              // Menu.
-              addRelatedTopics(editor),
-            ];
-          }
-        }
-        // for other states, return the default items
-        return getDefaultAIMenuItems(editor, aiResponseStatus);
-      }}
-    />
-  );
-}
-
-// Formatting toolbar with the `AIToolbarButton` added
-function FormattingToolbarWithAI() {
-  return (
-    <FormattingToolbarController
-      formattingToolbar={() => (
-        <FormattingToolbar>
-          {...getFormattingToolbarItems()}
-          <AIToolbarButton />
-        </FormattingToolbar>
-      )}
-    />
-  );
-}
-
-// Slash menu with the AI option added
-function SuggestionMenuWithAI(props: {
-  editor: BlockNoteEditor<any, any, any>;
-}) {
-  return (
-    <SuggestionMenuController
-      triggerCharacter="/"
-      getItems={async (query) =>
-        filterSuggestionItems(
-          [
-            ...getDefaultReactSlashMenuItems(props.editor),
-            ...getAISlashMenuItems(props.editor),
-          ],
-          query,
-        )
-      }
-    />
-  );
-}
diff --git a/examples/09-ai/04-with-collaboration/src/App.tsx b/examples/09-ai/04-with-collaboration/src/App.tsx
index 3fd8076ccd..9073141352 100644
--- a/examples/09-ai/04-with-collaboration/src/App.tsx
+++ b/examples/09-ai/04-with-collaboration/src/App.tsx
@@ -58,6 +58,22 @@ if (isGhostWriting) {
 const ghostContent =
   "This demo shows a two-way sync of documents. It allows you to test collaboration features, and see how stable the editor is. ";
 
+// Formatting toolbar with the `AIToolbarButton` added
+const FormattingToolbarWithAI = () => (
+  <FormattingToolbar>
+    {...getFormattingToolbarItems()}
+    {/* Add the AI button */}
+    <AIToolbarButton />
+  </FormattingToolbar>
+);
+
+// Slash menu items with the AI option added
+const getSlashMenuItemsWithAI = (editor: BlockNoteEditor<any, any, any>) => [
+  ...getDefaultReactSlashMenuItems(editor),
+  // add the default AI slash menu items, or define your own
+  ...getAISlashMenuItems(editor),
+];
+
 export default function App() {
   const [numGhostWriters, setNumGhostWriters] = useState(1);
   const [isPaused, setIsPaused] = useState(false);
@@ -176,17 +192,22 @@ export default function App() {
         {/* Add the AI Command menu to the editor */}
         <AIMenuController />
 
-        {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
-        and replace it for one with an "AI button" (defined below). 
+        {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+        and replace it for one with an "AI button" (defined below).
         (See "Formatting Toolbar" in docs)
         */}
-        <FormattingToolbarWithAI />
+        <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} />
 
         {/* We disabled the default SlashMenu with `slashMenu=false` 
         and replace it for one with an AI option (defined below). 
         (See "Suggestion Menus" in docs)
         */}
-        <SuggestionMenuWithAI editor={editor} />
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems(getSlashMenuItemsWithAI(editor), query)
+          }
+        />
       </BlockNoteView>
 
       {!isGhostWriting && (
@@ -205,39 +226,3 @@ export default function App() {
     </>
   );
 }
-
-// Formatting toolbar with the `AIToolbarButton` added
-function FormattingToolbarWithAI() {
-  return (
-    <FormattingToolbarController
-      formattingToolbar={() => (
-        <FormattingToolbar>
-          {...getFormattingToolbarItems()}
-          {/* Add the AI button */}
-          <AIToolbarButton />
-        </FormattingToolbar>
-      )}
-    />
-  );
-}
-
-// Slash menu with the AI option added
-function SuggestionMenuWithAI(props: {
-  editor: BlockNoteEditor<any, any, any>;
-}) {
-  return (
-    <SuggestionMenuController
-      triggerCharacter="/"
-      getItems={async (query) =>
-        filterSuggestionItems(
-          [
-            ...getDefaultReactSlashMenuItems(props.editor),
-            // add the default AI slash menu items, or define your own
-            ...getAISlashMenuItems(props.editor),
-          ],
-          query,
-        )
-      }
-    />
-  );
-}
diff --git a/examples/09-ai/06-client-side-transport/src/App.tsx b/examples/09-ai/06-client-side-transport/src/App.tsx
index ca7b64518e..14ed72abdb 100644
--- a/examples/09-ai/06-client-side-transport/src/App.tsx
+++ b/examples/09-ai/06-client-side-transport/src/App.tsx
@@ -28,6 +28,22 @@ import { getEnv } from "./getEnv";
 const BASE_URL =
   getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai";
 
+// Formatting toolbar with the `AIToolbarButton` added
+const FormattingToolbarWithAI = () => (
+  <FormattingToolbar>
+    {...getFormattingToolbarItems()}
+    {/* Add the AI button */}
+    <AIToolbarButton />
+  </FormattingToolbar>
+);
+
+// Slash menu items with the AI option added
+const getSlashMenuItemsWithAI = (editor: BlockNoteEditor<any, any, any>) => [
+  ...getDefaultReactSlashMenuItems(editor),
+  // add the default AI slash menu items, or define your own
+  ...getAISlashMenuItems(editor),
+];
+
 // We define the model directly in our app using the Vercel AI SDK
 const model = createGroq({
   // We supply a custom fetch function so that requests are routed through our proxy server
@@ -97,54 +113,23 @@ export default function App() {
         {/* Add the AI Command menu to the editor */}
         <AIMenuController />
 
-        {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
-        and replace it for one with an "AI button" (defined below). 
+        {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+        and replace it for one with an "AI button" (defined below).
         (See "Formatting Toolbar" in docs)
         */}
-        <FormattingToolbarWithAI />
+        <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} />
 
         {/* We disabled the default SlashMenu with `slashMenu=false` 
         and replace it for one with an AI option (defined below). 
         (See "Suggestion Menus" in docs)
         */}
-        <SuggestionMenuWithAI editor={editor} />
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems(getSlashMenuItemsWithAI(editor), query)
+          }
+        />
       </BlockNoteView>
     </div>
   );
 }
-
-// Formatting toolbar with the `AIToolbarButton` added
-function FormattingToolbarWithAI() {
-  return (
-    <FormattingToolbarController
-      formattingToolbar={() => (
-        <FormattingToolbar>
-          {...getFormattingToolbarItems()}
-          {/* Add the AI button */}
-          <AIToolbarButton />
-        </FormattingToolbar>
-      )}
-    />
-  );
-}
-
-// Slash menu with the AI option added
-function SuggestionMenuWithAI(props: {
-  editor: BlockNoteEditor<any, any, any>;
-}) {
-  return (
-    <SuggestionMenuController
-      triggerCharacter="/"
-      getItems={async (query) =>
-        filterSuggestionItems(
-          [
-            ...getDefaultReactSlashMenuItems(props.editor),
-            // add the default AI slash menu items, or define your own
-            ...getAISlashMenuItems(props.editor),
-          ],
-          query,
-        )
-      }
-    />
-  );
-}
diff --git a/examples/09-ai/07-server-persistence/src/App.tsx b/examples/09-ai/07-server-persistence/src/App.tsx
index a22d9c9e1c..1d07beafac 100644
--- a/examples/09-ai/07-server-persistence/src/App.tsx
+++ b/examples/09-ai/07-server-persistence/src/App.tsx
@@ -26,6 +26,22 @@ import { getEnv } from "./getEnv";
 const BASE_URL =
   getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai";
 
+// Formatting toolbar with the `AIToolbarButton` added
+const FormattingToolbarWithAI = () => (
+  <FormattingToolbar>
+    {...getFormattingToolbarItems()}
+    {/* Add the AI button */}
+    <AIToolbarButton />
+  </FormattingToolbar>
+);
+
+// Slash menu items with the AI option added
+const getSlashMenuItemsWithAI = (editor: BlockNoteEditor<any, any, any>) => [
+  ...getDefaultReactSlashMenuItems(editor),
+  // add the default AI slash menu items, or define your own
+  ...getAISlashMenuItems(editor),
+];
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -112,54 +128,23 @@ export default function App() {
         {/* Add the AI Command menu to the editor */}
         <AIMenuController />
 
-        {/* We disabled the default formatting toolbar with `formattingToolbar=false` 
-        and replace it for one with an "AI button" (defined below). 
+        {/* We disabled the default formatting toolbar with `formattingToolbar=false`
+        and replace it for one with an "AI button" (defined below).
         (See "Formatting Toolbar" in docs)
         */}
-        <FormattingToolbarWithAI />
+        <FormattingToolbarController formattingToolbar={FormattingToolbarWithAI} />
 
         {/* We disabled the default SlashMenu with `slashMenu=false` 
         and replace it for one with an AI option (defined below). 
         (See "Suggestion Menus" in docs)
         */}
-        <SuggestionMenuWithAI editor={editor} />
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems(getSlashMenuItemsWithAI(editor), query)
+          }
+        />
       </BlockNoteView>
     </div>
   );
 }
-
-// Formatting toolbar with the `AIToolbarButton` added
-function FormattingToolbarWithAI() {
-  return (
-    <FormattingToolbarController
-      formattingToolbar={() => (
-        <FormattingToolbar>
-          {...getFormattingToolbarItems()}
-          {/* Add the AI button */}
-          <AIToolbarButton />
-        </FormattingToolbar>
-      )}
-    />
-  );
-}
-
-// Slash menu with the AI option added
-function SuggestionMenuWithAI(props: {
-  editor: BlockNoteEditor<any, any, any>;
-}) {
-  return (
-    <SuggestionMenuController
-      triggerCharacter="/"
-      getItems={async (query) =>
-        filterSuggestionItems(
-          [
-            ...getDefaultReactSlashMenuItems(props.editor),
-            // add the default AI slash menu items, or define your own
-            ...getAISlashMenuItems(props.editor),
-          ],
-          query,
-        )
-      }
-    />
-  );
-}