Generative Control Surfaces — AI Landing Page Builder

Built for the GenUI Global Hackathon · mcp-use

Describe any business → AI designs a complete landing page from scratch (layout, colors, typography, copy — everything) → refine with natural language → export clean HTML.

Two interfaces, one repo:

	MCP Server (root)	Web App (/web)
For	ChatGPT, Claude, MCP Inspector	Browsers, iframes, direct access
Deploy	mcp-use deploy	Vercel
How it works	AI generates structured JSON → interactive widget with controls	AI generates complete HTML → live preview with iterate-and-refine

Quick start — Web App

cd web
npm install
echo 'VITE_GROQ_API_KEY=gsk_YOUR_KEY' > .env
npm run dev

Deploy to Vercel

1. Import this repo in vercel.com
2. Set Root Directory to web
3. Add environment variable: GROQ_API_KEY = your Groq key
4. Deploy

The serverless function at web/api/generate.js proxies Groq calls — your key never touches the browser.

Embed in another site

The web app ships with frame-ancestors *, so it can be iframed anywhere:

<iframe src="https://your-deployment.vercel.app" style="width:100%;height:100%;border:none" />

Quick start — MCP Server

npm install
echo 'GROQ_API_KEY=gsk_YOUR_KEY' > resources/page-builder/.env
npm run dev

Connect via ChatGPT, Claude, or the Inspector.

Deploy MCP

npx mcp-use deploy

What "no hardcoded design" means

The AI has full creative freedom. No fixed section types, no prescribed color palettes, no template. It decides:

• Section types and count (hero, stats, FAQ, comparison, gallery — or custom types)
• Color theory (analogous, complementary, triadic)
• Typography via Google Fonts
• Layout patterns, visual effects, spacing
• Copywriting tone and urgency

MCP Tools (11)

Tool	Description
generate-landing-page	Generate from a business description
update-section	Change a section property (color, text, tone, font, spacing)
refine-section	AI rewrites a section from natural language
global-update	Apply a change across all sections
reorder-sections	Move sections up/down
delete-section	Remove a section
undo	Revert last change (20 levels)
analyze-page	AI critiques with scored issues + auto-fix
export-html	Export self-contained HTML
generate-hero-image	Set a hero image URL
regenerate-page	Full regen with new instructions

Stack

• AI: Groq API · Llama 3.3 70B
• MCP server: mcp-use framework · TypeScript · Zod
• Web app: React 18 · Vite · Vercel serverless

License

MIT