# @dudko\.dev/agent-web-react 中文文档 规范地址：https://npmcn.com/package/%40dudko.dev/agent-web-react/ 版本：0\.0\.24 npm 元数据更新时间：2026-11-14T02:51:23.425Z 中文译文更新时间：2026-11-14T15:42:59.261Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40dudko.dev/agent-web-react 原文对照：https://npmcn.com/package/%40dudko.dev/agent-web-react/?lang=original 项目主页：https://dudko-dev.github.io/agent-web-react/ 源码仓库：https://github.com/dudko-dev/agent-web-react ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.3 MB，16 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=18 - 运行依赖：0 个 - peer 依赖：react \>=18，react-dom \>=18，@dudko\.dev/agent-web \>=0\.0\.30 - 首次发布：2026-07-02T18:39:58.641Z - 最新版本发布：2026-11-14T02:51:23.081Z - 近 30 天下载量：2000（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：23（近 12 个月 23 个） ## 中文简介 对@dudko.dev/agent-web 的回放绑定:无头使用 Agent shook, Agent Provider 上下文,以及可选的预设组件(聊天面板,计划/步骤视图,BYOK密钥形式,WebLLM负载栏),将浏览器 LLM 代理连接到任何反应站点. 请你 ## 安装 ```sh npm install @dudko.dev/agent-web-react ``` 也可以使用：`pnpm add @dudko.dev/agent-web-react`、`yarn add @dudko.dev/agent-web-react`、`bun add @dudko.dev/agent-web-react` ## README # @dudko.dev/代理网络反应 反应约束 [`@dudko.dev/agent-web`](https://www.npmjs.com/package/@dudko.dev/agent-web) —— 说 无头,普遍 **浏览器 LLM 代理**。将代理放入任何反应 具有单钩和(可选的)一组前置组件的应用程序: - 🪝 **`useAgent`** —— 从配置中构建代理, 流出其输入的事件 即时投降状态(计划、步骤、工具呼叫、流接答、符号) 使用、模型装入进度、聊天记录) `run` 编号 : `stop` 编号 : `reset` 编号 : `reload`。 。 。 . - 💬 **``** ——一来一回聊天:每个工具的呼叫及其成本,代号由 a. 每一答复,以及全部想法、副剂、同意提示 有“ +” / Ctrl+V / 拖放附件( 图像、 PDF 、 文件) 的作曲者, "/"命令,运行计时器,代理,模型+思维芯片,"QQ自动"同意 芯片和语音到文本; 在索引数据库和一个工作空间中保存聊天( 虚拟) 文件系统)面板. 一切都是道具:显示/隐藏,标签(i18n),渲染 道具、插槽、可互换组件、主题——见 [文件/聊天时间](https://npmcn.com/package/%40dudko.dev/agent-web-react/docs/chat.md)。 。 。 . - 🗣️ **指导和学习** ——在代理人工作时输入(`send`, (中文(简体) ), `stopSubagent`; 队列 / 在获得它们的步骤下交付了笔记),并观看 它保存一本笔记本:它写成技能的教训`learned`, (中文(简体) ), ``, (中文(简体) ), `forgetSkill`和它获得的页面 [文件/聊天时间](https://npmcn.com/package/%40dudko.dev/agent-web-react/docs/chat.md#talking-to-the-agent-while-it-works)。 。 。 . - 🧩 **构件** —— 说 ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``, (中文(简体) ), ``; 钩子 `useChatHistory`, (中文(简体) ), `useVirtualFiles`, (中文(简体) ), `useSpeechToText`; MCP 钩 `useMcp` 编号 : `useMcpServers` 住在这里 [`@dudko.dev/agent-web-react/mcp`](https://npmcn.com/package/%40dudko.dev/agent-web-react/#readme-mcp-hooks-live-in-their-own-subpath)。 。 。 . - 🔑 **`useCredentials`** ——存储 BYOK API 密钥 **休息时加密** (WebCrypto + 索引DB). - 🖥️ **`useWebLLMModel`** 编号 : **`useLocalModel`** 装入一个安装在设备上的模型(WebLLM, 浏览器的内置模式,变压器.js, 或您的运行时间) 下载进度、切换和卸载. - 🎛️ **无头第一** – 该事件– UI 逻辑是一个纯的,导出还原器 (单位:千美元)`agentStateReducer`;组件为上部可选糖. [![npm](https://img.shields.io/npm/v/@dudko.dev/agent-web-react.svg)](https://www.npmjs.com/package/@dudko.dev/agent-web-react) [![npm downloads](https://img.shields.io/npm/dy/@dudko.dev/agent-web-react.svg)](https://www.npmjs.com/package/@dudko.dev/agent-web-react) [![license](https://img.shields.io/npm/l/@dudko.dev/agent-web-react.svg)](https://www.npmjs.com/package/@dudko.dev/agent-web-react) ![GitHub last commit](https://img.shields.io/github/last-commit/dudko-dev/agent-web-react.svg) > **▶︎ [现场演示](https://dudko-dev.github.io/agent-web-react/)** - 三名探员: 一个编辑粘贴纸板,一个驱动任意数量的MCP服务器(加上 185个工具模拟目录 显示工具搜索,一个玩棋子对着你 ——你的动作触发了它,分析子剂在Web Workers运行. 云别克或 本地 WebGPU, 都在您的浏览器中 。 设置打开工具同意、思维、符号 和步入限制,收缩,技能 - 经纪人自己的 **笔记本** (写下来) 在工作空间里 跨越重载)和 **网络访问** 有限 以列表为主机。 工作时输入代理。 来源于 [`demo/`](https://npmcn.com/package/%40dudko.dev/agent-web-react/demo/)。 。 。 . ## 安装 ```bash npm install @dudko.dev/agent-web-react @dudko.dev/agent-web react react-dom ``` 然后添加 **只有您使用的模型提供者** (核心的可选同行, 动态导入 : ```bash # cloud, pick what you need npm install @ai-sdk/openai # or @ai-sdk/anthropic, @ai-sdk/google, @ai-sdk/xai, @ai-sdk/deepseek, @ai-sdk/openai-compatible # local WebGPU models npm install @browser-ai/web-llm @mlc-ai/web-llm ``` 一次导入可选样式表( 如果您对组件进行样式化, 请选中它) 自己吗 ```ts import '@dudko.dev/agent-web-react/styles.css' ``` ## 快速启动——一个即时聊天面板 `` 建立一个代理人并分享; `` 让它. ```tsx import { useMemo } from 'react' import { AgentProvider, AgentChat, useCredentials, defineTool, } from '@dudko.dev/agent-web-react' import { z } from 'zod' import '@dudko.dev/agent-web-react/styles.css' export function Assistant() { const credentials = useCredentials() // encrypted vault (WebCrypto + IndexedDB) // Your app's actions, as tools. Keep the object referentially stable. const tools = useMemo( () => ({ add_text: defineTool({ description: 'Add a text block to the page.', inputSchema: z.object({ text: z.string() }), execute: async ({ text }) => addTextBlock(text), // your code }), }), [], ) return ( serializeMyState(), // optional grounding }} > ) } ``` > **使用捆绑机(Vite, Next, CRA)?** 一个提供者 **光谱** 就像上面的那个 请求核心 `import('@ai-sdk/google')` 运行时——但浏览器捆绑器 解决不了的, `@vite-ignore`d 导入,所以失败 _“......提供包件没有安装”_ (和 WebLLM 失败 _“网络LLM不是 函数”_) (中文(简体) ). 自己建个模型,传过去 **直接** 相反——见 [捆绑器中的模型](https://npmcn.com/package/%40dudko.dev/agent-web-react/#readme-models-in-a-bundler-vite-next-cra)这是额外的 线和工作在每个捆绑. 存储用户的密钥一次( 在休息时加密), 例如从设置表单中 : ```tsx const credentials = useCredentials() await credentials.setKey('google', userProvidedKey) // or drop in ``` ## 这个 `useAgent` 钩 (无头) `useAgent` 是整个库在一个钩子中——如果需要直接使用它 自己的用户界面 : ```tsx import { useAgent } from '@dudko.dev/agent-web-react' function Custom() { const agent = useAgent({ // In a bundler, pass a model you built (see “Models in a bundler”); a // provider spec like this one only resolves where dynamic imports do. model: { providerType: 'openai', model: 'gpt-5.4-mini', credentialRef: 'openai' }, credentials, tools, }) return ( <> {agent.isRunning && } {/* Everything below is live, derived from the event stream: */} {agent.plan &&

