---
title: "监听事件"
description: "学习如何监听 Tiptap 中 AI Agent 的事件。"
canonical_url: "https://tiptap.zhcndoc.com/content-ai/capabilities/agent/features/events"
---

# 监听事件

学习如何监听 Tiptap 中 AI Agent 的事件。

AI Agent 提供者会发出事件，你可以订阅这些事件以响应代理状态的变化。这些事件使你能够构建响应式的用户界面并实现自定义逻辑。

## 可用事件

| 事件               | 描述               | 参数                                   |
| ---------------- | ---------------- | ------------------------------------ |
| `stateChange`    | 提供者状态变化时触发       | `(newState, previousState, context)` |
| `loadingError`   | 加载过程中发生错误时触发     | `(error, context)`                   |
| `beforeToolCall` | 工具调用执行前触发        | `(toolCall, context)`                |
| `afterToolCall`  | 工具调用执行后触发        | `(toolCall, context)`                |
| `stopRunning`    | AI Agent 运行完成时触发 | `(context)`                          |

## 订阅事件

订阅事件有两种方式。在初始化提供者时，你可以通过选项传入事件处理函数。

```tsx
const provider = new AiAgentProvider({
  onStateChange: (newState, previousState, context) => {
    console.log('状态变化:', newState)
    // 基于新状态更新 UI
  },
  onLoadingError: (error, context) => {
    console.error('加载错误:', error)
    // 向用户显示错误信息
  },
})
```

或者你可以使用 `on` 方法订阅事件，用 `off` 方法取消订阅。

```tsx
// 定义事件处理函数
const handleStateChange = (newState, previousState, context) => {
  console.log('状态变化:', newState)
  // 基于新状态更新 UI
}

// 订阅事件
provider.on('stateChange', handleStateChange)

// 之后不需要时取消订阅
provider.off('stateChange', handleStateChange)
```