{"_id":"@elsahafy/ui-toolkit-mcp","_rev":"2-94aef9d64ca9d3b10fd73e8213da469f","name":"@elsahafy/ui-toolkit-mcp","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.0":{"name":"@elsahafy/ui-toolkit-mcp","version":"2.0.0","keywords":["mcp","model-context-protocol","ui","component-generator","design-tokens","accessibility","react","vue","svelte","angular","web-components","wcag","design-system","ai-tools","claude","cursor"],"author":{"name":"Ibrahim Elsahafy"},"license":"MIT","_id":"@elsahafy/ui-toolkit-mcp@2.0.0","maintainers":[{"name":"elsahafy","email":"i.elsahafy@hotmail.com"}],"homepage":"https://github.com/elsahafy/ui-toolkit-mcp#readme","bugs":{"url":"https://github.com/elsahafy/ui-toolkit-mcp/issues"},"bin":{"ui-toolkit-mcp":"dist/index.js"},"dist":{"shasum":"ca32582042275bfdd03ef2142e6bc3150a15ce8f","tarball":"https://registry.npmjs.org/@elsahafy/ui-toolkit-mcp/-/ui-toolkit-mcp-2.0.0.tgz","fileCount":90,"integrity":"sha512-NwJNPty7d6gLUa14uyr5mHaN7Galy+Bccj2EbfQd+88eRXxlEeszo3W5NGDgwZevDxHhRAygm/46z5FJl5QHOA==","signatures":[{"sig":"MEUCIGQPJ+qcvSbaSn2jQRt0WWjzXA4HWTyxBKySeK9M8BCrAiEAytJPmyPGM5S9+DTRcd7aX3fxVeoNKPcGAWpzPLGZYYU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":284463},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","engines":{"node":">=18.0.0"},"gitHead":"7dc90f5617f4a3fbd0c10668fb9ceffbd12d46d2","scripts":{"dev":"tsc && node dist/index.js","lint":"eslint src/","test":"vitest run","build":"tsc","watch":"tsc --watch","prepare":"npm run build","test:watch":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run build"},"_npmUser":{"name":"elsahafy","email":"i.elsahafy@hotmail.com"},"repository":{"url":"git+https://github.com/elsahafy/ui-toolkit-mcp.git","type":"git"},"_npmVersion":"10.9.3","description":"Full-stack UI toolkit MCP server: generate components, manage design tokens, and audit markup across React, Vue, Svelte, Angular, and Web Components.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@modelcontextprotocol/sdk":"^1.0.4"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^3.2.4","typescript":"^5.7.2","@types/node":"^22.10.2"},"peerDependencies":{"playwright":">=1.40.0"},"peerDependenciesMeta":{"playwright":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui-toolkit-mcp_2.0.0_1775117015360_0.9302190783038746","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@elsahafy/ui-toolkit-mcp","version":"2.0.1","description":"Full-stack UI toolkit MCP server: generate components, manage design tokens, and audit markup across React, Vue, Svelte, Angular, and Web Components.","type":"module","main":"dist/index.js","bin":{"ui-toolkit-mcp":"dist/index.js"},"scripts":{"build":"tsc","watch":"tsc --watch","dev":"tsc && node dist/index.js","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","lint":"eslint src/","prepare":"npm run build","prepublishOnly":"npm run build"},"keywords":["mcp","model-context-protocol","ui","component-generator","design-tokens","accessibility","react","vue","svelte","angular","web-components","wcag","design-system","ai-tools","claude","cursor"],"repository":{"type":"git","url":"git+https://github.com/elsahafy/ui-toolkit-mcp.git"},"bugs":{"url":"https://github.com/elsahafy/ui-toolkit-mcp/issues"},"homepage":"https://github.com/elsahafy/ui-toolkit-mcp#readme","author":{"name":"Ibrahim Elsahafy"},"license":"MIT","engines":{"node":">=18.0.0"},"dependencies":{"@modelcontextprotocol/sdk":"^1.0.4"},"devDependencies":{"@types/node":"^22.10.2","typescript":"^5.7.2","vitest":"^3.2.4"},"_id":"@elsahafy/ui-toolkit-mcp@2.0.1","gitHead":"f9efa20ed1f54d86b8db98e515f7c51093a2785f","types":"./dist/index.d.ts","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-qcm35el7Vk7TLMflVUGzjou5MnM/qvWVrdnIFxJrIMJl/mc4wd13xNVNArNw26uMVKjdutm9sLWeRpMwO/gxVw==","shasum":"5c5fc2e1b9ae9138542f083b1a837b4e7b911e6a","tarball":"https://registry.npmjs.org/@elsahafy/ui-toolkit-mcp/-/ui-toolkit-mcp-2.0.1.tgz","fileCount":90,"unpackedSize":288068,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDxGAFG8ta0XaQnfydzo3jJgvTjpQWqXcb/koiP7xKjJgIhANh9A29ssT+AyoFzw5CFFKyNNtPAgvGJJEYo0lgAjWF8"}]},"_npmUser":{"name":"elsahafy","email":"i.elsahafy@hotmail.com"},"directories":{},"maintainers":[{"name":"elsahafy","email":"i.elsahafy@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-toolkit-mcp_2.0.1_1775118183825_0.1378901845856766"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-02T08:03:35.282Z","modified":"2026-04-02T08:23:04.098Z","2.0.0":"2026-04-02T08:03:35.508Z","2.0.1":"2026-04-02T08:23:03.979Z"},"bugs":{"url":"https://github.com/elsahafy/ui-toolkit-mcp/issues"},"author":{"name":"Ibrahim Elsahafy"},"license":"MIT","homepage":"https://github.com/elsahafy/ui-toolkit-mcp#readme","keywords":["mcp","model-context-protocol","ui","component-generator","design-tokens","accessibility","react","vue","svelte","angular","web-components","wcag","design-system","ai-tools","claude","cursor"],"repository":{"type":"git","url":"git+https://github.com/elsahafy/ui-toolkit-mcp.git"},"description":"Full-stack UI toolkit MCP server: generate components, manage design tokens, and audit markup across React, Vue, Svelte, Angular, and Web Components.","maintainers":[{"name":"elsahafy","email":"i.elsahafy@hotmail.com"}],"readme":"# UI Toolkit MCP Server\r\n\r\n[![npm version](https://badge.fury.io/js/@elsahafy%2Fui-toolkit-mcp.svg)](https://www.npmjs.com/package/@elsahafy/ui-toolkit-mcp)\r\n[![CI](https://github.com/elsahafy/ui-toolkit-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/elsahafy/ui-toolkit-mcp/actions/workflows/ci.yml)\r\n[![Tests](https://img.shields.io/badge/tests-184_passing-brightgreen)](https://github.com/elsahafy/ui-toolkit-mcp/actions/workflows/ci.yml)\r\n[![Snyk Security](https://github.com/elsahafy/ui-toolkit-mcp/actions/workflows/snyk.yml/badge.svg)](https://github.com/elsahafy/ui-toolkit-mcp/actions/workflows/snyk.yml)\r\n[![Known Vulnerabilities](https://snyk.io/test/github/elsahafy/ui-toolkit-mcp/badge.svg)](https://snyk.io/test/github/elsahafy/ui-toolkit-mcp)\r\n[![Socket](https://img.shields.io/badge/Socket-Supply_Chain_78%25-green)](https://socket.dev/npm/package/@elsahafy/ui-toolkit-mcp)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\r\n\r\nThe most comprehensive UI MCP server available. 13 tools, 5 resources, 3 prompts for end-to-end UI development: generate components, manage design tokens, audit accessibility, auto-fix issues, inspect live pages, compare screenshots, generate Storybook stories, extract Figma styles, compose layouts, and preview responsive designs -- across React, Vue, Svelte, Angular, and Web Components.\r\n\r\n**Works with any MCP-compatible client** including Claude Desktop, Claude Code, Cursor IDE, Continue.dev, Cline, and Zed.\r\n\r\n## Installation\r\n\r\n### npx (No Install)\r\n\r\n```bash\r\nnpx -y @elsahafy/ui-toolkit-mcp\r\n```\r\n\r\n### npm (Global)\r\n\r\n```bash\r\nnpm install -g @elsahafy/ui-toolkit-mcp\r\n```\r\n\r\n### Claude Code CLI\r\n\r\n```bash\r\nclaude mcp add ui-toolkit -- npx -y @elsahafy/ui-toolkit-mcp\r\n```\r\n\r\n### Claude Desktop\r\n\r\nAdd to `claude_desktop_config.json`:\r\n\r\n```json\r\n{\r\n  \"mcpServers\": {\r\n    \"ui-toolkit\": {\r\n      \"command\": \"npx\",\r\n      \"args\": [\"-y\", \"@elsahafy/ui-toolkit-mcp\"]\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Cursor IDE\r\n\r\nAdd to `~/.cursor/mcp.json`:\r\n\r\n```json\r\n{\r\n  \"mcpServers\": {\r\n    \"ui-toolkit\": {\r\n      \"command\": \"npx\",\r\n      \"args\": [\"-y\", \"@elsahafy/ui-toolkit-mcp\"]\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Optional: Browser Tools\r\n\r\nFor `inspect_page`, `live_audit`, and `responsive_preview`, install Playwright separately:\r\n\r\n```bash\r\nnpm install playwright\r\nnpx playwright install chromium\r\n```\r\n\r\nAll other tools work without Playwright.\r\n\r\n## Tools (13)\r\n\r\n### Component Generation\r\n\r\n#### `generate_component`\r\nGenerate production-ready UI components from natural language. Automatically audits the output and reports issues inline.\r\n\r\n```\r\n\"Generate a card component with image, title, and action buttons in React\"\r\n```\r\n\r\n**Parameters:**\r\n- `description` (required) -- What to build\r\n- `framework` (required) -- `react` | `vue` | `svelte` | `angular` | `web-components`\r\n- `component_name` (required) -- PascalCase name (e.g., `ProductCard`)\r\n- `variant` -- `default` | `outlined` | `filled` | `ghost` | `elevated`\r\n- `size` -- `sm` | `md` | `lg` | `xl`\r\n- `auto_audit` -- Automatically audit generated output (default: true)\r\n- `include_styles` -- Include CSS with design tokens (default: true)\r\n- `include_tests` -- Generate test file (default: false)\r\n- `responsive` -- Include breakpoints (default: true)\r\n\r\nGenerated components are automatically registered in the component registry.\r\n\r\n#### `compose_layout`\r\nCompose a full page layout from previously generated components in the registry.\r\n\r\n```\r\n\"Compose a page from Hero, Features, and Footer components in React\"\r\n```\r\n\r\n**Parameters:**\r\n- `component_names` (required) -- Array of component names from the registry\r\n- `framework` (required) -- Target framework\r\n- `layout_description` -- Description of the page layout\r\n\r\nProduces a complete page with imports, semantic structure (`<header>`, `<main>`, `<footer>`), and skip navigation.\r\n\r\n### Design Tokens\r\n\r\n#### `import_design_tokens`\r\nImport design tokens from Figma Tokens JSON, Style Dictionary, or CSS custom properties.\r\n\r\n**Parameters:**\r\n- `tokens_json` (required) -- Raw JSON string of tokens\r\n- `format` (required) -- `figma-tokens` | `style-dictionary` | `css-custom-properties`\r\n- `namespace` -- Optional prefix (e.g., `brand`)\r\n- `merge_strategy` -- `replace` | `merge-overwrite` | `merge-keep`\r\n\r\n#### `extract_figma_styles`\r\nExtract design tokens directly from a Figma file via the REST API.\r\n\r\n**Parameters:**\r\n- `figma_file_key` (required) -- Alphanumeric file key from Figma URL\r\n- `figma_pat` (required) -- Figma Personal Access Token (never stored or logged)\r\n- `node_ids` -- Optional specific nodes to extract\r\n- `namespace` -- Optional CSS variable prefix\r\n- `merge_strategy` -- How to handle existing tokens\r\n\r\n#### `export_tokens`\r\nExport the active token store as CSS custom properties, JSON, or Style Dictionary format.\r\n\r\n**Parameters:**\r\n- `format` -- `css` | `json` | `style-dictionary` (default: `css`)\r\n\r\n#### `clear_tokens`\r\nClear all design tokens from the active store.\r\n\r\n### Auditing & Fixing\r\n\r\n#### `audit_component`\r\nAudit markup for WCAG accessibility, performance, and responsive design issues. Returns scored findings with fix suggestions.\r\n\r\n**Parameters:**\r\n- `markup` (required) -- HTML/JSX/Vue/Svelte markup\r\n- `component_name` -- For report labeling\r\n- `categories` -- `[\"accessibility\", \"performance\", \"responsive\"]`\r\n- `wcag_level` -- `A` | `AA` | `AAA`\r\n- `framework` -- Affects how markup is parsed\r\n\r\n**29 built-in rules:** 12 accessibility (WCAG), 9 performance, 8 responsive design.\r\n\r\n#### `auto_fix_component`\r\nAutomatically fix common accessibility and performance issues based on audit findings.\r\n\r\n```\r\n\"Auto-fix the accessibility issues in this component\"\r\n```\r\n\r\n**Parameters:**\r\n- `markup` (required) -- The markup to fix\r\n- `findings` (required) -- Array of AuditFinding objects from `audit_component`\r\n\r\n**Supported auto-fixes:** missing alt text, missing lang attribute, missing lazy loading, positive tabindex, px font-sizes to rem.\r\n\r\n#### `live_audit`\r\nNavigate to a live URL and audit the rendered HTML. Combines browser inspection with markup auditing in one call. Requires Playwright.\r\n\r\n**Parameters:**\r\n- `target_url` (required) -- HTTP/HTTPS URL (private IPs blocked)\r\n- `categories` -- Audit categories to run\r\n- `wcag_level` -- WCAG conformance level\r\n\r\n### Browser Tools (Playwright)\r\n\r\n> Install separately: `npm install playwright && npx playwright install chromium`\r\n\r\n#### `inspect_page`\r\nNavigate to a live URL and extract accessibility tree, component structure, performance metrics, and screenshot.\r\n\r\n**Parameters:**\r\n- `target_url` (required) -- HTTP/HTTPS URL (private IPs blocked)\r\n- `viewport_width` / `viewport_height` -- Viewport size\r\n- `wait_for` -- `load` | `domcontentloaded` | `networkidle`\r\n- `timeout_ms` -- Navigation timeout\r\n- `include_screenshot` -- Base64 PNG screenshot (default: true)\r\n\r\n#### `visual_diff`\r\nPixel-by-pixel PNG comparison for visual regression testing. No Playwright required.\r\n\r\n**Parameters:**\r\n- `before_image` (required) -- Base64 PNG\r\n- `after_image` (required) -- Base64 PNG\r\n- `threshold` -- Per-channel tolerance (0-255, default: 10)\r\n\r\n#### `responsive_preview`\r\nScreenshot a URL at mobile (375px), tablet (768px), and desktop (1280px) viewports. Requires Playwright.\r\n\r\n**Parameters:**\r\n- `target_url` (required) -- HTTP/HTTPS URL (private IPs blocked)\r\n\r\n### Storybook\r\n\r\n#### `generate_story`\r\nAuto-generate CSF3 Storybook stories with prop detection, play functions, and accessibility addon config.\r\n\r\n**Parameters:**\r\n- `component_code` (required) -- Full component source code\r\n- `framework` (required) -- `react` | `vue` | `svelte` | `angular`\r\n- `component_name` (required) -- PascalCase name\r\n- `story_title` -- Storybook path (default: `Components/{name}`)\r\n\r\n**Detects props via regex** from: TypeScript interfaces (React), `defineProps` (Vue), `export let` (Svelte), `@Input()` (Angular).\r\n\r\n## Resources (5)\r\n\r\n| URI | Description |\r\n|-----|-------------|\r\n| `ui://tokens/active` | Currently loaded design tokens |\r\n| `ui://patterns/components` | Component pattern library (12 patterns with a11y requirements) |\r\n| `ui://components/registry` | Registry of all generated components with audit scores |\r\n| `ui://server/health` | Server version, tool count, token count, uptime |\r\n| `ui://audit/checklist` | Full audit rule reference (auto-generated from rule definitions) |\r\n\r\n## Prompts (3)\r\n\r\n| Prompt | Description |\r\n|--------|-------------|\r\n| `build_page` | Generate a full page with multiple components using design tokens |\r\n| `component_audit` | Comprehensive audit + fix workflow |\r\n| `design_to_code` | Full Figma-to-code: extract tokens, generate components, audit, generate stories |\r\n\r\n## Key Features\r\n\r\n### Audit-at-Generation-Time\r\nEvery component generated by `generate_component` is automatically audited for accessibility, performance, and responsive issues. Critical findings are reported inline. No other UI MCP server does this.\r\n\r\n### Component Registry\r\nAll generated components are tracked with metadata (framework, tokens used, audit score, timestamp). Use `compose_layout` to assemble them into full pages.\r\n\r\n### Design Token Pipeline\r\nImport tokens from Figma, Style Dictionary, or CSS custom properties. Export in any format. Tokens are automatically applied to generated components.\r\n\r\n### Framework Agnostic\r\nAll 13 tools support React, Vue, Svelte, Angular, and Web Components. One server, any framework.\r\n\r\n## Architecture\r\n\r\n```\r\nsrc/\r\n  index.ts                          # Server entry (thin orchestrator)\r\n  lib/\r\n    types.ts                        # Shared TypeScript interfaces\r\n    token-store.ts                  # In-memory design token state\r\n    component-registry.ts           # Component tracking\r\n    framework-templates.ts          # 5 framework component generators\r\n    story-templates.ts              # CSF3 story templates + prop detection\r\n    accessibility-rules.ts          # 12 WCAG audit rules\r\n    performance-rules.ts            # 9 performance audit rules\r\n    responsive-rules.ts             # 8 responsive design rules\r\n    pattern-library.ts              # 12 component patterns\r\n    browser.ts                      # Playwright lifecycle + URL validation\r\n    validation.ts                   # Shared input validation\r\n    utils.ts                        # Shared utilities (kebab, clamp, fileExt)\r\n  tools/\r\n    generate-component.ts           # + auto-audit + registry\r\n    import-design-tokens.ts\r\n    audit-component.ts\r\n    auto-fix-component.ts\r\n    inspect-page.ts\r\n    visual-diff.ts\r\n    generate-story.ts\r\n    extract-figma-styles.ts\r\n    export-tokens.ts\r\n    clear-tokens.ts\r\n    live-audit.ts\r\n    responsive-preview.ts\r\n    compose-layout.ts\r\n    index.ts                        # Tool registry + dispatch\r\n  resources/\r\n    index.ts                        # 5 resources\r\n  prompts/\r\n    index.ts                        # 3 workflow prompts\r\ntests/\r\n  lib/                              # 11 library test files\r\n  tools/                            # 12 tool test files\r\n```\r\n\r\n**184 tests** across 23 test files. All source files have dedicated test coverage.\r\n\r\n## Security\r\n\r\n- No code execution -- all `markup` parameters are analyzed via regex, never evaluated\r\n- URL validation blocks private IPs (127.x, 10.x, 172.16-31.x, 192.168.x, fe80::, fc00::, localhost)\r\n- Only HTTP/HTTPS schemes allowed for browser tools\r\n- Figma PAT is never stored, logged, or returned in responses (sanitized from error messages)\r\n- All string inputs have `maxLength` constraints enforced at runtime\r\n- No credential keywords in resource URIs\r\n- Input validation helper shared across all tool handlers\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}