---
title: "安装 AI Agent 扩展"
description: "了解如何安装和设置 Tiptap 的 AI Agent 扩展。"
canonical_url: "https://tiptap.zhcndoc.com/content-ai/capabilities/agent/install"
---

# 安装 AI Agent 扩展

了解如何安装和设置 Tiptap 的 AI Agent 扩展。

> **已废弃:**
>
> 该扩展正在逐步被 AI 工具包（AI Toolkit）取代，后者提供了增强的功能和现代化的 API。您仍然可以继续使用此扩展，但我们建议在新项目中优先考虑使用 AI 工具包。

## 安装包

AI Agent 扩展发布在 Tiptap 的私有 npm 注册表中。通过遵循 [私有注册表指南](https://tiptap.zhcndoc.com/guides/pro-extensions.md) 来集成该扩展。

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

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

## 设置提供商

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

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

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

AI 代理可以开箱即用 [与 Tiptap Cloud](https://tiptap.zhcndoc.com/content-ai/capabilities/agent/use-with-content-ai-cloud.md) 作为后端。

要为在后端运行的自定义 AI 代理添加文本编辑功能，请阅读 [集成指南](https://tiptap.zhcndoc.com/content-ai/capabilities/agent/custom-llms.md)。

## 在编辑器中导入扩展

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

```tsx
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 交互。

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

## 显示 AI Agent 聊天对话

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

```tsx
provider.state.messages
```

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

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

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