DocumentationAppKitBack to top
Skip to content
AppKit

AppKit

Connect a React application to Rebyte through the official OpenAI SDK.

On this pageRun the Node templateVerify the flowServer integration

AppKit provides React Session state, a chat UI and a Node or Cloudflare server adapter. The server calls client.beta.agents from the official openai package. Rebyte runs the Agent Loop and stores the Session. AppKit forwards native Agents API events to the browser, which renders them with React components.

text
React UI → your application server → official openai client → Rebyte Agents API

AppKit 0.3.0 uses the official client. Existing 0.2.x npm releases still depend on the old client fork. Install the components your application uses:

Terminal
pnpm add @rebyteai/agent-react@0.3.0 @rebyteai/agent-ui@0.3.0 @rebyteai/agent-server@0.3.0
pnpm add -D @rebyteai/cli@0.3.0

Run the Node template

Use Node.js 22+ and pnpm 10:

Terminal
git clone https://github.com/ReByteAI/rebyte-agent-toolkit.git
cd rebyte-agent-toolkit
pnpm install --frozen-lockfile
pnpm build
cp examples/react-chat/.env.example examples/react-chat/.env.local

Put your organization key in .env.local. It needs tasks:read, tasks:write, files:read and files:write, and the organization needs credit. The key stays on the application server; do not put it in a VITE_ variable.

dotenv
REBYTE_API_KEY=rbk_replace_me
REBYTE_AGENT_ID=
REBYTE_API_URL=https://api.rebyte.ai/v1

Create one saved Agent with the official client, using the template's setup script:

Terminal
cd examples/react-chat
pnpm exec tsx scripts/create-agent.ts

Copy the printed REBYTE_AGENT_ID into .env.local, then run pnpm dev. Open http://127.0.0.1:4100. The application server is on 4101.

Verify the flow

  1. Send a message and watch the response stream.
  2. Ask for a file in /workspace/outputs and download its Artifact.
  3. Upload a file and ask the Agent to read it.
  4. Send a follow-up or reload; the same Session retains its history and files.
  5. Start a new conversation for a separate Session.

The event inspector shows native agent.session.* events. Stop submits a cancellation event. New conversation preserves the previous Session; delete it explicitly when finished to release its environment and Artifacts.

Server integration

The shared @rebyteai/agent-server adapter creates an official client with the Rebyte endpoint explicitly configured. Its Node and Cloudflare templates share the same Session, upload, download and event routes. Add application login and user-to-Session authorization on every route before serving other users.

The frontend subscribes to live events before submitting input. It uses the official event types and SSE parser, and keeps UI state in useAgentSession. This example does not run @openai/agents or use Vercel's UI message protocol. AppKit 0.3.0 reports requires_action as waiting for a client tool result; it does not automatically execute application functions. Add a host handler that executes the requested function and submits its result, as shown in the Commerce example.

See Upgrade to 0.3.0 for replacing the old client and moving Workflow and Schedule calls to the optional extension.

See the Node template and Cloudflare template.