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:
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 transportconst transport = useMemo(() => new WebSocketTransport({ url: 'wss://api.example.com/chat-ws', parser: StreamParser }),[]);return (<div style={{ height: '100vh', width: '100vw', background: '#07090e' }}><SmokeMonkeyChattransport={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 cardsartifacts: true, // Mermaid diagrams, tables, chartssuggestions: true, // Clickable starter prompt chips}}/></div>);}
14 Built-In Theme Presets
darkyellow (default)embercrimsonrosegrapemidnightoceanforestsynthwavemonolightsolarpaper