@ainative/react-sdk

AINative 的 React Hooks 与组件 — 支持聊天补全、信用额度追踪及受管会话。

安装

npm install @ainative/react-sdk

初始化：AINativeProvider

将你的应用（或某子树）用该 Provider 包裹：

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

function App() {
  return (
    
      
    
  );
}

useChat Hook

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 && 
Thinking...
}
      {error && 
Error: {error.message}
}
       e.key === 'Enter' && handleSend(e.currentTarget.value)}
        placeholder="Type a message..."
      />
    
  );
}

useChat 配置项

useChat 返回值

useCredits Hook

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
    
  );
}

useCredits 返回值

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

导出内容

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

环境变量（CRA / Vite）

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 — Provider 上下文
• packages/sdks/react/src/index.ts — 包导出声明