文档
AI
开始使用

开始使用 BlockNote AI

本指南将引导你完成为 BlockNote 富文本编辑器添加 AI 功能的步骤。

首先，安装 @blocknote/xl-ai 包：

npm install @blocknote/xl-ai

创建模型

BlockNote AI 使用 AI SDK (opens in a new tab) 来标准化集成来自支持的提供商 (opens in a new tab)的人工智能（AI）模型。

第一步，你需要在 AI SDK 中注册一个新的模型。例如，针对 Groq 托管的 Llama：

npm install @ai-sdk/groq
import { createGroq } from "@ai-sdk/groq";
 
const provider = createGroq({
  apiKey: "YOUR_GROQ_API_KEY",
});
 
const model = provider("llama-3.3-70b-versatile");
⚠️

请注意，这种设置是直接在客户端调用提供商，并将你的 API 密钥暴露在客户端。对于生产环境，更常见的做法是由你自己的服务器处理身份验证并代理请求到提供商。请参阅我们的 演示 AI 服务器 (opens in a new tab)了解 Node.js 示例，或查阅 AI SDK 最佳实践。

配置编辑器

现在，你可以创建启用 AI 扩展的编辑器了：

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"; // 添加 AI 样式表
 
const editor = createBlockNoteEditor({
  dictionary: {
    ...en,
    ai: aiEn, // 添加 AI 扩展的默认翻译
  },
  extensions: [
    createAIExtension({
      model,
    }),
  ],
  // ... 其他编辑器选项
});

更多关于 createAIExtension 方法的信息，请参阅 API 参考。

添加 AI UI 元素

现在，只剩下一步就是自定义编辑器的 UI 元素。 我们希望：

  • 在格式工具栏（选中文本时显示）中添加一个 AI 按钮
  • 在斜杠菜单（输入 / 时显示）中添加一个 AI 选项

我们通过禁用默认的 FormattingToolbar 和 SuggestionMenu 并添加自定义的方式实现。更多信息请参阅 更改 UI 元素。

<BlockNoteView
  editor={editor}
  // 我们禁用了部分默认 UI 元素
  formattingToolbar={false}
  slashMenu={false}
>
  {/* 将 AI 命令菜单添加到编辑器 */}
  <AIMenuController />
 
  {/* 创建带有 AI 按钮的自定义格式工具栏
    (完整示例代码见下方) */}
  <FormattingToolbarWithAI />
 
  {/* 创建带有 AI 选项的自定义斜杠菜单
    (完整示例代码见下方) */}
  <SuggestionMenuWithAI editor={editor} />
</BlockNoteView>

完整示例

查看完整示例代码和在线演示。在编辑器中选中文本并点击 AI（星星）按钮，或在任意位置输入 /ai 来使用 AI 功能。

AI自定义命令