What is Chat SDK?

The Chat SDK is your client-side/frontend connection for AI agents. It runs in the browser and handles chat UI, agent communication, and real-time events.

Current Framework: React
Coming Soon: Vue, Svelte, Vanilla JS, React Native

This SDK is the client-side counterpart to Core SDK - your frontend uses this to chat with agents using tokens from your backend.

Drop-In Ready

// Three lines - chat UI is live
<ChatProvider authConfig={{ sessionId, accessToken }}>
  <ChatPanel />
</ChatProvider>

No websocket setup. No message handling. No UI building. The SDK handles everything. You can customize later.

Why It's Powerful

Unlike simple chat widgets, this SDK lets agents control your application:

• Update code editors in real-time
• Manipulate UI components
• Trigger workflows and actions
• Control any part of your app
• Monitor everything through hooks

Build entire applications where agents do the work - not just Q&A, but actual execution.

Installation

npm install react-chat-agent

Multi-Framework Support

Currently Available:

• React

Coming Soon:

• Vue
• Svelte
• Vanilla JavaScript
• React Native
• Angular

The client SDK will expand to all major frameworks with the same API design.

What Makes This Different

Agents Control Your App, Not Just Chat

Traditional chat widgets are passive - they just display messages. With react-chat-agent, agents can:

• Update your code editors in real-time as they write code
• Manipulate your UI components - show/hide elements, update forms
• Trigger workflows - start builds, deploy apps, run tests
• Control external tools - update databases, call APIs, modify files
• Handle complex processes - with status tracking and progress indicators

Hooks For Everything

Every agent action is accessible through React hooks:

// Agent writes code → Your editor updates in real-time
useForwarding('code_generation', (code) => {
  editor.setValue(code);
});

// Agent uses tools → You show custom UI
useStatusSubscription('tool_call', (status) => {
  setToolStatus(status);
});

Features

• Agent Action Control - Intercept and control any agent action in your app
• Real-time Streaming - Forward agent responses to any component
• Status Monitoring - Track tool executions, file operations, API calls
• Multi-Instance - Run multiple specialized agents simultaneously
• Full Customization - Custom styles, components, themes
• TypeScript - Complete type definitions

Quick Start

import { ChatProvider, ChatPanel } from 'react-chat-agent';
import 'react-chat-agent/ui.css';

function App() {
  const authConfig = {
    sessionId: 'session-123',
    accessToken: 'your-token'
  };

  return (
    <ChatProvider authConfig={authConfig}>
      <ChatPanel />
    </ChatProvider>
  );
}

Architecture

┌─────────────────────────────────────────────────┐
│              Your Application                    │
│  ┌──────────────────────────────────────────┐  │
│  │         ChatProvider (Context)            │  │
│  │  ┌────────────┐  ┌─────────────────┐    │  │
│  │  │ ChatPanel  │  │  Custom Layout  │    │  │
│  │  │            │  │  - ChatCore     │    │  │
│  │  │            │  │  - ChatInput    │    │  │
│  │  └────────────┘  └─────────────────┘    │  │
│  │                                           │  │
│  │  Hooks: useChatContext, useForwarding,   │  │
│  │         useStatusSubscription            │  │
│  └──────────────────────────────────────────┘  │
└─────────────────────────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────┐
│             Oblien Platform API                  │
└─────────────────────────────────────────────────┘

Core Concepts

Provider Pattern

ChatProvider wraps your app and manages chat state, connections, and subscriptions.

Component Composition

Mix pre-built components (ChatPanel) or compose custom layouts with ChatCore and ChatInput.

Hook-Based API

Access chat functionality through React hooks like useChatContext, useForwarding, and useStatusSubscription.

Event System

Subscribe to agent events, tool executions, and status updates in real-time.

Use Cases

Build applications where agents do the actual work:

AI-Powered IDEs - Agents write code, generate tests, create designs, and deploy applications while you watch in real-time

Content Platforms - Agents generate articles, optimize SEO, create images, and schedule social posts - all controlled through your UI

Data Tools - Agents query databases, create visualizations, generate insights, and produce reports - forwarded to your dashboards

Workflow Automation - Agents trigger builds, run tests, deploy services, and monitor systems - with status tracking and error handling

Documentation

Real Example

// Agent writes code → Your Monaco editor updates in real-time
function CodeEditor() {
  const [code, setCode] = useState('');
  const [status, setStatus] = useState('idle');

  // Forward code generation to editor
  useForwarding('write_code', (incrementalText, fullText) => {
    setCode(fullText);
  }, {
    mode: 'replace',  // Don't show in chat
    animated: false   // Instant updates
  });

  // Monitor the operation
  useStatusSubscription('write_code', (statusData) => {
    setStatus(statusData.status.state);
    
    if (statusData.statusType === 'finished') {
      // Auto-format when done
      formatCode(code);
      runLinter(code);
    }
  });

  return (
    <div>
      <StatusBar status={status} />
      <MonacoEditor value={code} language="typescript" />
    </div>
  );
}

Client SDK Philosophy

This is a pure client-side SDK - it runs entirely in the browser:

1. Get token from your backend (Core SDK)
2. Use token in ChatProvider
3. Chat directly with Oblien API
4. Control your app with hooks

// Your backend gives you a token
const token = await fetch('/api/session/create').then(r => r.json());

// Your frontend uses it - that's it
<ChatProvider authConfig={{ sessionId: token.sessionId, accessToken: token.token }}>
  <YourApp />
</ChatProvider>

Shipping is easy - it's just React components and hooks.

TypeScript Support

Full type definitions included:

import type {
  ChatContextValue,
  ForwardingHandler,
  StatusHandler,
  ChatProviderProps
} from 'react-chat-agent';

Who Should Use This

Frontend Developers - Use this SDK in your React application
Backend Developers - You need the Core SDK instead
Full-Stack - You need both SDKs (see integration guide)

Framework Roadmap

All will share the same API: providers, hooks, forwarding, status monitoring.

Next Steps

• Getting Started - Install and set up
• Stream Forwarding - Control your app with agents
• Status Events - Monitor agent actions
• Integration Guide - See backend + frontend together