文档
AI
自定义命令

自定义 AI 菜单项（命令）

用户与 AI 代理交互的核心部分是 AI 建议菜单，用户可以在这里输入自定义提示或选择预定义命令：

image

这个菜单易于自定义，因此你可以暴露针对你的应用程序微调的命令。

定义你自己的命令

首先，我们定义一个新的 AI 命令。让我们创建一个让选中文本变得更随意的命令。

import { AIMenuSuggestionItem, getAIExtension } from "@blocknote/xl-ai";
 
// 自定义命令：让文本更随意（非正式）。
export const makeInformal = (
  editor: BlockNoteEditor,
): AIMenuSuggestionItem => ({
  key: "make_informal",
  title: "使文本更随意",
  aliases: ["informal", "make informal", "casual"],
  icon: <RiEmotionHappyFill size={18} />,
  onItemClick: async () => {
    await getAIExtension(editor).callLLM({
      // 发送给大语言模型的提示：
      userPrompt: "给选中文本赋予更随意（非正式）的语气",
      // 告诉大语言模型具体使用选中的内容作为上下文（而非整个文档）
      useSelection: true,
      // 我们只希望大语言模型更新选中文本，不添加或删除区块
      defaultStreamTools: {
        add: false,
        delete: false,
        update: true,
      },
    });
  },
  size: "small",
});

现在，我们创建一个自定义的 AI 菜单，当用户选中部分文本并打开 AI 菜单时显示此命令：

import { AIMenu, getDefaultAIMenuItems } from "@blocknote/xl-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") {
          if (editor.getSelection()) {
            // 当存在选区时（即通过格式工具栏打开 AI 菜单），
            // 在默认命令基础上添加我们自定义的 `makeInformal` 命令。
            return [
              ...getDefaultAIMenuItems(editor, aiResponseStatus),
              makeInformal(editor),
            ];
          } else {
            return getDefaultAIMenuItems(editor, aiResponseStatus);
          }
        }
 
        // 其它状态，返回默认命令项
        return getDefaultAIMenuItems(editor, aiResponseStatus);
      }}
    />
  );
}

接下来，在我们的应用中使用这个自定义 AI 菜单：

<BlockNoteView
        editor={editor}
        formattingToolbar={false}
        slashMenu={false}
      >
    {/* 创建一个新的 AIMenu，其中包含默认命令和我们的自定义命令。 */}
    <AIMenuController aiMenu={CustomAIMenu} />
 
    {/* ...其它 UI 元素... */}
     <FormattingToolbarWithAI />
    <SuggestionMenuWithAI editor={editor} />
</BlockNoteView>

完整示例

请查看下面的完整示例，我们还在没有选区时（例如在编辑器中输入 /ai 打开时）添加了 AI 菜单项。

参考

到目前为止，我们仅向编辑器添加了基础命令，但你可以完全自定义发给大语言模型的低级提示。 要详细了解本指南中使用的 callLLM 方法，请继续阅读 AI 参考文档。

开始使用参考