-
Notifications
You must be signed in to change notification settings - Fork 0
product overview
Canon document. Updated by the Synthesis agent at the close of each initiative.
Patchwork is a platform for building generative UI experiences. It enables developers to author interactive UI widgets in JSX/TypeScript, compile them in-browser via esbuild, mount them into live applications, and connect them to external services (MCP/UTCP tools, AI models) — all within a visual editing environment. The platform ships as a monorepo of composable libraries, a VS Code extension, and a standalone chat application.
Building AI-powered, interactive UI components today requires stitching together compilation toolchains, service proxies, file management, and visual editing — each solved in isolation. Patchwork unifies these concerns into a single platform where widgets can be authored, compiled, previewed, and connected to LLM-powered backends without leaving the development environment. It makes generative UI a first-class development paradigm rather than an afterthought.
Who they are: Developers building AI-powered applications and interactive widgets. They work in VS Code or a web editor and want to rapidly prototype and deploy generative UI components.
Their journey: A Builder installs the VS Code extension or opens the chat app, creates a new widget project with JSX/TypeScript, previews it live, connects it to AI services via the Stitchery backend, iterates on the design using Bobbin's visual inspector, and ships the result.
Key needs:
- Fast compile-preview cycles for JSX/TypeScript widgets
- Visual inspection and runtime styling of DOM elements
- Seamless connection to LLM backends and external tool services
- In-editor file management with VFS sync
Who they are: Engineers embedding Patchwork widgets into larger applications or configuring service backends for teams. They care about sandboxing, security, and service routing.
Their journey: An Integrator uses the compiler and mount APIs to embed widgets into their app (iframe or embedded mode), configures the Stitchery service registry with MCP/UTCP tool providers, and sets up the proxy layer so widgets can securely call external services.
Key needs:
- Configurable mounting strategies (embedded vs. iframe sandbox)
- Service registry and proxy for routing widget calls to backends
- VFS backends for persistent or remote file storage
| Feature | Description | Status |
|---|---|---|
| In-Browser Compiler | JSX/TypeScript → ESM compilation via esbuild-wasm with CDN import rewriting | Shipped |
| Virtual File System | Multi-backend VFS (Memory, IndexedDB, HTTP) with bidirectional sync engine | Shipped |
| Widget Mounting | Embedded and iframe mounting with cross-context service bridge (postMessage RPC) | Shipped |
| Visual Inspector (Bobbin) | Runtime DOM element selection, spacing/layout overlays, style editing with design tokens | Shipped |
| Markdown Editor | TipTap-based WYSIWYG editor with code block extraction, diff previews, and edit sessions | Shipped |
| Service Proxy (Patchwork) | Namespace-based service routing — widgets call callProcedure(ns, proc, args)
|
Shipped |
| Stitchery Server | Backend aggregating MCP/UTCP tools into a service registry with chat and edit API endpoints | Shipped |
| UTCP Bridge | Adapter translating Patchwork service calls into UTCP protocol tool invocations | Shipped |
| VS Code Extension | Full IDE integration: project explorer, preview panel, embedded Stitchery, AI-driven edits via Copilot proxy | Shipped |
| Chat App | Standalone React SPA with AI chat (Vercel AI SDK), markdown rendering, and widget preview | Shipped |
| Image System | Package-based widget dependency resolution from CDN with framework config (React globals, preloads) | Shipped |
| ShadCN Image | Runtime ShadCN/ui setup with Tailwind Play CDN injection, CSS variable theming, and utility exports | Shipped |
- Server-side rendering — Widgets are client-side only; SSR adds complexity without clear user demand
- Multi-tenant hosting — Patchwork is a development platform, not a hosted widget marketplace
- Native mobile widgets — Platform targets browser (web) and VS Code; native mobile is deferred
- Compile latency: Sub-second JSX → ESM compilation for typical widget projects
- Mount isolation: Iframe-mounted widgets cannot access parent DOM or globals without explicit bridge
-
Service routing accuracy: 100% of
callProcedurecalls resolve to the correct registered backend - VFS sync reliability: Bidirectional sync with conflict resolution completes without data loss
- CLI distribution model — Whether to ship a standalone CLI for headless compilation outside VS Code
- Multi-framework support — Currently optimized for React; Vue/Svelte image support is partially scaffolded but untested
- Authentication for remote VFS — HTTP backend has no auth layer; needed before multi-user deployment