Ainative React Sdk — Ainative React SDK
v1.0.1使用 @ainative/react-sdk 将 AI 聊天和积分添加到 React 应用中。使用场景包括：（1）安装 @ainative/react-sdk，（2）使用 useChat hook 实现聊天完成，（3）使用 useCredits 显示积分余额，（4）设置 AINativeProvider，（5）在聊天 UI 中处理加载/错误状态。已发布 npm 包 v1.0.1。
0· 247·0 当前·0 累计
by 下载技能包
License
MIT-0
运行时依赖
无特殊依赖
安装命令
点击复制官方npx clawhub@latest install ainative-react-sdk
镜像加速npx clawhub@latest install ainative-react-sdk --registry https://cn.longxiaskill.com 镜像可用
技能文档
@ainative/react-sdk 为 AINative 提供 React hooks 和组件，包括聊天补全、信用跟踪和管理会话。安装：npm install @ainative/react-sdk
设置：AINativeProvider 将应用程序（或子树）包裹在提供者中：
import { AINativeProvider } from '@ainative/react-sdk';
function App() {
return (
);
}
useChat 选项：import { useChat } from '@ainative/react-sdk'; import type { Message } from '@ainative/react-sdk'; function ChatUI() { const { messages, isLoading, error, sendMessage } = useChat({ model: 'claude-3-5-sonnet-20241022', temperature: 0.7, max_tokens: 1024, }); const handleSend = async (input: string) => { await sendMessage([...messages, { role: 'user', content: input }]); }; return (); }{messages.map((msg, i) => ())} {isLoading &&message ${msg.role}}> {msg.role}: {msg.content}Thinking...} {error &&Error: {error.message}} e.key === 'Enter' && handleSend(e.currentTarget.value)} placeholder="Type a message..." />
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| model | string | — | 模型 ID（例如 claude-3-5-sonnet-20241022） |
| temperature | number | 0.7 | 随机性（0–1） |
| max_tokens | number | 1024 | 最大响应令牌 |
| 字段 | 类型 | 描述 | |
|---|---|---|---|
| messages | Message[] | 全部对话历史 | |
| isLoading | boolean | 请求飞行状态 | |
| error | AINativeError | null | 最后错误（如果有） |
| sendMessage | (msgs: Message[]) => Promise<...> | 发送下一条消息 |
import { useCredits } from '@ainative/react-sdk';
function CreditsBar() {
const { balance, isLoading, error, refetch } = useCredits();
if (isLoading) return Loading credits...;
if (error) return Error: {error.message};
return (
{balance?.remaining_credits} credits remaining
| Plan: {balance?.plan}
Refresh
);
}
| 字段 | 类型 | 描述 | |
|---|---|---|---|
| balance | CreditBalance | null | 余额数据 |
| isLoading | boolean | 获取状态 | |
| error | AINativeError | null | 错误状态 |
| refetch | () => void | 手动刷新 |
导出：
import {
AINativeProvider,
useChat,
useCredits,
useAINativeContext,
// 访问原始配置/基础 URL
type Message,
type ChatCompletionResponse,
type CreditBalance,
type AINativeError,
type UseChatOptions,
} from '@ainative/react-sdk';
REACT_APP_AINATIVE_API_KEY=ak_your_key # CRA
VITE_AINATIVE_API_KEY=ak_your_key # Vite
packages/sdks/react/src/hooks/useChat.ts — Hook 实现 packages/sdks/react/src/hooks/useCredits.ts — 信用 Hook packages/sdks/react/src/AINativeProvider.tsx — 提供者上下文 packages/sdks/react/src/index.ts — 包导出