DocsDrop-In React Chat UI
Frontend Canvas

Drop-In React Chat UI (@smoke-monkey/ui)

Building agent chat interfaces that handle streaming markdown, charts, Mermaid diagrams, collapsible tool cards, and interactive pause modals is tedious. @smoke-monkey/ui provides a drop-in React solution with zero backend required to get started.

Zero-Backend Development (SyntheticTransport)

Test tool-call animations, duration counters, charts, and reasoning streams without burning a single LLM API token:

ChatApp.tsxtsx
import React, { useMemo } from 'react';
import { SmokeMonkeyChat, WebSocketTransport, StreamParser } from '@smoke-monkey/ui';
import '@smoke-monkey/ui/ui.css';
export function AgentChatApp() {
// Connect via real-time WebSocket transport
const transport = useMemo(
() => new WebSocketTransport({ url: 'wss://api.example.com/chat-ws', parser: StreamParser }),
[]
);
return (
<div style={{ height: '100vh', width: '100vw', background: '#07090e' }}>
<SmokeMonkeyChat
transport={transport}
theme="yellow" // 14 built-in palettes: dark, yellow, ember, midnight, etc.
brand={{ name: 'Smoke Monkey IDE', icon: <span>🐒</span> }}
features={{
header: true,
tools: true, // Collapsible execution cards
artifacts: true, // Mermaid diagrams, tables, charts
suggestions: true, // Clickable starter prompt chips
}}
/>
</div>
);
}

14 Built-In Theme Presets

darkyellow (default)embercrimsonrosegrapemidnightoceanforestsynthwavemonolightsolarpaper

Try It Live in Your Browser

Experience streaming tokens, tool cards, and theme presets in the Live Simulator.