{ "markdown": "
\n \n \"Forge\n \n

@forgespace/ui-mcp

\n

AI-driven UI and backend code generation via Model Context Protocol. 22 tools, 5 frameworks, brand-aware, npm-published, and MCP Registry-ready.

\n
\n\n[![npm version](https://img.shields.io/npm/v/%40forgespace%2Fui-mcp?label=npm)](https://www.npmjs.com/package/@forgespace/ui-mcp)\n[![CI](https://img.shields.io/github/actions/workflow/status/Forge-Space/ui-mcp/ci.yml?label=CI)](https://github.com/Forge-Space/ui-mcp/actions/workflows/ci.yml)\n[![Coverage](https://img.shields.io/badge/coverage-82%25-brightgreen)](https://github.com/Forge-Space/ui-mcp)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue)](https://www.typescriptlang.org/)\n[![MCP](https://img.shields.io/badge/MCP-1.26.0-blue)](https://modelcontextprotocol.io)\n[![Node.js](https://img.shields.io/badge/node-%3E%3D22-green)](https://nodejs.org/)\n\nPart of the [Forge Space](https://github.com/Forge-Space) ecosystem.\n\n![Siza Capabilities](assets/capabilities.png)\n\n## Architecture\n\n`@forgespace/ui-mcp` is a thin protocol adapter. All AI/generation logic lives\nin [`@forgespace/siza-gen`](https://github.com/Forge-Space/siza-gen):\n\n```\n@forgespace/ui-mcp (~355 KB) @forgespace/siza-gen (~1.8 MB)\n├── src/index.ts (MCP server) ├── ml/ (embeddings, quality, training)\n├── tools/ (22 tool defs) ├── generators/ (react, vue, angular, svelte, html)\n├── services/ (figma, analysis) ├── registry/ (502 snippets, compositions, packs)\n├── resources/ (MCP resources) ├── feedback/ (self-learning, pattern promotion)\n└── lib/ (browser, image) └── quality/ (anti-generic rules, diversity)\n```\n\n## Quick Start\n\n```bash\n# NPX (instant)\nnpx -y @forgespace/ui-mcp@latest\n\n# Global install\nnpm install -g @forgespace/ui-mcp && forgespace-ui-mcp\n\n# Docker\ndocker build -t forgespace-ui-mcp . && docker run --rm -i forgespace-ui-mcp\n```\n\n### IDE Integration\n\nAdd to your MCP configuration (Claude Code, Windsurf, Cursor, VS Code):\n\n```json\n{\n \"mcpServers\": {\n \"forgespace-ui-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@forgespace/ui-mcp@latest\"],\n \"env\": {\n \"FIGMA_ACCESS_TOKEN\": \"your_token_here\"\n }\n }\n }\n}\n```\n\n## Tools\n\n| Tool | Category | Description |\n| ----------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `scaffold_full_application` | Code | Full project boilerplate (React/Next.js/Vue/Angular/HTML + Tailwind) |\n| `generate_ui_component` | Code | UI components with style audit, supports shadcn/ui, Radix, Headless UI, Material, PrimeVue |\n| `generate_form` | Code | Production forms with Zod/Yup validation, multi-step flows, accessible markup |\n| `generate_page_template` | Code | Pre-built pages (landing, dashboard, auth, pricing, CRUD) |\n| `generate_prototype` | Design | Interactive HTML prototypes with navigation |\n| `generate_design_image` | Design | SVG/PNG mockups of UI screens |\n| `image_to_component` | Code | Screenshot/wireframe to framework-specific component |\n| `refine_component` | Code | Improve components via natural language feedback |\n| `generate_api_route` | Backend | API routes with validation, auth, and error handling |\n| `generate_backend_module` | Backend | Full feature modules with routes, services, middleware |\n| `scaffold_backend` | Backend | Complete backend projects with auth, DB, monitoring |\n| `generate_from_template_pack` | Code | Multi-page apps from curated packs (SaaS, Landing, AI Chat) |\n| `figma_context_parser` | Context | Read Figma files, extract tokens, map to Tailwind |\n| `figma_push_variables` | Design | Write design tokens back to Figma |\n| `fetch_design_inspiration` | Context | Extract visual metadata from URLs |\n| `analyze_design_references` | Context | Analyze design references, detect patterns |\n| `analyze_design_image` | ML | Analyze design images for training data |\n| `analyze_component_library` | Context | Analyze component library patterns |\n| `audit_accessibility` | Quality | WCAG 2.1 audit with fix suggestions |\n| `submit_feedback` | Quality | Submit feedback to improve future output |\n| `payments_refund` | Backend | Request payment refund with Zod-validated params (payment_id, amount, reason, currency) |\n| `manage_training` | ML | Training data ingestion and fine-tuning |\n\n## Framework & Library Support\n\n| Library | React | Vue | Angular | Svelte | HTML |\n| ----------- | ----------------- | --------------- | ----------------- | ------------------ | ------------ |\n| shadcn/ui | shadcn/ui | shadcn-vue | Tailwind | bits-ui | Tailwind |\n| Radix | @radix-ui/react | @radix-ui/vue | Tailwind | @radix-ui/svelte | Tailwind |\n| Headless UI | @headlessui/react | @headlessui/vue | Tailwind | @headlessui/svelte | Tailwind |\n| Material | @mui/material | Vuetify | @angular/material | @smui/material | Tailwind |\n| PrimeVue | Headless UI | primevue | primeng | Tailwind | Tailwind |\n| none | Tailwind CSS | Tailwind CSS | Tailwind CSS | Tailwind CSS | Tailwind CSS |\n\n## Brand Identity Integration\n\nAll generation tools accept an optional `brand_identity` parameter — a JSON\nstring from [branding-mcp](https://github.com/Forge-Space/branding-mcp)'s\n`generate_brand_identity` tool. When provided, brand colors, typography, and\nspacing are injected into the design context.\n\n## Environment Variables\n\n| Variable | Required | Description |\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- |\n| `FIGMA_ACCESS_TOKEN` | Only for Figma tools | Token from [Figma Settings](https://www.figma.com/developers/api#access-tokens) |\n| `SENTRY_DSN` | Optional | Sentry DSN for error reporting (uncaught exceptions and unhandled rejections) |\n\n## Distribution\n\n- **npm** — published as\n [`@forgespace/ui-mcp`](https://www.npmjs.com/package/@forgespace/ui-mcp)\n- **MCP Registry metadata** — repository includes [`server.json`](server.json)\n and `mcpName` metadata for registry submission\n- **Tag release automation** — pushing `v*` runs npm publish with provenance,\n then publishes the same version to the MCP Registry via GitHub OIDC\n- **Weekly registry ops** — `.github/workflows/mcp-registry-status.yml`\n refreshes one issue with npm and MCP Registry drift, visibility, and next\n actions\n- **GitHub** — source, issues, releases, and Discussions live under\n [Forge Space](https://github.com/Forge-Space)\n\n## Development\n\n```bash\nnpm install && npm run build\nnpm test # 437 tests, 35 suites\nnpm run validate # lint + format + typecheck + test\n```\n\n## Community\n\n- [Documentation](https://docs.forgespace.co/docs)\n- [GitHub Discussions](https://github.com/orgs/Forge-Space/discussions)\n- [Issue Tracker](https://github.com/Forge-Space/ui-mcp/issues)\n\n## GitHub Workflow\n\nThis repository follows the shared Forge Space GitHub work-management baseline:\n\n- Discussions for ideas, RFCs, Q&A, and announcements\n- Issues for actionable delivery work\n- Projects for roadmap visibility and cross-repo reporting\n\nSee\n[Forge-Space/.github `GOVERNANCE.md`](https://github.com/Forge-Space/.github/blob/main/GOVERNANCE.md)\nfor the org-wide contract.\n\nScheduled monitoring runs that execute CodeQL require job-scoped\n`security-events: write` permission for SARIF upload.\n\nThe scheduled `Security Monitoring` workflow intentionally skips Codecov upload\nand relies on local coverage summary generation to reduce false alerting from\nthird-party action download instability.\n\n## License\n\nMIT\n", "bytes": 9312, "sha": "ee3f7f825277db766bb09db43bc92e43c54815bd300186f212812a3acafa6666", "repo_slug": "forge-space/ui-mcp", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/mcp_io_github_forge_space_ui_mcp_2afaec9c/readme" }