安装 AI 建议扩展

Available in Team planBeta

本安装指南将帮助您从零开始将 AI 建议扩展集成到您的应用中。

安装

AI 建议扩展发布在 Tiptap 的私有 npm 注册表中。请按照私有注册表指南集成该扩展。

准备好后，您可以像安装其他 Tiptap Pro 扩展一样安装它。

npm install @tiptap-pro/extension-ai-suggestion

在编辑器中导入扩展

将 AiSuggestion 添加到扩展列表中。

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import AiSuggestion from '@tiptap-pro/extension-ai-suggestion'

// 初始化编辑器
const editor = new Editor({
  extensions: [
    StarterKit,
    AiSuggestion.configure({
      // 定义建议规则
      rules: [
        {
          id: '1',
          title: '拼写检查',
          prompt: '识别并纠正任何拼写错误',
          color: '#DC143C',
          backgroundColor: 'FFE6E6',
        },
      ],
      // 配置内容 AI 云（见下一节）
      appId: 'APP_ID_HERE',
      token: 'TOKEN_HERE',
      // … 其他选项
    }),
    // … 更多扩展
  ],
  // 推荐：禁用拼写检查以避免冲突
  editorProps: {
    attributes: {
      spellcheck: false,
    },
  },
})

决定建议的生成方式

下一步是配置生成将在编辑器中显示的建议的方法。

开始使用 AI 建议扩展最简单的方式是使用 Tiptap 内容 AI 云。我们的 API 会根据您的规则和内容生成建议。请参考此安装指南：使用 Tiptap 内容 AI 云。

您也可以使用自己的后端和大语言模型生成校对建议。相关指南请见：集成您自己的后端和大语言模型。

自定义用户界面

最后，您需要配置编辑器样式，以便在 UI 中显示建议。

默认情况下，AI 建议拥有 CSS 类和颜色属性，帮助您对其进行样式设置。使用以下 CSS 样式在建议下方显示彩色下划线。

.tiptap-ai-suggestion {
  border-bottom: 2px solid var(--tiptap-ai-suggestion-color);
  margin-bottom: -2px;
}

.tiptap-ai-suggestion--selected {
  background-color: var(--tiptap-ai-suggestion-background-color);
  transition: background-color 0.5s;
}

您还可以通过提供自定义装饰进一步定制建议的外观。若要在选择建议时显示工具提示或弹出框，请参阅此指南。