// projects

Easel

Active

A canvas that AI assistants can draw on. The model sends plain JSON, Easel checks it twice, and what comes back is real interface that keeps working after the reply is over.

*The reference chat app. The model answers with a real table and status badges*

*A marketing dashboard the model drew in Claude Desktop, on sample data*

*An IT ticket queue in claude.ai. Resolve calls a tool directly and patches one badge in place*

*The same queue in ChatGPT. Actions run on the server, with no round trip through the model*

1 / 4

// summary

Chat assistants are very good at explaining a dashboard and quite bad at handing you one. Easel gives them a small, strict set of components to draw with: cards, tables, charts, metrics, buttons, sliders. The model describes what it wants in JSON, and Easel renders it inside the conversation in Claude and ChatGPT.

The interesting part is what happens after the first render. Canvases can be edited node by node in later turns, undone, pointed at, and left running on a live feed that refreshes itself with no one typing. Buttons call real tools directly. Filters re-slice a dataset in the browser. None of it runs code the model wrote, because every payload is validated against a fixed vocabulary and budgets the developer controls.

I built it as an MCP App so it drops into assistants people already use, and tested it across Claude Desktop, claude.ai, the Claude Android app and ChatGPT. Each host had its own opinions about caching, sessions and scrollbars. I wrote those findings down so the next person does not have to rediscover them.

// tech stack

Frontend

React 19 Next.js 15 Tailwind CSS 4 Base UI d3

Backend

Node.js Express 5

Language

TypeScript

AI / ML

Model Context Protocol MCP Apps Anthropic API OpenAI-compatible APIs

Infrastructure

Cloudflare Tunnel OAuth 2.1 Claude Desktop Extension

Testing

Vitest Playwright

Tooling

Vite esbuild GitHub Actions