咬断 AI 聊天
]){kind=icon}
导言
这个 咬断 AI 聊天 组件是一个 react 组件,可以在您的应用程序中实现 AI 驱动聊天交互。 它支持两者 NEAR 议定书 财务报告和审定财务报表 EVM 区块链 通过钱包集成进行互动,使用户能够与智能合同进行互动,并直接通过聊天界面进行交易.
在开始前,请务必:
- A 类 比特 API 密钥 - 说吧 拿来
快速启动
兼容性
我们的稳定版本(latest)目前支持React 18应用程序. 我们有支持React 19和Next.js 15应用程序的β版本.
我们正在努力支持更多的框架,例如在平时使用Vite React 19.
你可以检查一个工作 Next.js 我们的例子 聊天- boylerplate 语句 还原
走开 堆叠闪烁
钱包整合
我们建议用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锅炉板 复发. 由于尾风堆积问题,目前涡轮包的建筑不起作用.
使用钱包选择器
-
您需要用 比特Wallet 文本创建器
-
如果您使用 Next.js 需要添加
"use client"文件顶端
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<Wallet>();
useEffect(() => {
const fetchWallet = async () => {
const walletInstance = await selector.wallet();
setWallet(walletInstance);
};
if (selector) fetchWallet();
}, [selector]);
return (
<BitteAiChat
agentId="your-agent-id"
apiUrl="/api/chat"
wallet={{ near: { wallet } }}
/>
);
}
使用直接账户
import { Account } from "near-api-js";
// get near account instance from near-api-js by instantiating a keypair
<BitteAiChat
agentId="your-agent-id"
apiUrl="/api/chat"
wallet={{ near: { account: nearAccount } }}
/>
EVM 整合
EVM集成使用 WalletConnect 有wagmi 钩:
import { useSendTransaction, useAccount } from 'wagmi';
export default function Chat() {
const { address } = useAccount();
const { sendTransaction } = useSendTransaction();
return (
<BitteAiChat
agentId="your-agent-id"
apiUrl="/api/chat"
wallet={{
evm: {
sendTransaction,
address
}
}}
/>
);
}
API 路由设置
在您的 Next.js 应用程序中创建 API 路由, 用于向 Bitte API 发送代理请求, 以不曝光您的密钥 :
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<Response> => {
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 路由, 如果您在被重定向到钱包后想要在签署交易时保存聊天上下文, 可以允许您的应用程序 .
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<NextResponse> => {
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 组件提供了全功能的聊天界面,可以直接嵌入到您的应用程序页面中.
标准聊天设置
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 (
<div className="container mx-auto p-4">
<h1>AI Assistant</h1>
{/* Full-page chat interface */}
<div style={{ height: '600px' }}>
<BitteAiChat
agentId="your-agent-id"
apiUrl="/api/chat"
historyApiUrl="/api/history"
wallet={{
evm: {
sendTransaction,
address
}
}}
options={{
agentName: "My AI Assistant",
agentImage: "/agent-avatar.png",
colors: {
generalBackground: "#ffffff",
messageBackground: "#f8fafc",
textColor: "#1f2937",
buttonColor: "#3b82f6",
borderColor: "#e5e7eb"
},
customComponents: {
welcomeMessageComponent: (
<div>
<h2>Welcome to our AI Assistant!</h2>
<p>How can I help you today?</p>
</div>
)
}
}}
/>
</div>
</div>
);
}
NEAR 钱包整合
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<Wallet>();
useEffect(() => {
const fetchWallet = async () => {
const walletInstance = await selector.wallet();
setWallet(walletInstance);
};
if (selector) fetchWallet();
}, [selector]);
return (
<BitteAiChat
agentId="your-agent-id"
apiUrl="/api/chat"
wallet={{ near: { wallet } }}
options={{
agentName: "NEAR Assistant",
colors: {
generalBackground: "#000000",
textColor: "#ffffff"
}
}}
/>
);
}
部件聊天使用
这个 BitteWidgetChat 组件提供一个可以嵌入到您网站任意位置的浮动聊天部件。 它包括一个触发按钮和一个弹出聊天界面.
基本部件设置
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 (
<div>
{/* Your existing app content */}
<main>
<h1>My App</h1>
{/* Other content */}
</main>
{/* Widget Chat - floating at bottom right */}
<BitteWidgetChat
agentId="your-agent-id"
apiUrl="/api/chat"
historyApiUrl="/api/history"
wallet={{
evm: {
sendTransaction,
address
}
}}
widget={{
widgetWelcomePrompts: {
title: "Hey there! 👋",
description: "I'm your AI assistant. What would you like to do?",
questions: [
"What's my portfolio balance?",
"Show me trending tokens",
"How do I swap tokens?"
],
actions: [
"Check my wallet balance",
"View recent transactions",
"Help me with DeFi"
]
},
triggerButtonStyles: {
backgroundColor: "#6366F1",
logoColor: "#FFFFFF"
}
}}
options={{
agentName: "DeFi Assistant",
agentImage: "/assistant-avatar.png"
}}
/>
</div>
);
}
自定义触发按钮
您可以用自己的组件替换默认触发按钮 :
<BitteWidgetChat
agentId="your-agent-id"
apiUrl="/api/chat"
wallet={{ /* wallet config */ }}
widget={{
customTriggerButton: (
<div className="custom-chat-button">
<ChatIcon />
<span>Chat with us!</span>
</div>
)
}}
/>
触发按钮样式
自定义触发按钮的外观 :
widget={{
triggerButtonStyles: {
backgroundColor: "#1F2937", // Dark background
logoColor: "#F3F4F6" // Light logo color
}
}}
说明: 部件位置被固定在取景口右下方,不能通过道具定制.
组件道具
比特爱聊天道具
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<MessageGroupComponentProps>;
chatContainer?: React.ComponentType<ChatContainerComponentProps>;
inputContainer?: React.ComponentType<InputContainerProps>;
sendButtonComponent?: React.ComponentType<SendButtonComponentProps>;
loadingIndicator?: React.ComponentType<LoadingIndicatorComponentProps>;
};
};
}
Bitte Widget 聊天道具
这个 BitteWidgetChat 组件接受与 BitteAiChat 加上特定部件的造型和行为.
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")
};
}
可用代理人
创建自定义代理
样式
该组件可使用 colors 道具 :
type ChatComponentColors = {
generalBackground?: string; // Chat container background
messageBackground?: string; // Message bubble background
textColor?: string; // Text color
buttonColor?: string; // Button color
borderColor?: string; // Border color
};