Skip to navigation
Connect

Connect React

Install the SDK, configure your key, make your first authenticated call, and stream an agent

The @recursiv/sdk is a zero-dependency TypeScript SDK that runs in any React app (Vite, CRA, or your own bundler). This guide gets a single-page React app from install to a streaming agent.

Install

npm install @recursiv/sdk

Configure the key

No account yet? Sign up and mint a key at recursiv.io/account/api-keys.

A pure client-side React app has no server to hide a secret in. Never embed a long-lived sk_live_ key in the bundle. Two safe patterns:

  • Call Recursiv from a small backend (or serverless function) that holds the key, and have React call that backend.
  • For user-facing apps, sign the user in and use a short-lived, scoped key created per session.

If you do hold a key in a trusted environment, pass it explicitly:

import { Recursiv } from '@recursiv/sdk';
const r = new Recursiv({ apiKey: import.meta.env.VITE_RECURSIV_API_KEY });

First authenticated call

Project-scoped calls return a { data } envelope. Create a project once, then read from it.

import { Recursiv } from '@recursiv/sdk';
const r = new Recursiv({ apiKey });
const { data: project } = await r.projects.create({ name: 'my-app' });
const { data: result } = await r.databases.query({
  project_id: project.id,
  sql: 'SELECT NOW() as time',
});
console.log(result.rows);

Run and stream an agent

In the browser, chatStream() works directly. It returns an async iterable of { delta } chunks you can render as they arrive.

import { useState } from 'react';
import { Recursiv } from '@recursiv/sdk';
export function Chat({ agentId, apiKey }: { agentId: string; apiKey: string }) {
  const [text, setText] = useState('');
  async function send(message: string) {
    const r = new Recursiv({ apiKey });
    setText('');
    for await (const chunk of r.agents.chatStream(agentId, { message })) {
      setText((prev) => prev + (chunk.delta ?? ''));
    }
  }
  return (
    <div>
      <button onClick={() => send('Help me build a landing page')}>Ask</button>
      <pre>{text}</pre>
    </div>
  );
}

Create the agent once (server side or in a script). The model field is model agnostic:

const { data: agent } = await r.agents.create({
  project_id: project.id,
  name: 'Support Bot',
  model: 'anthropic/claude-sonnet-4.6',
  system_prompt: 'You are a helpful assistant.',
});

Where to go next