Forge Space UI
FreeNot checkedAI-driven UI and backend code generation across React, Vue, Angular, Svelte, and HTML with brand-aware design system integration.
About
AI-driven UI and backend code generation across React, Vue, Angular, Svelte, and HTML with brand-aware design system integration.
README
@forgespace/ui-mcp
AI-driven UI and backend code generation via Model Context Protocol. 22 tools, 5 frameworks, brand-aware, npm-published, and MCP Registry-ready.
npm version CI Coverage License: MIT TypeScript MCP Node.js
Part of the Forge Space ecosystem.

Architecture
@forgespace/ui-mcp is a thin protocol adapter. All AI/generation logic lives
in @forgespace/siza-gen:
@forgespace/ui-mcp (~355 KB) @forgespace/siza-gen (~1.8 MB)
├── src/index.ts (MCP server) ├── ml/ (embeddings, quality, training)
├── tools/ (22 tool defs) ├── generators/ (react, vue, angular, svelte, html)
├── services/ (figma, analysis) ├── registry/ (502 snippets, compositions, packs)
├── resources/ (MCP resources) ├── feedback/ (self-learning, pattern promotion)
└── lib/ (browser, image) └── quality/ (anti-generic rules, diversity)
Quick Start
# NPX (instant)
npx -y @forgespace/ui-mcp@latest
# Global install
npm install -g @forgespace/ui-mcp && forgespace-ui-mcp
# Docker
docker build -t forgespace-ui-mcp . && docker run --rm -i forgespace-ui-mcp
IDE Integration
Add to your MCP configuration (Claude Code, Windsurf, Cursor, VS Code):
{
"mcpServers": {
"forgespace-ui-mcp": {
"command": "npx",
"args": ["-y", "@forgespace/ui-mcp@latest"],
"env": {
"FIGMA_ACCESS_TOKEN": "your_token_here"
}
}
}
}
Tools
| Tool | Category | Description |
|---|---|---|
scaffold_full_application |
Code | Full project boilerplate (React/Next.js/Vue/Angular/HTML + Tailwind) |
generate_ui_component |
Code | UI components with style audit, supports shadcn/ui, Radix, Headless UI, Material, PrimeVue |
generate_form |
Code | Production forms with Zod/Yup validation, multi-step flows, accessible markup |
generate_page_template |
Code | Pre-built pages (landing, dashboard, auth, pricing, CRUD) |
generate_prototype |
Design | Interactive HTML prototypes with navigation |
generate_design_image |
Design | SVG/PNG mockups of UI screens |
image_to_component |
Code | Screenshot/wireframe to framework-specific component |
refine_component |
Code | Improve components via natural language feedback |
generate_api_route |
Backend | API routes with validation, auth, and error handling |
generate_backend_module |
Backend | Full feature modules with routes, services, middleware |
scaffold_backend |
Backend | Complete backend projects with auth, DB, monitoring |
generate_from_template_pack |
Code | Multi-page apps from curated packs (SaaS, Landing, AI Chat) |
figma_context_parser |
Context | Read Figma files, extract tokens, map to Tailwind |
figma_push_variables |
Design | Write design tokens back to Figma |
fetch_design_inspiration |
Context | Extract visual metadata from URLs |
analyze_design_references |
Context | Analyze design references, detect patterns |
analyze_design_image |
ML | Analyze design images for training data |
analyze_component_library |
Context | Analyze component library patterns |
audit_accessibility |
Quality | WCAG 2.1 audit with fix suggestions |
submit_feedback |
Quality | Submit feedback to improve future output |
payments_refund |
Backend | Request payment refund with Zod-validated params (payment_id, amount, reason, currency) |
manage_training |
ML | Training data ingestion and fine-tuning |
Framework & Library Support
| Library | React | Vue | Angular | Svelte | HTML |
|---|---|---|---|---|---|
| shadcn/ui | shadcn/ui | shadcn-vue | Tailwind | bits-ui | Tailwind |
| Radix | @radix-ui/react | @radix-ui/vue | Tailwind | @radix-ui/svelte | Tailwind |
| Headless UI | @headlessui/react | @headlessui/vue | Tailwind | @headlessui/svelte | Tailwind |
| Material | @mui/material | Vuetify | @angular/material | @smui/material | Tailwind |
| PrimeVue | Headless UI | primevue | primeng | Tailwind | Tailwind |
| none | Tailwind CSS | Tailwind CSS | Tailwind CSS | Tailwind CSS | Tailwind CSS |
Brand Identity Integration
All generation tools accept an optional brand_identity parameter — a JSON
string from branding-mcp's
generate_brand_identity tool. When provided, brand colors, typography, and
spacing are injected into the design context.
Environment Variables
| Variable | Required | Description |
|---|---|---|
FIGMA_ACCESS_TOKEN |
Only for Figma tools | Token from Figma Settings |
SENTRY_DSN |
Optional | Sentry DSN for error reporting (uncaught exceptions and unhandled rejections) |
Distribution
- npm — published as @forgespace/ui-mcp
- MCP Registry metadata — repository includes server.json
and
mcpNamemetadata for registry submission - Tag release automation — pushing
v*runs npm publish with provenance, then publishes the same version to the MCP Registry via GitHub OIDC - Weekly registry ops —
.github/workflows/mcp-registry-status.ymlrefreshes one issue with npm and MCP Registry drift, visibility, and next actions - GitHub — source, issues, releases, and Discussions live under Forge Space
Development
npm install && npm run build
npm test # 437 tests, 35 suites
npm run validate # lint + format + typecheck + test
Community
GitHub Workflow
This repository follows the shared Forge Space GitHub work-management baseline:
- Discussions for ideas, RFCs, Q&A, and announcements
- Issues for actionable delivery work
- Projects for roadmap visibility and cross-repo reporting
See Forge-Space/.github GOVERNANCE.md for the org-wide contract.
Scheduled monitoring runs that execute CodeQL require job-scoped
security-events: write permission for SARIF upload.
The scheduled Security Monitoring workflow intentionally skips Codecov upload
and relies on local coverage summary generation to reduce false alerting from
third-party action download instability.
License
MIT
Install Forge Space UI in Claude Desktop, Claude Code & Cursor
unyly install forge-space-uiInstalls into Claude Desktop, Claude Code, Cursor & VS Code — handles npx, uvx and build-from-source repos for you.
First time? Get the CLI: curl -fsSL https://unyly.org/install | sh
Or configure manually
Run in your terminal:
claude mcp add forge-space-ui -- npx -y @forgespace/ui-mcpStep-by-step: how to install Forge Space UI
FAQ
Is Forge Space UI MCP free?
Yes, Forge Space UI MCP is free — one-click install via Unyly at no cost.
Does Forge Space UI need an API key?
No, Forge Space UI runs without API keys or environment variables.
Is Forge Space UI hosted or self-hosted?
Self-hosted: the server runs locally on your machine via the install command above.
How do I install Forge Space UI in Claude Desktop, Claude Code or Cursor?
Open Forge Space UI on unyly.org, pick your client tab (Claude Desktop, Claude Code, Cursor) and press Install — the config is generated automatically, no JSON editing.
Related MCPs
GitHub
PRs, issues, code search, CI status
by GitHubFilesystem
Secure file operations with configurable access controls.
Memory
Knowledge graph-based persistent memory system.
Template MCP Server
A CLI tool to create a new Model Context Protocol server project with TypeScript support, dual transport options, and an extensible structure
by mcpdotdirectCompare Forge Space UI with
Not sure what to pick?
Find your stack in 60 seconds
Author?
Embed badge for your README
Browse similar
All development MCPs
