Integrations & Tools
6 min readUpdated: October 2026

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.

Technical Review: Smoke Monkey Core Architecture Team
Tested on Node.js 18+ & BunTypeScript 5.x
Quick Answer & Executive Definition

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.

Key Architectural Takeaways

Installing the Chat UI Package

Install the official UI companion package alongside the core harness:

terminalbash
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:

app/agent/page.tsxtsx
'use client';
import { SmokeMonkeyCanvas } from '@smoke-monkey/ui';
export default function AgentPage() {
return (
<div className="h-screen w-full bg-[#07090e]">
<SmokeMonkeyCanvas
endpoint="/api/agent"
theme="dark"
onPermissionRequest={(req) => console.log('Permission request:', req)}
/>
</div>
);
}
Google Search Questions & Answers

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.

npm install smoke-monkey-harness