# @agentskit/react 中文文档

规范地址：https://npmcn.com/package/%40agentskit/react/

版本：0\.8\.10
npm 元数据更新时间：2026-10-10T14:13:31.641Z
中文译文更新时间：2026-11-06T05:52:13.203Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40agentskit/react
原文对照：https://npmcn.com/package/%40agentskit/react/?lang=original
项目主页：https://www.agentskit.io/docs/reference/packages/react
源码仓库：https://github.com/AgentsKit-io/agentskit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：126 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19
- 运行依赖：1 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2026-04-05T21:52:50.460Z
- 最新版本发布：2026-10-10T14:13:31.267Z
- 近 30 天下载量：4643（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 38 个）

## 中文简介

代理设备Kit的反钩和UI组件.

## 安装

```sh
npm install @agentskit/react
```

也可以使用：`pnpm add @agentskit/react`、`yarn add @agentskit/react`、`bun add @agentskit/react`

## README

# @ agentskit/ 反应

简介 : `major-package`

![AgentsKit](https://raw.githubusercontent.com/AgentsKit-io/agentskit/main/apps/docs-next/public/brand/logo-wordmark.svg)

将流式 AI 聊天添加到任何 React app 在 10 行代码中 .

[![npm version](https://img.shields.io/npm/v/@agentskit/react?color=blue)](https://www.npmjs.com/package/@agentskit/react) [![npm downloads](https://img.shields.io/npm/dm/@agentskit/react)](https://www.npmjs.com/package/@agentskit/react) [![bundle size](https://img.shields.io/bundlejs/size/@agentskit/react?label=bundle)](https://bundlejs.com/?q=@agentskit/react) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/LICENSE) [![stability](https://img.shields.io/badge/stability-beta-yellow)](https://npmcn.com/package/docs/STABILITY.md) [![GitHub stars](https://img.shields.io/github/stars/AgentsKit-io/agentskit?style=social)](https://github.com/AgentsKit-io/agentskit)

**标记 :** `ai` • 妇女 `agents` • 妇女 `llm` • 妇女 `agentskit` • 妇女 `openai` • 妇女 `anthropic` • 妇女 `claude` • 妇女 `gemini` • 妇女 `chatgpt` • 妇女 `react` • 妇女 `react-hooks` • 妇女 `chat-ui` • 妇女 `ai-agents`

## 已核实的证据

-   软件包元数据和测试在 `packages/react/`。 。 。 .
-   软件包指南 : [https://www.agentskit.io/docs/reference/packages/resact 互联网档案馆的存檔,存档日期2014-12-21](https://www.agentskit.io/docs/reference/packages/react)
-   稳定地图: [文件/服务.md](https://npmcn.com/package/docs/STABILITY.md)

## 如何适应生态系统

@ agentskit/ react是反应UI层:用于流式聊天的钩子和无头组件,工具呼叫,内存,以及代理界面.

-   **探员Kit**:与本回购中的其他包一起作曲,从可互换的小零件来构建代理.
-   **书记官处**: 查找已使用此图层的即时代理和模板 [登记. agentskit.io](https://registry.agentskit.io/)。 。 。 .
-   **游戏本**: 学习本层背后的生产模式 [游戏本. agentskit.io](https://playbook.agentskit.io/)。 。 。 .

文档 : [软件包指南](https://www.agentskit.io/docs/reference/packages/react) • 妇女 [代理交接](https://github.com/AgentsKit-io/agentskit/blob/main/llms.txt)

## 为什么反应

-   **飞快一点** - 与工具通话进行流畅聊天,内存在盒子外; `Markdown` 是您选中的渲染器的原始内容槽
-   **使用您的设计系统** 完全无头;用Tailwind、MUI、Shadcn或普通CSS通过样式 `data-ak-*` 属性
-   **默认代理准备** ——内置支持工具调用,思维指示器,多回转记忆,这样你就不会随着产品的增长而撞上一堵墙
-   **将提供者换入一行** ——通过任何适配器从 `@agentskit/adapters`; 您的组件代码永远不会改变

## 安装

```bash
npm install @agentskit/react @agentskit/adapters
```

## 快速实例

```tsx
import { useChat, ChatContainer, Message, InputBar } from '@agentskit/react'
import { anthropic } from '@agentskit/adapters'
import '@agentskit/react/theme'

export function Chat() {
  const chat = useChat({
    adapter: anthropic({ apiKey: process.env.ANTHROPIC_API_KEY, model: 'claude-sonnet-4-6' }),
  })
  return (
    <ChatContainer>
      {chat.messages.map(msg => <Message key={msg.id} message={msg} />)}
      <InputBar chat={chat} />
    </ChatContainer>
  )
}
```

## 特征

-   `useChat` 钩子 — 流线、 中止、 工具调用、 内存和技能在一个 API 中
-   无头组件 : `ChatContainer`, (中文(简体) ), `Message`, (中文(简体) ), `InputBar`, (中文(简体) ), `ToolCallView`, (中文(简体) ), `ThinkingIndicator`
-   `InputBar` 块格式提交和输入时 `chat.status === 'streaming'` (以及何时) `disabled`(中文(简体) )
-   `ToolCallView` 切换曝光 `aria-expanded` 辅助技术
-   `data-ak-*` 用于样式的属性——零硬码样式,全设计-系统控制
-   主题通过 `@agentskit/react/theme` ——选入 CSS 变量,每个组件覆盖
-   与反应18和19合作

## 其他具有约束力的框架(共享国家/行动契约)

每个束缚都适应共享 `ChatReturn` 州/行动合同。 选一个 用于您的堆栈; 组件道具和主机状态形状仍然是框架特定 :

| 软件包 | API 密码 |
| --- | --- |
| [@ agentskit/ veue (帮助)](https://www.npmjs.com/package/@agentskit/vue) | `useChat` 可堆肥 + `ChatContainer` 组件 |
| [@ agentskit/ svelte (英语)](https://www.npmjs.com/package/@agentskit/svelte) | `createChatStore` - Svelte 5商店 |
| [@ agentskit/ 固态](https://www.npmjs.com/package/@agentskit/solid) | `useChat` 钩子( 索利德 ) `createStore`(中文(简体) ) |
| [@ agentskit/反应本地化](https://www.npmjs.com/package/@agentskit/react-native) | `useChat` (地铁/赫尔墨斯安全) |
| [@ agentskit/ 广角](https://www.npmjs.com/package/@agentskit/angular) | `AgentskitChat` 服务( 符号 + RxJS) |
| [@ agentskit/ 链接](https://www.npmjs.com/package/@agentskit/ink) | 终端 `useChat` + 组件 |

## 生态系统

| 软件包 | 作用 |
| --- | --- |
| [@ agentskit/ 核心](https://www.npmjs.com/package/@agentskit/core) | 聊天控制器类型、事件 |
| [@ agentskit/ 适应器](https://www.npmjs.com/package/@agentskit/adapters) | `anthropic`, (中文(简体) ), `openai`, (中文(简体) ), `ollama`,, , , , , , , , |
| [@ agentskit/ 运行时间](https://www.npmjs.com/package/@agentskit/runtime) | 没有浏览器的同堆栈 |
| [@ agentskit/ 工具](https://www.npmjs.com/package/@agentskit/tools) | 工具定义 `useChat` |

## 贡献者

[![AgentsKit contributors](https://contrib.rocks/image?repo=AgentsKit-io/agentskit)](https://github.com/AgentsKit-io/agentskit/graphs/contributors)

## 许可证

麻省理工学院——见 [自由主义](https://npmcn.com/package/LICENSE)。 。 。 .

## 文档

[完整文档](https://www.agentskit.io/) • 妇女 [GitHub 图像](https://github.com/AgentsKit-io/agentskit)

## 成熟性和相容性

-   稳定性: **β 语录** 看到了吗 [文件/服务.md](https://npmcn.com/package/docs/STABILITY.md)
-   **节点.js 20+** 财务报告和审定财务报表 **类型脚本** 严格模式
-   发表于 `@agentskit/react`

## 捐款

见 [捐款额](https://npmcn.com/package/CONTRIBUTING.md) 单曲 [自由主义](https://npmcn.com/package/LICENSE)。 。 。 .

## 常见问题

### @agentskit/react 是什么？

代理设备Kit的反钩和UI组件\.

### 如何安装 @agentskit/react？

在项目目录运行 npm install @agentskit/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @agentskit/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @agentskit/react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @agentskit/react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @agentskit/react 可以商用吗？

@agentskit/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @agentskit/react 的下载量有多少？

根据 npm 官方下载统计，@agentskit/react 在 2026/10/05 – 2026/11/03 这 30 天内被下载 4,643 次，日均约 155 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @agentskit/react 还在维护吗？

最新版本 0\.8\.10 发布于 2026/10/10（28 天前）；至今共发布 38 个版本，其中过去 12 个月发布了 38 个；首次发布于 2026/04/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。