# @bitte-ai/chat 中文文档 规范地址：https://npmcn.com/package/%40bitte-ai/chat/ 版本：0\.23\.0 npm 元数据更新时间：2026-03-24T10:57:22.267Z 中文译文更新时间：2026-11-08T05:03:06.819Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bitte-ai/chat 原文对照：https://npmcn.com/package/%40bitte-ai/chat/?lang=original 项目主页：https://github.com/BitteProtocol/chat#readme 源码仓库：https://github.com/BitteProtocol/chat ## 关键信息（来自 npm 元数据） - 包体积（解压后）：2.7 MB，10 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：46 个 - peer 依赖：react ^18\.0\.0，react-dom ^18\.0\.0 - 首次发布：2025-01-13T12:02:19.851Z - 最新版本发布：2025-09-30T09:23:01.950Z - 近 30 天下载量：2354（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：481（近 12 个月 0 个） ## 中文简介 Bitte AI 聊天组件 ## 安装 ```sh npm install @bitte-ai/chat ``` 也可以使用：`pnpm add @bitte-ai/chat`、`yarn add @bitte-ai/chat`、`bun add @bitte-ai/chat` ## README # 咬断 AI 聊天 ![](https://img.shields.io/github/v/release/BitteProtocol/chat) ![](https://img.shields.io/github/release-date/BitteProtocol/chat) ![](https://img.shields.io/github/commit-activity/m/BitteProtocol/chat) ![](https://img.shields.io/npm/dw/@bitte-ai/chat) [![](https://img.shields.io/badge/StackBlitz-Edit-blue?style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAABECAYAAAD+1gcLAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AINBw4X0bTGRQAABSxJREFUaN7VmVtsFFUYx//fmQW79bbd2QKpaIIaDcGoifFBEgMGqTTRRA01SgxE5Rbi7QG6S3lgo9J2twpeotxEQlCigLdoQwJ4ARN9QB9MRCNRDBdRzE7LJbTSmTl/H4BYStmd2Z3tDOdt5lzml/9833fO9x0gYi2xgom6Tt5aapyKEnRDlrVGPzfGT+G3SwZ87HLGT8f5uYD7jmSl99IAX80RfTY3A5wMqDVepoQPnqVKHtMbAN4PyJeFtPwafXBSknG9UoDHAIDQq7xODRU8mdc5Aeaeffy7O2F8GnnwZM5dKsCic88CrMU8sSMNbubdZwTIDnjlOoZa52eNYQc3c84sEK+d/1a6ji2UA5EFN3POw4C8fcYy/m+a3p1y2MGTOXsqIJsAxAZ1Hei53tgeSfBkBycK1McALrswJGIVHhE3cuD1ed4uorsAXD5Ed7/hqvXlrFtV8LpO3qKpdwJIDLn/AB/+s0SORgp8VJ43KK23AzAvNsagWlXu+lKV6LGc14itvyEwrsiwX6wWNQEijITiY9pYD1vvKAENAG+VC40hQlNlNt3Bq22lt4EYX2Jor6PVe5V8KzDFG7KsFXE/A3GHB/vcdHyx9IQPnuXI/ji3CuRuT+N1+U4ZHPhmGqk43yXY5C0ccE9hsfwQLjgp5n69hmCz9ylYGcRPrgg8ldfLIXjSx5RjNX3GB6GCm3m3ncDz/v4QNnjJ4KsGbubdVhAZ35YFtTaoKOY7jps5dwGIZf73aH7dnZa9QYH72vLNDmcmRNaX86eEnGvT2BoIdA0o3pV2HgRkS9C7bXnRDGlPypmd9r2AvB8FaAFetDJGvqTiyU7eJWeOp1cgfOo3rRbj6ZJRJdHB20TrrkhAAxutXvVsSedMtfEmGno3gNHhM8snVp80IytO0The18HraOgdkYCm7KyLy6MDoYdUfNQyjnZjeheAm8NXmt/FlDH16CI5dUHaN/DhypeZUqK/AkomAsMQ8fCjq41GKy0nim75ydd51UjX3QZgQgQccV/MUfcVSzYM4Mw1hnPa7QJkYgSgD2qqe6xWOVL8kLWaI3ptbgFkUgSgjwpUY09GDpY8ZJnH9UsExhPYH8CuVgtgTJlzC5pqipXxdpUSaF3FzLkdANJleOIJETWlkJbvh78glOVIM64PARjlc2afiGoqtMiuUMoTqRp3ehnQtpDNfqEDBdeC+T6nuELOLGRiXVVPJC5u2xwP6L0+1qOQ8wqZWNmpXECK6wV+RBCipRLoQBRvyLL2dFwfBlDnTWos7W4xXgi3IATg31p3hldoEG8EAR0IuEC8OuUGK62eCyoYVARutvNOL9VZQD6yxqmnKqmHB6u46PkejHp7XVxmlHOzVhXnTKxgwujXhzH0bdo56m9jymgcKhEITXFl61lFoYV7BMa0akCjkjqJEHOKdP/U7xhNJ1vlZLXOv2Upnmq3JxfJlH4XRzWebBWrmgf38hRXav5F4vSfjqGmHl8if1W/NuSzjWljvW3oQxh0Ly9AQRtqUvdC+Xk4UiXfpmLH9JzB0CBOQKtpwwXtHzxLJcTsQW97FdQDQVxIVc3GUzVuEyEDb4z7NTndysju4c6qfSlOOc8pXQof78nEtoVRDvDsnMlXeK04+o+ztRgSnNOdjq1DSM2z4uLoeecKSCQWhgntXfEsY2ZcHwDQAMESq8VoC7ty5EnxZK37EIAGAV6NArT3c3def2Hm3HdASlSYSipe384bAR6x+tTsIBOBqoMTzlirVz2BrOgoWcF/mizikfkwKiQAAAAASUVORK5CYII=\)])](https://stackblitz.com/~/github.com/BitteProtocol/chat-boilerplate) ## 导言 这个 **咬断 AI 聊天** 组件是一个 react 组件,可以在您的应用程序中实现 AI 驱动聊天交互。 它支持两者 **NEAR 议定书** 财务报告和审定财务报表 **EVM 区块链** 通过钱包集成进行互动,使用户能够与智能合同进行互动,并直接通过聊天界面进行交易. > 在开始前,请务必: > > - A 类 **比特 API 密钥** - 说吧 [拿来](https://npmcn.com/package/%40bitte-ai/chat/placeholder-link-for-api-key) * * * ## 快速启动 1. [配置钱包集成](https://npmcn.com/package/%40bitte-ai/chat/#readme-wallet-integration) 2. [设置 API 路由](https://npmcn.com/package/%40bitte-ai/chat/#readme-api-route-setup) 3. [添加聊天组件](https://npmcn.com/package/%40bitte-ai/chat/#readme-basic-chat-usage) 或者说 [用作部件](https://npmcn.com/package/%40bitte-ai/chat/#readme-widget-chat-usage) ## 兼容性 我们的稳定版本(latest)目前支持React 18应用程序. 我们有支持React 19和Next.js 15应用程序的β版本. 我们正在努力支持更多的框架,例如在平时使用Vite React 19. 你可以检查一个工作 Next.js 我们的例子 [聊天- boylerplate 语句](https://github.com/BitteProtocol/chat-boilerplate) 还原 走开 [堆叠闪烁](https://stackblitz.com/~/github.com/BitteProtocol/chat-boilerplate) ## 钱包整合 我们建议用pnpm或纱线安装包裹: ``` pnpm install @bitte-ai/chat ``` 或者说 ``` yarn add @bitte-ai/chat ``` 如果您正在使用 npm 查找问题, 您可以使用当前命令 : ``` npm install @bitte-ai/chat --legacy-peer-deps ``` ### NER 整合 您可以使用 NEAR 钱包选择器或直接账户连接来整合 NEAR 。 如果您想要在聊天中发送近切通, 您至少需要定义其中之一 ### 使用下一个.js 检查我们 [下一个.js锅炉板](https://github.com/BitteProtocol/chat-boilerplate) 复发. 由于尾风堆积问题,目前涡轮包的建筑不起作用. #### 使用钱包选择器 1. 您需要用 [比特Wallet 文本创建器](https://github.com/BitteProtocol/react?tab=readme-ov-file#bittewalletcontextprovider) 2. 如果您使用 Next.js 需要添加 `"use client"` 文件顶端 ```typescript import { useEffect, useState } from "react" import { useBitteWallet, Wallet } from "@bitte-ai/react"; import { BitteAiChat } from "@bitte-ai/chat"; import "@bitte-ai/chat/styles.css"; export default function Chat() { const { selector } = useBitteWallet(); const [wallet, setWallet] = useState(); useEffect(() => { const fetchWallet = async () => { const walletInstance = await selector.wallet(); setWallet(walletInstance); }; if (selector) fetchWallet(); }, [selector]); return ( ); } ``` #### 使用直接账户 ```typescript import { Account } from "near-api-js"; // get near account instance from near-api-js by instantiating a keypair ``` ### EVM 整合 EVM集成使用 WalletConnect 有wagmi 钩: ```typescript import { useSendTransaction, useAccount } from 'wagmi'; export default function Chat() { const { address } = useAccount(); const { sendTransaction } = useSendTransaction(); return ( ); } ``` ## API 路由设置 在您的 Next.js 应用程序中创建 API 路由, 用于向 Bitte API 发送代理请求, 以不曝光您的密钥 : ```typescript import type { NextRequest } from "next/server"; const { BITTE_API_KEY, BITTE_API_URL = "https://ai-runtime-446257178793.europe-west1.run.app/chat" } = process.env; export const dynamic = "force-dynamic"; export const maxDuration = 60; export const POST = async (req: NextRequest): Promise => { const requestInit: RequestInit & { duplex: "half" } = { method: "POST", body: req.body, headers: { Authorization: `Bearer ${BITTE_API_KEY}`, }, duplex: "half", }; const upstreamResponse = await fetch(BITTE_API_URL, requestInit); const headers = new Headers(upstreamResponse.headers); headers.delete("Content-Encoding"); return new Response(upstreamResponse.body, { status: upstreamResponse.status, headers, }); }; ``` ## 历史 API 路由设置 在您的 Next.js 应用程序中创建 API 路由, 如果您在被重定向到钱包后想要在签署交易时保存聊天上下文, 可以允许您的应用程序 . ```typescript import { type NextRequest, NextResponse } from 'next/server'; const { BITTE_API_KEY, BITTE_API_URL = 'https://ai-runtime-446257178793.europe-west1.run.app' } = process.env; export const dynamic = 'force-dynamic'; export const maxDuration = 60; export const GET = async (req: NextRequest): Promise => { const { searchParams } = new URL(req.url); const id = searchParams.get('id'); const url = `${BITTE_API_URL}/history?id=${id}`; const response = await fetch(url, { headers: { Authorization: `Bearer ${BITTE_API_KEY}`, }, }); const result = await response.json(); return NextResponse.json(result); }; ``` ## 聊天组件概览 位点AI Chat为不同用途的大小写提供两个主要组件: - **`BitteAiChat`** - 直接嵌入应用程序页面的全功能聊天界面 - **`BitteWidgetChat`** - 覆盖您现有内容的浮动聊天部件 ## 基本聊天使用 这个 `BitteAiChat` 组件提供了全功能的聊天界面,可以直接嵌入到您的应用程序页面中. ### 标准聊天设置 ```typescript import { BitteAiChat } from "@bitte-ai/chat"; import { useAccount, useSendTransaction } from 'wagmi'; import "@bitte-ai/chat/styles.css"; export default function ChatPage() { const { address } = useAccount(); const { sendTransaction } = useSendTransaction(); return (

