Devtools | TanStack AI 文档

TanStack Devtools 是一个用于检查和调试 TanStack 库（包括 TanStack AI）的统一开发者工具面板。它提供对 AI 交互、工具调用和状态变化的实时洞察，使开发和调试 AI 驱动的应用程序更加容易。

特性

实时监控 - 查看实时聊天消息、工具调用和 AI 响应。
工具调用检查 - 检查工具调用的输入和输出。
状态可视化 - 可视化聊天状态和消息历史记录。
错误跟踪 - 监控 AI 交互中的错误和异常。

安装

要将 TanStack Devtools 与 TanStack AI 一起使用，请安装 @tanstack/react-ai-devtools 包

npm install -D @tanstack/react-ai-devtools @tanstack/react-devtools

或者 @tanstack/solid-ai-devtools 包用于 SolidJS

npm install -D @tanstack/solid-ai-devtools @tanstack/solid-devtools

或者 @tanstack/preact-ai-devtools 包用于 Preact

npm install -D @tanstack/preact-ai-devtools @tanstack/preact-devtools

用法

在您的应用程序中导入并包含 Devtools 组件

tsx

import { TanStackDevtools } from '@tanstack/react-devtools'
import { aiDevtoolsPlugin } from '@tanstack/react-ai-devtools'

const App = () => {
  return (
    <>
       <TanStackDevtools 
          plugins={[
            // ... other plugins
            aiDevtoolsPlugin(),
          ]}
          // this config is important to connect to the server event bus
          eventBusConfig={{
            connectToServerBus: true,
          }}
        />
    </>
  )
}

开发工具

特性

安装

用法