ChatUI
Team led by a TanStack open-source contributor and AI-focused software developer skilled in Git, GitHub, and building collaborative frontend/web-based AI integrations.
YouTube Video
Project Description
ChatUI is a phone-style chat client where every conversation materializes as a custom-installed app. Type “track my marathon training” or “plan my Japan honeymoon” — within ~8 seconds the agent generates a name, an emoji icon, an interactive layout tree from a 16-widget catalog (charts, kanban, map, calendar, day cards, forms, lists), seed data, AND the tool implementations themselves as JSON-Patch templates the agent itself wrote. A new icon appears on the home screen. Tap it and you’re inside an app whose layout, data shape, and behaviors don’t exist anywhere in our codebase.
ORIGINALITY. Most generative-UI demos let the agent compose pre-built widgets. We do that — and add a layer where the agent designs its own per-app tool implementations as runtime-interpretable JSON-Patch templates. A generic server-side interpreter substitutes call args («argname» placeholders) and applies the patches. Zero hand-coded domain handlers anywhere on the backend. A “marathon” app gets logRun whose patch appends to /runs/-.
BEYOND CHAT. Inside any app, a chat composer routes natural language through Google ADK function-calling. “I ran 5 miles at 8:30 pace” triggers the agent’s own logRun tool plus a universal applyDataPatch that keeps derived stats consistent. “Swap the chart for a bar chart” triggers a universal editLayout tool that rewrites the layout tree live. The agent debugs its own generated interface in conversation.
THE AGENT SHIPS ITS OWN BACKEND. For marathon apps, bootstrap also generates a Python FastAPI service. The server provisions a Daytona sandbox asynchronously, uploads the agent’s code, starts uvicorn, returns the public URL via polling. Widgets bound to $BACKEND/metrics swap from seed data to live data with a green “live” badge — fetching from a service the agent itself wrote at runtime.
STACK. Frontend: React 19 + Vite + Tailwind + Recharts + Leaflet, with an A2UI-inspired layout-tree protocol. Backend: FastAPI + Python 3.12, Google ADK 1.33 (LlmAgent + InMemoryRunner + FunctionTool) on Gemini 3 Flash Preview via Google AI Studio. Daytona for per-app Python sandboxes. LangSmith @traceable on every Gemini call. Google Cloud Run for hosting (multi-stage Docker). Google Secret Manager for runtime secrets.
The system is domain-agnostic by construction. The agent owns each app entirely — UI, data, tools, and (for marathon) backend code — invented from one chat message.