安装 AI Agent 扩展

Available in Team planBeta

安装包

AI Agent 扩展发布在 Tiptap 的私有 npm 注册表中。通过遵循私有注册表指南来集成该扩展。

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

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

设置提供商

provider 对象管理 AI Agent 的状态。开始使用 AI Agent 扩展最简单的方法是使用 Tiptap Cloud 提供商：

import { AiAgentProvider } from '@tiptap-pro/extension-ai-agent'

const provider = new AiAgentProvider({
  // 配置 Tiptap Cloud（见下一节）
  appId: 'APP_ID_HERE',
  token: 'TOKEN_HERE',
})

AI 代理可以开箱即用与 Tiptap Cloud 作为后端。

要为在后端运行的自定义 AI 代理添加文本编辑功能，请阅读集成指南。

在编辑器中导入扩展

将 AiAgent 添加到扩展列表中并配置 provider。

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

const editor = new Editor({
  extensions: [
    StarterKit,
    AiAgent.configure({
      provider,
      // … 其他选项
    }),
    // … 更多扩展
  ],
})

调用 AI Agent

通过调用 provider 的方法与 AI Agent 交互。

provider.addUserMessage(
  '纠正拼写和语法错误。然后，找到文本中的关键短语并加粗格式。',
)
provider.run()

显示 AI Agent 聊天对话

您可以访问 AI Agent 的状态（包括聊天对话）并将其显示在 UI 中：

provider.state.messages

您还可以订阅事件，并在事件触发时更新 UI：

// 订阅状态变化
provider.on('stateChange', (newState, previousState, context) => {
  console.log('状态变化:', newState)
  // 根据新状态更新 UI
})

// 订阅加载错误
provider.on('loadingError', (error, context) => {
  console.error('发生错误:', error)
  // 向用户显示错误信息
})