Minimal Chat App

A complete chat app in under 50 lines. The fastest way to get an agent conversation running.

1. Token Endpoint

Create a server endpoint that returns a short-lived token for the chat widget.

server/token.ts

import { CadraClient } from '@cadraos/sdk';

const client = new CadraClient({
  apiKey: process.env.CADRA_API_KEY!,
  orgId: Number(process.env.CADRA_ORG_ID),
});

export async function getToken() {
  // Return the API key directly, or implement token exchange
  return process.env.CADRA_API_KEY!;
}

2. Chat Component

App.tsx

import { ChatConfigProvider, AgentChat } from '@cadraos/sdk/chat';

function App() {
  return (
    <ChatConfigProvider
      apiBaseUrl={import.meta.env.VITE_CADRA_API_URL}
      tokenProvider={async () => {
        const res = await fetch('/api/token');
        const { token } = await res.json();
        return token;
      }}
      orgId={Number(import.meta.env.VITE_CADRA_ORG_ID)}
    >
      <div style={{ height: '100vh' }}>
        <AgentChat
          agentId={import.meta.env.VITE_AGENT_ID}
          welcomeMessage="Hi! How can I help you today?"
          enableAttachments
        />
      </div>
    </ChatConfigProvider>
  );
}

3. Environment Variables

.env

VITE_CADRA_API_URL=https://your-instance.cadraos.com
VITE_CADRA_ORG_ID=123
VITE_AGENT_ID=your-agent-uuid
CADRA_API_KEY=sk-cad-xxxxxxxxxxxx

Result

This gives you a full-featured chat with streaming responses, markdown rendering, code highlighting, file attachments, and auto-scrolling — all handled by the SDK.