> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.recursiv.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.recursiv.io/_mcp/server.

# Connect React

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

```bash
npm install @recursiv/sdk
```

## Configure the key

No account yet? [Sign up](https://recursiv.io/register) and mint a key at [recursiv.io/account/api-keys](https://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:

```typescript
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.

```typescript
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.

```typescript
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:

```typescript
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

* [Quickstart](/guides/start-here/quickstart) for the full set of first calls
* [Add AI Agents to React](/recipes/cookbook/agents) for agent details
* [Add Authentication to React](/recipes/cookbook/apps) for session-based keys
* [API Reference](/api-reference) for the full REST surface
* Recursiv ships hundreds of data integrations (Slack, email, databases, and more) that agents can call as tools