AI Assistant

{/* Full-page chat interface */}

Welcome to our AI Assistant!

How can I help you today?

) } }} />
); } ``` ### NEAR 钱包整合 ```typescript import { useEffect, useState } from "react"; import { useBitteWallet, Wallet } from "@bitte-ai/react"; import { BitteAiChat } from "@bitte-ai/chat"; import "@bitte-ai/chat/styles.css"; export default function Chat() { const { selector } = useBitteWallet(); const [wallet, setWallet] = useState(); useEffect(() => { const fetchWallet = async () => { const walletInstance = await selector.wallet(); setWallet(walletInstance); }; if (selector) fetchWallet(); }, [selector]); return ( ); } ``` ## 部件聊天使用 这个 `BitteWidgetChat` 组件提供一个可以嵌入到您网站任意位置的浮动聊天部件。 它包括一个触发按钮和一个弹出聊天界面. ### 基本部件设置 ```typescript import { BitteWidgetChat } from "@bitte-ai/chat"; import { useAccount, useSendTransaction } from 'wagmi'; import "@bitte-ai/chat/styles.css"; export default function App() { const { address } = useAccount(); const { sendTransaction } = useSendTransaction(); return (
{/* Your existing app content */}

My App

{/* Other content */}
{/* Widget Chat - floating at bottom right */}
); } ``` ### 自定义触发按钮 您可以用自己的组件替换默认触发按钮 : ```typescript Chat with us! ) }} /> ``` ### 触发按钮样式 自定义触发按钮的外观 : ```typescript widget={{ triggerButtonStyles: { backgroundColor: "#1F2937", // Dark background logoColor: "#F3F4F6" // Light logo color } }} ``` **说明:** 部件位置被固定在取景口右下方,不能通过道具定制. ## 组件道具 ### 比特爱聊天道具 ```typescript interface BitteAiChatProps { agentId: string; // ID of the AI agent to use apiUrl: string; // Your API route path (e.g., "/api/chat") historyApiUrl?: string; // Your history API route to keep context when signing transactions wallet?: WalletOptions; // Wallet configuration apiKey?: string; // Optional API key for server-side requests messages?: Message[]; // Initial messages to display customToolComponents?: CustomToolComponent[]; // Custom tool components onChatLoaded?: () => void; // Callback when chat is loaded onMessageReceived?: (message: Message) => void; // Callback when message is received widget?: WidgetChatProps; // Widget-specific configuration isWidgetChat?: boolean; // Whether to render as widget options?: { agentName?: string; // Custom agent name agentImage?: string; // Custom agent image URL chatId?: string; // Custom chat ID prompt?: string; // Custom Initial prompt placeholderText?: string; // Custom placeholder text hideToolCall?: boolean; // Hide tool call UI (default: true for widget) localAgent?: { pluginId: string; accountId: string; spec: BitteOpenAPISpec; }; colors?: ChatComponentColors; customComponents?: { welcomeMessageComponent?: React.JSX.Element; mobileInputExtraButton?: React.JSX.Element; messageContainer?: React.ComponentType; chatContainer?: React.ComponentType; inputContainer?: React.ComponentType; sendButtonComponent?: React.ComponentType; loadingIndicator?: React.ComponentType; }; }; } ``` ### Bitte Widget 聊天道具 这个 `BitteWidgetChat` 组件接受与 `BitteAiChat` 加上特定部件的造型和行为. ```typescript interface WidgetChatProps { // Welcome prompts configuration for widget widgetWelcomePrompts?: { title?: string; // Welcome title (default: "Hello") description?: string; // Welcome description questions?: string[]; // Array of suggested questions actions?: string[]; // Array of suggested actions }; // Custom trigger button (replaces default Bitte logo) customTriggerButton?: React.ReactElement; // Trigger button styling triggerButtonStyles?: { backgroundColor?: string; // Background color (default: "#000000") logoColor?: string; // Logo color (default: "#ffffff") }; } ``` ## 可用代理人 [代理登记](https://www.bitte.ai/registry) ## 创建自定义代理 [制作代理](https://docs.bitte.ai/agents/introduction) ## 样式 该组件可使用 `colors` 道具 : ```typescript type ChatComponentColors = { generalBackground?: string; // Chat container background messageBackground?: string; // Message bubble background textColor?: string; // Text color buttonColor?: string; // Button color borderColor?: string; // Border color }; ``` ## 示例项目 - [Bitte AI 查特·博伊尔普拉特](https://github.com/BitteProtocol/chat-boilerplate) - [Bitte AI Chat Boilerplate Next.js Pages 路由器](https://github.com/BitteProtocol/chat-boilerplate-next-pages) ## 常见问题 ### @bitte-ai/chat 是什么？ Bitte AI 聊天组件 ### 如何安装 @bitte-ai/chat？ 在项目目录运行 npm install @bitte-ai/chat，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0）、react-dom（^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bitte-ai/chat 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bitte-ai/chat 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bitte-ai/chat 可以商用吗？ @bitte-ai/chat 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @bitte-ai/chat 的下载量有多少？ 根据 npm 官方下载统计，@bitte-ai/chat 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,354 次，日均约 78 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bitte-ai/chat 还在维护吗？ 最新版本 0\.23\.0 发布于 2025/09/30（1\.1 年前）；至今共发布 481 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/01/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。