Drop-In React Chat UI for AI Agents: Stream Tool Calls and Human Approval
Building an agent chat interface from scratch requires managing token streaming, rendering expandable tool call accordions, displaying git diffs, and presenting approval modals. `@smoke-monkey/ui` provides a drop-in React canvas component designed specifically for Smoke Monkey Harness.
Drop-In React Chat UI for AI Agents: Stream Tool Calls and Human Approval: Building an agent chat interface from scratch requires managing token streaming, rendering expandable tool call accordions, displaying git diffs, and presenting approval modals. `@smoke-monkey/ui` provides a drop-in React canvas component designed specifically for Smoke Monkey Harness. Designed as a zero-dependency, open-source TypeScript architecture under the MIT License with native Model Context Protocol (MCP) support and deterministic phase state machines.
- Ready-to-Use React Components: `<SmokeMonkeyCanvas />` and `<ToolCallItem />` out of the box.
- Interactive Permission Modals: Seamlessly prompt users for bash and file modification approvals.
- Beautiful Dark Mode Aesthetics: Tailored typography, sleek glassmorphism, and live status badges.
Installing the Chat UI Package
Install the official UI companion package alongside the core harness:
npm install @smoke-monkey/ui smoke-monkey-harness
Dropping the Canvas Component into Next.js
Integrate the canvas component into your page with two lines of code:
'use client';import { SmokeMonkeyCanvas } from '@smoke-monkey/ui';export default function AgentPage() {return (<div className="h-screen w-full bg-[#07090e]"><SmokeMonkeyCanvasendpoint="/api/agent"theme="dark"onPermissionRequest={(req) => console.log('Permission request:', req)}/></div>);}
Frequently Asked Questions
Q:Does `@smoke-monkey/ui` work with Tailwind CSS?
Yes! It is styled with clean CSS modules and Tailwind classes that adapt to your existing design system.
Related Alternatives & Comparisons
Build with Smoke Monkey Harness
Zero dependencies. 24 built-in tools. Human-in-the-loop safety. 100% open source under the MIT License.