ainative-react-sdkAI原生React开发包

Use @ainative/react-sdk to add AI chat and credits to React apps. Use when (1) Installing @ainative/react-sdk, (2) Using the useChat hook for chat completions, (3) Displaying credit balance with useCredits, (4) Setting up AINativeProvider, (5) Handling loading/error states in chat UI. Published npm package v1.0.1.

作者: admin | 来源: ClawHub

@ainative/react-sdk

React hooks and components for AINative — chat completions, credit tracking, and managed sessions.

Install

CODEBLOCK0

Setup: AINativeProvider

Wrap your app (or a subtree) with the provider:

CODEBLOCK1

useChat Hook

CODEBLOCK2

useChat Options

Option	Type	Default	Description
INLINECODE0	string	—	Model ID (e.g. `claude-3-5-sonnet-20241022`)
INLINECODE2

useChat Return

Field	Type	Description
INLINECODE4	INLINECODE5	Full conversation history
INLINECODE6

useCredits Hook

CODEBLOCK3

useCredits Return

Field	Type	Description
INLINECODE12	INLINECODE13	Balance data
INLINECODE14

INLINECODE20 shape: INLINECODE21

Exports

CODEBLOCK4

Environment Variable (CRA / Vite)

CODEBLOCK5

CODEBLOCK6

References

- packages/sdks/react/src/hooks/useChat.ts — Hook implementation
INLINECODE23 — Credits hook
INLINECODE24 — Provider context
INLINECODE25 — Package exports

@ainative/react-sdk

用于 AINative 的 React hooks 和组件 — 聊天补全、积分追踪和托管会话。

安装

bash
npm install @ainative/react-sdk

设置：AINativeProvider

使用 provider 包裹你的应用（或子树）：

tsx
import { AINativeProvider } from @ainative/react-sdk;

function App() {
return (
yourkey }}>

);
}

useChat Hook

tsx
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) => (

{msg.role}: {msg.content}

))}
{isLoading &&

思考中...

}
{error &&

错误：{error.message}

}
onKeyDown={(e) => e.key === Enter && handleSend(e.currentTarget.value)}
placeholder=输入消息...
/>

);
}

useChat 选项

选项	类型	默认值	描述
model	string	—	模型 ID（例如 claude-3-5-sonnet-20241022）
temperature

number | 0.7 | 随机性（0–1） | | max_tokens | number | 1024 | 最大响应 token 数 |

useChat 返回值

字段	类型	描述
messages	Message[]	完整对话历史
isLoading

useCredits Hook

tsx
import { useCredits } from @ainative/react-sdk;

function CreditsBar() {
const { balance, isLoading, error, refetch } = useCredits();

if (isLoading) return

加载积分中...

;
if (error) return

错误：{error.message}

;

return (

剩余 {balance?.remaining_credits} 积分
| 套餐：{balance?.plan}

);
}

useCredits 返回值

字段	类型	描述
balance	CreditBalance \	null	余额数据
isLoading

CreditBalance 结构：{ remaining_credits: number, plan: string, ... }

导出

typescript
import {
AINativeProvider,
useChat,
useCredits,
useAINativeContext, // 访问原始配置/baseUrl
type Message,
type ChatCompletionResponse,
type CreditBalance,
type AINativeError,
type UseChatOptions,
} from @ainative/react-sdk;

环境变量（CRA / Vite）

bash
REACTAPPAINATIVEAPIKEY=akyourkey # CRA
VITEAINATIVEAPIKEY=akyour_key # Vite

tsx
APPAINATIVEAPIKEY! }}>

参考

- packages/sdks/react/src/hooks/useChat.ts — Hook 实现
packages/sdks/react/src/hooks/useCredits.ts — 积分 Hook
packages/sdks/react/src/AINativeProvider.tsx — Provider 上下文
packages/sdks/react/src/index.ts — 包导出

ainative-react-sdkAI原生React开发包