MCP for UI Code Generation #618
Description
Umbrella Issue: MCP for UI Code Generation
Objective: Provide an MCP that can generate UI code safely and accurately, grounded on complete and up-to-date API documentation.
Goals
- Deliver an MCP endpoint that can produce UI snippets/components aligned with TiUI patterns.
- Require API documentation completeness as a prerequisite to code generation.
- Keep output deterministic, with guardrails to avoid hallucinated props or components.
Scope & Deliverables
- API docs baseline: Consolidated, current docs for all public components, props, tokens, and patterns (usage, defaults, examples).
- MCP design: Spec for model prompts, tool parameters, and safety constraints.
- Implementation: MCP service that reads from the docs corpus and returns code suggestions/snippets.
- Developer ergonomics: Usage guide, examples, and fallback behaviors when docs are missing.
Non-Goals
- Redesigning UI components.
- Expanding API surface beyond documented, shipped components.
- Full app/page generation; focus on component-level or small-composition snippets.
Work Items
- Docs readiness
- Inventory all public APIs (components, hooks, utilities).
- Normalize prop tables, default values, and usage notes.
- Add canonical examples per component and per pattern (forms, layouts, theming).
- Ensure docs are machine-readable (structured markdown/JSON) for MCP ingestion.
- MCP design
- Define prompt contract and response schema (TS types for requests/responses).
- Add guardrails: reject unknown components/props, require doc references in responses.
- Decide on context retrieval strategy (embedding or index lookup against the doc corpus).
- MCP implementation
- Build the MCP handler that loads the docs corpus and serves codegen requests.
- Implement deterministic formatting/style rules (imports, naming, CSS mode defaults).
- Add tests: golden snapshots for common requests, rejection cases for missing docs.
- Developer guide
- Usage examples for common tasks (form field, layout, theming setup).
- Troubleshooting: what happens when docs are stale or missing.
- Contribution guide for updating the docs corpus and regenerating indices.
Risks & Notes
- Incomplete or stale docs will degrade codegen quality; block MCP release until docs pass quality checks.
- Need to align generated imports with the new CSS-first / Emotion entries.
- Guardrails must prevent unsupported
sx/Emotion props unless the Emotion entry is requested.
Definition of Done
- Docs corpus is complete, structured, and versioned.
- MCP responds with code that references only documented APIs and correct import paths.
- Tests cover happy paths and rejection/guardrail scenarios.