React Hooks (@ragion/react-hooks)

npm install @ragion/react-hooks @ragion/sdk react

import { RagionProvider } from "@ragion/react-hooks";

export function App() {
  return (
    <RagionProvider config={{ apiKey: "rg_..." }}>
      <ChatScreen />
    </RagionProvider>
  );
}

import { useRagionChat } from "@ragion/react-hooks";

function ChatScreen() {
  const { messages, sendMessage, isStreaming, error, abort, clearMessages } = useRagionChat();

  return (
    <div>
      {messages.map((msg) => <p key={msg.id}>{msg.content}</p>)}
      {error && <p>Erro: {error.message}</p>}
      <button onClick={() => sendMessage("Olá")}>Enviar</button>
      <button onClick={abort} disabled={!isStreaming}>Cancelar</button>
      <button onClick={clearMessages}>Limpar</button>
    </div>
  );
}