Cockpit AI

Cockpit is a generative infotainment system for modern vehicles. The agent introspects each car’s MCP server, learns what features that specific vehicle has, then designs the dashboard from scratch in HTML — grouping controls, embedding media, respecting plain-English layout requests. The user clicks real buttons that update real car state directly (no chat round-trip), and can ask “make it whacky” or “put climate on the home screen” to fully regenerate the layout. Stack: MCP (per-car capability discovery via FastMCP), LangGraph + Gemini 3.1 Flash-Lite (the agent), CopilotKit + AG-UI (chat ↔ agent ↔ frontend runtime), Open Generative UI (HTML mounted via React’s dangerouslySetInnerHTML), Next.js API routes (direct car-state writes for snappy setter clicks). A server-side validation gate parses every emitted UI and rejects anything missing a tool — the agent literally cannot ship an incomplete dashboard. Same agent code, every car, every layout.

Built on top of the official hackathon starter kit, Generative-UI-Global-Hackathon-Starter-Kit by Jerel Velarde. The kit provided the Next.js + CopilotKit wiring, the BFF (Hono runtime), the threads drawer, the LangGraph agent scaffolding, and a Notion-lead-triage demo as a reference implementation. Everything Cockpit-specific was built during the hackathon: the per-vehicle MCP server (car_mcp_server.py), the vehicle profile system, the Cockpit system prompt, the renderCanvasUI validation gate, the click-delegation handler (data-show / data-tool routing), and the direct-to-state Next.js API route. The kit’s Notion-lead-triage demo was removed.