{agent.plan.thought}

} {agent.steps.map((s) => (
{s.index}/{s.total} · {s.step.description} · {s.status} {s.toolCalls.map((c, i) => ( {c.name} ))}
))}

{agent.finalText}

{agent.usage.totalTokens} tokens ) } ``` `useAgent(config, options)` 返回全数 [`AgentUiState`](https://npmcn.com/package/%40dudko.dev/agent-web-react/src/types.ts) 加: | 外地 | 说明 | | --- | --- | | `run(goal, { images, files, attachments, label })` | 启动运行( 有附件); 解决 `RunResult` | | `stop()` | 中止飞行运行 | | `agent` | 核心数据 `Agent` 本身(或 `undefined` 直到建成为止 : `agent.usage` 编号 : `agent.sessionUsage()` (用完的,计为活;核心为0.0.32), `agent.listLearnedSkills()`, (中文(简体) ), `agent.capabilities` | | `forgetSkill(name)` | 从该代理的笔记本中删除其自己的一个教训 | | `sendUndelivered()` 编号 : `discardUndelivered()` | 发送, 或放下, 什么停止运行从未显示代理 | | `send(text)`, (中文(简体) ), `stopSubagent(id)` | 向运行的代理商(在下一个边界向模型倾斜;再规划商重新检查计划)/停止一个子代理商. `queued`, (中文(简体) ), `notes` 财务报告和审定财务报表 `undelivered` 显示信件所在之处 [文件/聊天时间](https://npmcn.com/package/%40dudko.dev/agent-web-react/docs/chat.md#talking-to-the-agent-while-it-works) | | `reset()` | 清除整个对话(和经纪人的记忆) | | `reload()` | 重建代理( 如存储新密钥后) | | `status` | `idle` | `initializing` | `ready` | `running` | `error` | | `isReady` 编号 : `isRunning` | 方便布尔 | | `messages` | 记录;每个助理信息保留其步骤、工具呼叫、想法、批准、子代理、使用和持续时间 | | `plan` 编号 : `steps` | 实时计划和每步工具呼叫(附时间) | | `finalText` 编号 : `finalReasoning` | 流传的答案及其想法 | | `usage` 编号 : `totalUsage` | 按种类分类,这是对话的标志 | | `pendingApprovals`, (中文(简体) ), `approve(id, { remember })`, (中文(简体) ), `deny(id)` | 工具协议 | | `approvalMode` 编号 : `setApprovalMode(mode)` | 自动驾驶开关, 直播 | | `compact()` | 现在总结一下存储的文字记录 | | `sessionId` 编号 : `loadChat(chat)` | 内存会话; 切换对话框 | | `subagents`, (中文(简体) ), `skills`, (中文(简体) ), `discoveredTools`, (中文(简体) ), `compactions`, (中文(简体) ), `budget` | 剩下的运行,折叠 | | `learned`, (中文(简体) ), `learnedNow`, (中文(简体) ), `fetches` | 代理人的笔记本`LessonView[]`,存活下来 `reset`),它写了什么这个跑,和 `web_fetch` 请求此运行( n)`FetchView[]`(中文(简体) ) | | `queued`, (中文(简体) ), `notes`, (中文(简体) ), `undelivered`, (中文(简体) ), `replan` | 引导:等待、显示(和在何处)留下的信息;最后的重新规划决定(`byUser` 当信息引起它的时候) | | `error`, (中文(简体) ), `stopped`, (中文(简体) ), `events`, (中文(简体) ), `seq` | 运行错误文本, 是否停止, 原始事件日志及其计数器 | | `modelLoad` | WebLLM 下载进度, 装入时 | **选项 :** `deps` (这些变化时重建代理人——例如,在模型上重建) 切换, `onEvent` (接接活物流), `autoStart`, (中文(简体) ), `maxEvents`, (中文(简体) ), `approvals` (程序同意请求入钩;默认为真). > 保留 `tools` 财务报告和审定财务报表 `describeState` 优惠稳定(`useMemo` 编号 : `useCallback`; 通过更改 `deps` 阵列重建 a 上的代理 模型/提供者开关. ## 本地 WebGPU 模型( 无密钥, 离线) ```tsx import { useAgent, useWebLLMModel, ModelLoadBar } from '@dudko.dev/agent-web-react' import { webLLM } from '@browser-ai/web-llm' // your app's optional peer // Build WebLLM in your own code so the bundler includes it (see note below). const createLocalModel = (id: string, opts?: object) => Promise.resolve(webLLM(id, opts as never)) function LocalAgent() { const local = useWebLLMModel('Qwen2.5-1.5B-Instruct-q4f16_1-MLC', { create: createLocalModel }) const agent = useAgent( { model: local.model!, tools }, { deps: [local.model] }, // build once the model is loaded ) if (!local.ready) { return local.loading ? ( ) : ( ) } return } ``` > `load()` 急于下载权重(因此进度栏在加载时会填充), 不默不作声地传达第一个信息)和 `ready` 只有模型可以翻转 实际回答。 这个 `create` 选项是它是如何在捆绑器下工作的—— 见下文. > > 改变 `modelId` 和一切的钩子报告—— `model`, (中文(简体) ), `ready`, (中文(简体) ), `loading`, (中文(简体) ), `progress`, (中文(简体) ), `error` 是关于新的,没有装入 还没有。 以前的模型留在内存中(`loadedModelId`; 回切换为 (即刻)直到新的一个被装入——这首先释放它,所以两个型号 从未共享 GPU —— 或者直到 `unload()`。 。 。 . > > **上下文窗口.** WebLLM 用一个 4096-token 窗口装入其模型, 距离 在Quen3或Llama 3.x的训练之下。 过 `contextWindowTokens` 改为 加载更多( 花费 KV- cache VRAM 而不是新下载); 您 `create` 工厂接收 并应用核心 `withWebLLMContextWindow` (见演示) `providers.ts`) (中文(简体) ). `local.contextWindow` 窗口是模型 里面装满了炸药 毒剂自己装入了炸药中, 工具列表和工具结果从中大小. > > **视觉.** `Phi-3.5-vision-instruct-q4f16_1-MLC` 获取图像( 贴上, 滴出) ——一种从不向任何地方发送它们的多式联运模式. ### 任何运行时间 `useLocalModel` `useWebLLMModel` 实值 `useLocalModel` 与 WebLLM 引擎。 描述另一个 作为引擎运行时间—— `create`,可选择 `warmUp` (下载,现在,与 进展, `unload`, (中文(简体) ), `supported`, (中文(简体) ), `contextWindowOf` - 钩子给 不变 `load` 编号 : `unload` / 进度/ 切换 : ```tsx import { useLocalModel, createWebLLMEngine, type LocalModelEngine } from '@dudko.dev/agent-web-react' const builtIn: LocalModelEngine = { create: async () => (await import('@browser-ai/core')).browserAI('text', { expectedInputs: [{ type: 'text' }, { type: 'image' }], }), warmUp: async (m, { onProgress }) => { await m.createSessionWithProgress((p) => onProgress({ progress: p, text: 'Downloading' })) }, supported: () => 'LanguageModel' in globalThis, // Chrome's Prompt API contextWindowOf: (m) => m.getContextWindow(), } const webllm = createWebLLMEngine({ create: createLocalModel }) // One hook, any runtime: switching frees the previous model with its own engine. const local = useLocalModel(option.model, option.builtIn ? builtIn : webllm, { contextWindowTokens: option.contextWindow, }) ``` 演示会运行WebLLM,Chrome的双子纳米和变压器. js这种方式——看 [`demo/src/local-engines.ts`](https://npmcn.com/package/%40dudko.dev/agent-web-react/demo/src/local-engines.ts)。 。 。 . ## 捆绑器中的模型( Vite, Next, CRA) 核心构建云提供方 `import('@ai-sdk/')` 和网络LLM 与 `import('@browser-ai/web-llm')`这些是 **赤裸的, `@vite-ignore`d 动态 进口** – 对节点/ SSR/ 导入- 映射设置很有帮助, 但也可以是浏览器捆绑器 让他们在运行时无法解决(云)- _“提供一揽子......不是 已安装”_)或将其分解为空模块(WebLLM →) _“网络LLM不是 函数”_) (中文(简体) ). 两者的修补相同: **在自己的代码中构建模型** (静态) 导入您的捆绑器可以看见),并将代理直接交给 `LanguageModel`。 。 。 . **云头** 从库藏钥匙中建造提供者: ```tsx import { useEffect, useState } from 'react' import { createGoogleGenerativeAI } from '@ai-sdk/google' import type { LanguageModel } from 'ai' import { useAgent, useCredentials } from '@dudko.dev/agent-web-react' function CloudAgent() { const credentials = useCredentials() const [model, setModel] = useState() useEffect(() => { credentials.store.getApiKey('google').then((key) => { setModel(key ? createGoogleGenerativeAI({ apiKey: key })('gemini-3.5-flash') : undefined) }) }, [credentials.store, credentials.version]) const agent = useAgent({ model: model!, credentials: credentials.store, tools }, { deps: [model] }) // …render once model is set } ``` > 人类需求 `headers: { 'anthropic-dangerous-direct-browser-access': 'true' }` 转至 `createAnthropic({ … })` 用于直接浏览器的呼叫. **当地** - 通过静态进口 `webLLM` 工厂通过 `useWebLLMModel`是因为 `create` 选项(见上文WebLLM实例). 这个 [`demo/`](https://npmcn.com/package/%40dudko.dev/agent-web-react/demo/) 应用程序就是这样做的 [`demo/src/providers.ts`](https://npmcn.com/package/%40dudko.dev/agent-web-react/demo/src/providers.ts)。 。 。 . ## MCP钩子生活在自己的亚道 ```tsx import { useMcp, useMcpServers } from '@dudko.dev/agent-web-react/mcp' ``` MCP钩子是 **没有** 从 `@dudko.dev/agent-web-react`他们装入 核心软件 `@dudko.dev/agent-web/mcp`输入 `@modelcontextprotocol/sdk` - 一个 _选项_ pal,所以 npm 不为您安装它 。 捆绑者不能遵守 "可选":它甚至解决了动态 `import()` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}在建设时间 {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}所以宿主 仅进口 `useAgent` 从用于失败的 Webpack/CRA 的主条目中 `Module not found: @modelcontextprotocol/sdk/…` 而不接触MCP。 后面一个 子路径决定是你的: - **别用MCP** 只从主条目导入。 你楼里什么都没有 提及 SDK; 安装任何额外内容 . - **使用 MCP 程序** • 从 `…/mcp` 财务报告和审定财务报表 `npm install @modelcontextprotocol/sdk` 与核心相邻(它被捆绑成aync块,在连接时被加载). > **从 0.0 18.** `useMcp`, (中文(简体) ), `useMcpServers` 他们和他们的援助者 (单位:千美元)`readCallbackParams`, (中文(简体) ), `claimOAuthCallback`, (中文(简体) ), `stripOAuthParams`, (中文(简体) ), `describeMcpResult`, (中文(简体) ), `isUnauthorizedError`)和类型(`McpStatus`, (中文(简体) ), `McpAuthMode`, (中文(简体) ), `McpServerView`,.) 已移动:更改导入路径,无其他. ## 这个 `useMcp` 钩- 连接远程 MCP 服务器 让用户在运行时为自己的MCP服务器命名并将其工具交给 探员 Auth 要么是静态头头,要么是 OAuth 2.1 的整流 **动态 客户注册** ——没有客户端ID可以配置,访问符是 中跑期满时给你刷新了. ```tsx import { useMcp } from '@dudko.dev/agent-web-react/mcp' const mcp = useMcp({ clientName: 'my-app' }) await mcp.connect({ url, oauth: true }) // or { url, headers: { Authorization } } // The server wants a sign-in: send the user off from a real click. {mcp.status === 'needs-authorization' && } // Then just merge the tools into any agent config. const config = { model, tools: { ...myTools, ...mcp.tools } } ``` `useMcp` 返回时 `{ status, tools, catalog, error, authorizationUrl, oauthSupported, completingAuthorization, connect, disconnect, authorize, forgetAuthorization, checkOAuthSupport }`。 。 。 . `status` 实值 `idle | connecting | connected | needs-authorization | error`。 。 。 . OAuth绕行 远离你的应用 所以钩子坚持它 需要,并在返回途中完成代码交换,条 `?code=…` 从 地址栏和在渲染前重新连接.. `completingAuthorization` 把窗户盖上. 两份说明: - 连接器住在核心的可选位置 `@dudko.dev/agent-web/mcp` 子路径 并装有 **动态导入**所以SDK不会出现在你的首字母里 捆绑到 `connect` 运行。 安装 `@modelcontextprotocol/sdk` 与 核心 —— 导入这些钩子是它放在你的建筑里. - `oauthSupported` 实值 `false` 超过 `@dudko.dev/agent-web@0.0.9`, (中文(简体) ), 一、导 言 `BrowserOAuthProvider`; 页眉 auuth 仍然在那里工作。 这个 对等层为 `>=0.0.30` 第一个有学习笔记本的核心 (单位:千美元)`forgetSkill`, (中文(简体) ), `listLearnedSkills`在虚拟文件系统之上, 附件、 同意、 工具搜索、 子代理、 引导和上下文编辑 软件包的聊天基于此. `agent.usage` 编号 : `agent.sessionUsage()` 编辑 窗口生成的输出盖需要 `>=0.0.32`。 。 。 . ## 一些MCP服务器—— `useMcpServers` ```tsx import { useMcpServers } from '@dudko.dev/agent-web-react/mcp' const mcp = useMcpServers({ clientName: 'my-app' }) // the list persists; reconnects on load await mcp.add({ name: 'docs', url, auth: 'oauth' }) // 'none' | 'bearer' (+ token) | 'oauth' mcp.servers // [{ name, url, status, catalog, error, … }] const config = { model, tools: { ...myTools, ...mcp.tools } } // "__" ``` 服务器平行连接, 每个服务器都有自己的最后期限; pagized 工具列表 被读取到尾端; 工具一个服务器标记只读取“ ssk before 更改“ 提示 。 用数百个工具 核心开关 **工具搜索** (简明目录+) `find_tools`上文) `toolSearchThreshold` ——见: 核心软件 [能力文件](https://github.com/dudko-dev/agent-web/blob/main/docs/capabilities.md)。 。 。 . ## 构成部分 所有组件都是可选的,样式由 `styles.css` (类别前缀) `awr-`, (中文(简体) ), 可通过主题 `--awr-*` 自定义属性, 光 + 暗, 或 `theme`) (中文(简体) ). 每个 接受一个 `className` 财务报告和审定财务报表 `labels`; 数据组件取出简单的道具以便您可以 独立使用它们。 完整指南: [文件/聊天时间](https://npmcn.com/package/%40dudko.dev/agent-web-react/docs/chat.md)。 。 。 . | 构成部分 | 目的 | | --- | --- | | `` | 完整面板:带有每回答活性+作曲+可选历史和文件面板的笔录. 读取 a `controller` 道具或该道具 `` 上下文. | | `` | 输入及其工具栏:附件、命令、计时器、代理、模型/思维、同意、麦克、发送/停止. | | `` | 笔录;每个答案都有其步骤,工具呼叫,思想,用法. | | `` 编号 : `` | 执行步骤 / 一个工具调用其成本和图像 . | | `` | 同意卡(Allow一次/永远/拒绝). | | `` | 部分同意-模式开关. | | `` | 保存聊天( 从 `useChatHistory`) (中文(简体) ). | | `` | A 类 `VirtualFileSystem`,直播:预览,下载,删除,上传. | | `` | 经纪人的笔记本`learning`:它的教训,每一个来自哪里,忘记吧. | | `` | 按种类分类,预算栏,最后的收缩,契约. | | `` | 计划推理+步骤列表. | | `` | WebLLM下载/init进度. | | `` | 压缩符号读出 . | | `` | BYOK密钥条目写到加密金库. | | `` | 最小文本区域 + 发送/ 停止( kept for own apps) . | ### 构建自己的用户界面 部件是一层薄薄的外出层, **纯** 减少。 用这个 如果你愿意自己创造一切 ```ts import { agentStateReducer, createInitialAgentState } from '@dudko.dev/agent-web-react' let state = createInitialAgentState() state = agentStateReducer(state, { type: 'event', event }) // fold each AgentEvent ``` 状态由纯度,导出视图类型组成,您可以用自己的组件渲染: `StepView` (一个步骤及其 `ToolCallView`s),(c), `ApprovalView`, (中文(简体) ), `SubagentView`, (中文(简体) ), `UserNoteView` 编号 : `QueuedMessageView` (偷窥), `LessonView` 编号 : `FetchView` (笔记本和取出的文件), `BudgetView`, (中文(简体) ), `CompactionView`, (中文(简体) ), `AttachmentView`, (中文(简体) ), `ChatMessage` (记录录,保留其 (c) 使用时间和期限)。 外边 ``, (中文(简体) ), `useAgentContext()` 返回控件 随函附上 `` (它投出一个外; `useOptionalAgentContext()` 返回时 `undefined` (第2条) `useLabels()` 有效的标签. ## 如何融为一体 ``` @dudko.dev/agent-web (peer) → the headless agent + providers + vault @dudko.dev/agent-web-react → useAgent / / components your app → tools, credentials, and where the panel goes ``` React 软件包再导出您通常需要的核心原始 (单位:千美元)`createAgent`, (中文(简体) ), `defineTool`, (中文(简体) ), `VaultCredentialStore`, (中文(简体) ), `createWebLLMModel`, (中文(简体) ), `isWebGPUAvailable`,以及关键类型),所以React app可以导入全部 从一个地方. > **直接浏览器调用 & CORS :** 并非每个提供者都允许 BYOK 直接通话 从浏览器来源。 Google (Gemini), Openai 兼容和网关 (a) 可靠的直接路径; OpenAI/xAI/DeepSeek通常需要一个代理. 见核心 [提供者 doc](https://github.com/dudko-dev/agent-web/blob/main/docs/providers.md)。 。 。 . 只载 **用户自己的** 浏览器的密钥——共享/应用密钥归属 在代理或网关后面. ## 浏览器测试 `npm run test:e2e` 构建演示并用铬驱动 : - MCP: 连接到一个和几个服务器, OAuth 全部重定向 往返(授权) ——带代码回来 ——连接),重新连接 重新装入后存储的符号, 以及无法获取的服务器; - 代理商,针对一个被脚本化的双子座端点([`e2e/gemini.ts`](https://npmcn.com/package/%40dudko.dev/agent-web-react/e2e/gemini.ts), (中文(简体) ), 真实 `@ai-sdk/google` 下方提供者: 工具呼叫和符号 文本中的类型, 重装后保存并恢复的聊天, 图像 附加(shown,作为文件部分发送,保存在工作空间),一个文件 页面上的任何位置,“询问”模式下的同意,斜线命令 触发代理商的棋子移动和俄罗斯标签;代理商的 笔记本(写作的一课,保存在工作空间里,跨越重载,由 规划者,应请求被遗忘)和网络访问(默认关闭;允许的页面) 读取,拒绝元数据地址)。 MCP和授权服务器 对话在回转时开始 [`e2e/servers.ts`](https://npmcn.com/package/%40dudko.dev/agent-web-react/e2e/servers.ts),标准 标头包括——因此,测试还标出部署要求: 挑战头被曝光. 这些内容包括哪些单位在结构上无法测试: 调制,一个真正的导航 远离和回,和索引DB. ## 演示和部署 这个 [`demo/`](https://npmcn.com/package/%40dudko.dev/agent-web-react/demo/) 应用( Vite + React) 部署到 GitHub Pages 由 [`.github/workflows/deploy-demo.yml`](https://npmcn.com/package/%40dudko.dev/agent-web-react/.github/workflows/deploy-demo.yml) 打开 每一次推动 `main`。要在当地运行它: ```bash npm install && npm run build # build the library into dist/ cd demo && npm install && npm run dev ``` 演示别名 `@dudko.dev/agent-web-react` 改为: `../dist`,因此重建 图书馆(`npm run build`)在更改出处后. ## 许可证 麻省理工学院 ## 常见问题 ### @dudko\.dev/agent-web-react 是什么？ 对@dudko\.dev/agent-web 的回放绑定:无头使用 Agent shook, Agent Provider 上下文,以及可选的预设组件\(聊天面板,计划/步骤视图,BYOK密钥形式,WebLLM负载栏\),将浏览器 LLM 代理连接到任何反应站点\. 请你 ### 如何安装 @dudko\.dev/agent-web-react？ 在项目目录运行 npm install @dudko\.dev/agent-web-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）、@dudko\.dev/agent-web（\>=0\.0\.30）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @dudko\.dev/agent-web-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @dudko\.dev/agent-web-react 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @dudko\.dev/agent-web-react 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @dudko\.dev/agent-web-react 可以商用吗？ @dudko\.dev/agent-web-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @dudko\.dev/agent-web-react 的下载量有多少？ 根据 npm 官方下载统计，@dudko\.dev/agent-web-react 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,000 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @dudko\.dev/agent-web-react 还在维护吗？ 最新版本 0\.0\.24 发布于 2026/11/14（今天）；至今共发布 23 个版本，其中过去 12 个月发布了 23 个；首次发布于 2026/07/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。