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:

1import { Recursiv } from '@recursiv/sdk';
2
3const 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.

1import { Recursiv } from '@recursiv/sdk';
2
3const r = new Recursiv({ apiKey });
4
5const { data: project } = await r.projects.create({ name: 'my-app' });
6
7const { data: result } = await r.databases.query({
8  project_id: project.id,
9  sql: 'SELECT NOW() as time',
10});
11
12console.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.

1import { useState } from 'react';
2import { Recursiv } from '@recursiv/sdk';
3
4export function Chat({ agentId, apiKey }: { agentId: string; apiKey: string }) {
5  const [text, setText] = useState('');
6
7  async function send(message: string) {
8    const r = new Recursiv({ apiKey });
9    setText('');
10    for await (const chunk of r.agents.chatStream(agentId, { message })) {
11      setText((prev) => prev + (chunk.delta ?? ''));
12    }
13  }
14
15  return (
16    <div>
17      <button onClick={() => send('Help me build a landing page')}>Ask</button>
18      <pre>{text}</pre>
19    </div>
20  );
21}

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

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

Where to go next