Generates UI components and full applications using Angular with Tailwind CSS support.
Reads Figma files, extracts design tokens, maps to Tailwind, and pushes variables back to Figma.
Generates UI components using Headless UI for React, Vue, Svelte, and HTML.
Generates UI components using Material-UI (MUI) for React applications.
Scaffolds full Next.js applications with Tailwind CSS.
Generates UI components using PrimeNG for Angular applications.
Generates UI components using PrimeVue for Vue applications.
Generates UI components, forms, page templates, and full applications for React with various component libraries.
Optional error reporting integration for uncaught exceptions and unhandled rejections.
Generates UI components using shadcn/ui for React and Vue.
Generates UI components and applications for Svelte with Tailwind CSS.
Default styling layer used across all generated frameworks with brand identity integration.
Generates UI components using Vuetify for Vue applications.
Provides Zod validation schemas for form generation and payment refund parameters.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@@forgespace/ui-mcp generate a login form in React with validation"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Part of the Forge Space ecosystem.
@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)Related MCP server: @21st-dev/magic
# 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-mcpAdd 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"
}
}
}
}Tool | Category | Description |
| Code | Full project boilerplate (React/Next.js/Vue/Angular/HTML + Tailwind) |
| Code | UI components with style audit, supports shadcn/ui, Radix, Headless UI, Material, PrimeVue |
| Code | Production forms with Zod/Yup validation, multi-step flows, accessible markup |
| Code | Pre-built pages (landing, dashboard, auth, pricing, CRUD) |
| Design | Interactive HTML prototypes with navigation |
| Design | SVG/PNG mockups of UI screens |
| Code | Screenshot/wireframe to framework-specific component |
| Code | Improve components via natural language feedback |
| Backend | API routes with validation, auth, and error handling |
| Backend | Full feature modules with routes, services, middleware |
| Backend | Complete backend projects with auth, DB, monitoring |
| Code | Multi-page apps from curated packs (SaaS, Landing, AI Chat) |
| Context | Read Figma files, extract tokens, map to Tailwind |
| Design | Write design tokens back to Figma |
| Context | Extract visual metadata from URLs |
| Context | Analyze design references, detect patterns |
| ML | Analyze design images for training data |
| Context | Analyze component library patterns |
| Quality | WCAG 2.1 audit with fix suggestions |
| Quality | Submit feedback to improve future output |
| Backend | Request payment refund with Zod-validated params (payment_id, amount, reason, currency) |
| ML | Training data ingestion and fine-tuning |
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 |
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.
Variable | Required | Description |
| Only for Figma tools | Token from Figma Settings |
| Optional | Sentry DSN for error reporting (uncaught exceptions and unhandled rejections) |
npm — published as
@forgespace/ui-mcp
MCP Registry metadata — repository includes server.json
and mcpName metadata 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.yml
refreshes one issue with npm and MCP Registry drift, visibility, and next
actions
GitHub — source, issues, releases, and Discussions live under Forge Space
npm install && npm run build
npm test # 437 tests, 35 suites
npm run validate # lint + format + typecheck + testThis 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.
MIT
Analyze component source code to detect which library is used, identify patterns, and get migration suggestions.
Inputs: code (required), filePath, detectLibrary, analyzePatterns, +2 more.
Analyze a UI design image to extract patterns, styles, and components for ML training. Does NOT store images - only extracts structured design data (colors, typography, components, layout). Privacy-friendly and zero-cost.
Inputs: image_data (required), image_mime_type, description, component_name, +1 more.
Analyze design references from URLs (browser automation + screenshots) and/or attached images. Extracts colors, typography, layout patterns, and UI components. When multiple references are provided, identifies common patterns across all sources to prioritize consistent design decisions for UI/UX generation.
Inputs: urls, images, viewport, update_context.
Assess a legacy codebase for migration readiness. Analyzes dependencies, architecture, security, quality, and migration readiness. Returns health score (0-100), grade (A-F), migration strategy, and detailed findings.
Inputs: project_dir (required).
Audit a component for WCAG 2.1 accessibility violations. Checks color contrast hints, ARIA attributes, keyboard navigation, semantic HTML, form labels, focus management, and more. Returns issues with severity, suggestions, and WCAG criteria references.
Inputs: component_code (required), framework (required), strict.
Extract visual metadata (colors, typography, layout hints) from any URL to inform design decisions
Inputs: url (required), extract_colors, extract_typography.
Read Figma file nodes, extract design tokens, and map them to Tailwind CSS utilities. Updates the shared design context.
Inputs: file_key (required), node_ids.
Write design tokens back to Figma as Variables via the Figma REST API. Creates or updates variable collections.
Inputs: file_key (required), variables (required).
Run a full project health assessment across 5 categories (dependencies, architecture, security, quality, migration-readiness). Returns scores, grades, migration readiness, and prioritized findings.
Inputs: directory (required), max_files.
Analyze quality delta between two git refs. Shows score change, new findings introduced, and resolved findings. Useful for PR quality checks.
Inputs: directory (required), base, head, staged.
Run a quality gate check on a project. Returns pass/fail status, score, grade, and blocking violations. Configurable threshold and governance phase.
Inputs: directory (required), threshold, phase.
Generate a full migration plan for a legacy project. Combines health assessment with strategy recommendation, strangler boundaries, TypeScript migration plan, dependency risks, and a phased roadmap with quality gates.
Inputs: directory (required), max_files.
Scan a project for code quality issues using forge-ai-init governance rules (25 rules, 10 categories). Returns score, grade, findings by category, and hotspot files.
Inputs: directory (required), max_files.
Generate a production-ready API route with validation, authentication, and error handling based on best-practice backend patterns.
Inputs: route_type (required), resource_name (required), framework, features.
Generate a complete backend feature module with routes, service layer, repository, types, and middleware following clean architecture patterns.
Inputs: module_name (required), operations (required), framework, patterns, +1 more.
Generate components from shadcn, radix, headlessui, or material UI libraries. Supports themes, custom props, test/story generation, and framework-specific output.
Inputs: componentType (required), library (required), framework (required), customizations, +4 more.
Generate SVG or PNG mockup images of UI screens and components. Supports wireframe, mockup, and component preview modes.
Inputs: description (required), type (required), width, height, +3 more.
Generate production-ready forms with validation schemas, accessible markup, error handling, and multi-step support. Includes preset form types (login, signup, contact, checkout) or fully custom field definitions.
Inputs: form_type (required), framework (required), fields, validation_library, +7 more.
Generate a full multi-page application from a template pack
Inputs: pack_id (required), framework (required), project_name (required).
Generate a phased migration plan for a legacy codebase. Runs assessment, detects strategy, and produces a roadmap with quality gates (40% -> 60% -> 80%).
Inputs: project_dir (required), target_framework.
Generate pre-built page templates for common UI patterns: landing pages, dashboards, auth flows, pricing, settings, CRUD tables, blog listings, onboarding wizards, error pages, and ecommerce storefronts (PLP, PDP, cart, checkout). Supports all frameworks and component libraries.
Inputs: template (required), framework (required), component_library, dark_mode, +5 more.
Create interactive HTML prototypes with screen flows, navigation, and transitions. Output is a standalone HTML file.
Inputs: screens (required), navigation_flow (required), design_context, output_format, +1 more.
Create or iterate UI components with style audit and design context awareness. Supports React, Next.js, Vue, Angular, Svelte, and HTML. Component library integration available: shadcn/ui, Radix UI, Headless UI, PrimeVue, Material UI.
Inputs: component_type (required), framework (required), props, component_library, +9 more.
List all available components for a given component library (shadcn, radix, headlessui, material).
Inputs: library (required).
List all available component libraries with their component counts and descriptions.
Inputs: no named parameters.
Get the current component library setup status for a project directory.
Inputs: projectPath (required).
Returns the full context document for a UIForge project from the centralized store. This is the absolute source of truth for project architecture, status, requirements, and roadmap. Pass the project slug (e.g. "forge-patterns"). Use list_projects to discover available projects.
Inputs: project (required).
Convert a screenshot, mockup, or wireframe image into framework-specific component code. Supports React, Next.js, Vue, Angular, Svelte, and HTML. Optionally uses shadcn/ui, Radix, Headless UI, PrimeVue, or Material UI.
Inputs: image_data (required), framework (required), image_mime_type, component_name, +3 more.
Lists all projects registered in the centralized UIForge context store, with their slugs, titles, descriptions, and last-updated timestamps.
Inputs: no named parameters.
Manage ML training jobs for the UIForge sidecar model. Actions: check_readiness (verify training prerequisites), start_training (begin LoRA fine-tuning), get_status (check job progress), cancel_training (stop running job), list_adapters (show available adapters), get_summary (get training statistics).
Inputs: action (required), adapter_name.
Request a refund for a payment. Validates payment_id, amount (positive integer minor units), optional reason and currency. Returns a structured confirmation (stub).
Inputs: payment_id (required), amount (required), reason, currency.
Iteratively improve an existing component based on natural language feedback. Apply accessibility fixes, dark mode, responsive improvements, component library upgrades, and design context alignment. Supports all frameworks.
Inputs: component_code (required), feedback (required), framework (required), dark_mode.
Generate a complete production-ready backend project scaffold. Supports Express and Next.js with configurable features: auth (JWT/OAuth/Session), database (Prisma/Drizzle), API docs (Swagger), monitoring (Sentry), caching (Redis), and more. Includes TypeScript, testing, and CI/CD setup.
Inputs: projectName (required), framework (required), features (required), database, +1 more.
Generate full project boilerplate with ML-composed pages for React, Next.js, Vue, Angular, Svelte, or HTML with Tailwind CSS and optional state management
Inputs: framework (required), project_name (required), styling, architecture, +5 more.
Set up a complete project with a component library (shadcn, radix, headlessui, material) including config files, dependencies, and initial components.
Inputs: library (required), framework (required), projectName (required), projectPath, +6 more.
Submit feedback on a previously generated UI component or page template. This helps UIForge learn your preferences and improve future generations.
Inputs: generation_id (required), rating (required), feedback_type (required), comments, +4 more.
Writes or overwrites the context document for a UIForge project in the centralized store. Use this to keep the source of truth up-to-date after architectural decisions, status changes, roadmap updates, or any significant project change. Provide the full markdown content — this completely replaces the existing context.
Inputs: project (required), title (required), description (required), content (required).
Validate that a component library is correctly configured in a project directory.
Inputs: projectPath (required), library (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Scored across 38 tools
Many tools have overlapping purposes, e.g., analyze_component_library, analyze_design_references, fetch_design_inspiration all extract design patterns; forge_assess, assess_legacy_codebase, forge_scan all assess code quality. Agents may struggle to select the correct tool.
Tool names use inconsistent prefixes: analyze, assess, audit, fetch, figma, forge, generate, get, image_to, list, manage, payments, refine, scaffold, setup, submit, update, validate. No single verb_noun pattern is followed throughout.
38 tools is excessive for a UI-focused server. Many tools could be consolidated (e.g., multiple generate_* and forge_* tools) or split into separate servers. The scope seems too broad.
Covers analysis, generation, design, accessibility, migration, Figma, project context, and feedback, but lacks tools for deployment, user management, project creation, and design token CRUD. The payments_refund stub is an odd inclusion.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Build and host full-stack apps from a prompt, with agents that reach you on WhatsApp and email.
Build, version, review, and export websites, web apps, and games from a conversation.
