YouTube Video
Project Description
Generative Control Surfaces is an MCP Apps server that moves landing page design entirely beyond the chatbox. Instead of returning text descriptions or static mockups, the AI agent generates a fully interactive, live-rendered landing page with a contextual control panel — all inside the MCP widget.
What makes it agentic, not just generative:
The core innovation is the bidirectional feedback loop between the rendered UI and the AI agent. Every section of the generated page has a “✨ Refine” button that opens an inline natural language prompt bar — type “make it punchier” or “add a money-back guarantee” and the agent rewrites just that section’s copy via the refine-section tool, without regenerating the entire page. A global prompt bar at the top of the controls panel accepts open-ended instructions (“swap the hero and CTA”, “make the whole page warmer”) which route through sendFollowUpMessage to the LLM, which autonomously selects and calls the appropriate tool. An “Analyze Page” button triggers the analyze-page tool, where the AI critiques the current page for contrast issues, copy quality, and design consistency — returning scored issues with one-click “⚡ Auto-fix” buttons that call update-section, refine-section, or global-update tools directly from the widget.
Dynamic Component Generation: The agent generates 5 page sections (hero, features, testimonial, CTA, footer) plus 6–8 contextual editing controls (color pickers, font selectors, tone sliders, spacing controls) that are specific to what it built — not a fixed control panel. Global style controls (font, accent color, border radius) propagate changes across all sections instantly. Sections are reorderable via ↑↓ arrows.
Agentic Feedback Loops: The widget communicates back to the server through callTool() (with timeout-based fallback to sendFollowUpMessage and clipboard copy). The tone slider calls update-section with property: “tone” to trigger an AI rewrite. The refine bar calls refine-section with a natural language instruction. The analyze button calls analyze-page and renders issues with auto-fix actions. An agent activity log visualizes every tool call in real-time, showing the full UI → agent → tool → response → UI update loop.
Latency-Optimized Rendering: Local controls (color, font, spacing, radius, reorder) update the preview instantly via React state — no round-trip. AI-dependent actions (tone rewrite, refinement, analysis) route through Groq’s LPU inference on Llama 3.3 70B (~280 tok/s), keeping AI response times under 2 seconds for section-level rewrites.
Tool-Enabled Interfaces: 8 MCP tools power the system: generate-landing-page, generate-hero-image, update-section, refine-section, global-update, reorder-sections, analyze-page, and regenerate-page. The widget doesn’t just display data — it provides interactive hooks (buttons, sliders, prompt bars) that trigger cross-tool workflows.
Stack: Manufact mcp-use (server SDK + React widget hooks: useWidget, callTool, sendFollowUpMessage), Groq API with Llama 3.3 70B Versatile (JSON object mode for structured output), TypeScript, React, Zod schema validation.
Prior Work
The initial proof-of-concept (a single generate-landing-page tool with a static control panel widget and Gemini API backend) was started prior to the hackathon as an exploration of the mcp-use framework. During the hackathon, we rebuilt the backend on Groq, added 5 new tools (refine-section, analyze-page, global-update, reorder-sections, generate-hero-image), implemented the full bidirectional feedback loop (callTool/sendFollowUpMessage from widget → server), added the prompt bar, per-section refine UI, auto-fix analysis, global styles, section reordering, and the agent activity log.