MCP Toolkit
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., "@MCP Toolkitsearch UI/UX design patterns for mobile apps"
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.
MCP Toolkit
Overview
A unified Python MCP (Model Context Protocol) server built on FastMCP that exposes three integrated toolkits to Claude Desktop, Claude Code, and claude.ai: UI/UX Pro Max design intelligence, Claude Command Suite (slash commands + AI agents), and Superpowers development skills. One server, one config, 14 tools spanning design-system generation, stack-specific UI guidelines, browsable command/agent libraries, and composable development skills (TDD, debugging, code review, planning).
Related MCP server: Code Intelligence MCP
Status
Working — server runs via stdio, SSE, or streamable-HTTP; start.sh publishes it through a Cloudflare tunnel for claude.ai integration.
14 tools exposed:
Group | Tools |
UI/UX Pro Max |
|
Command Suite |
|
Superpowers |
|
Content inventory:
Commands: 26 namespaces (dev, test, deploy, security, project, rust, svelte, simulation, docs, team, performance, memory, reasoning, wfgy, etc.)
Agents: 40+ specialized agents (code-auditor, test-engineer, release-manager, svelte-*, swift-macos-expert, wfgy, skill-builder, data-ai, infrastructure, …)
Skills: 31 Superpowers SKILL.md folders (brainstorming, systematic-debugging, test-driven-development, writing-plans, frontend-design, mcp-builder, webapp-testing, …)
UI/UX data: CSVs for styles, 161 color palettes, typography pairings, charts, product types, UX guidelines, React/web patterns, Google Fonts, prompt templates — plus
react-nativestack guidelines
Setup & Run
# Install (only FastMCP required)
pip install -r requirements.txtClaude Desktop (stdio)
fastmcp run server.pyAdd to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"mcp-toolkit": {
"command": "python3",
"args": ["-m", "fastmcp", "run", "/absolute/path/to/mcp-toolkit/server.py"]
}
}
}Claude Code
claude mcp add mcp-toolkit -- python3 -m fastmcp run /absolute/path/to/server.pyclaude.ai (remote via Cloudflare tunnel)
./start.sh # server on :8100 + cloudflared tunnel (prints trycloudflare.com URL)
./start.sh --no-tunnel # local-onlyThen in claude.ai: Settings → Integrations → Add Custom MCP → paste the https://…trycloudflare.com/mcp URL.
Manual alternative: fastmcp run server.py -t sse --port 8100 or -t streamable-http.
Architecture
mcp-toolkit/
├── server.py # FastMCP server, 14 @mcp.tool() definitions (UIUX / Commands / Skills)
├── start.sh # Boots streamable-http server + Cloudflare tunnel, prints public URL
├── requirements.txt # fastmcp>=3.0.0
├── agents/ # 40+ agent .md files (flat + subdirs: development, security, business, …)
├── commands/ # 26 namespaces of slash-command .md files (dev, test, deploy, rust, svelte, …)
├── skills/ # 31 Superpowers skills, each a folder with SKILL.md + supporting files
├── uiux_data/ # CSVs: styles, colors, typography, charts, products, UX, stacks
└── uiux_scripts/ # core.py, design_system.py, search.py — imported by server.pyWiring note: server.py patches sys.path and core.DATA_DIR so the bundled uiux_scripts/ modules resolve uiux_data/ regardless of cwd.
Tool surface:
uiux_search(query, domain, max_results)— 12 domains auto-detecteduiux_design_system(query, project_name)— full design-system markdown (colors/typography/spacing/components)uiux_stack_guidelines(query, stack)— currentlyreact-nativelist_commands/get_command/search_commands— walkcommands/<ns>/*.mdlist_agents/get_agent— walkagents/**/*.md, parse frontmatterdescription:list_skills/get_skill/get_skill_file/search_skills— walkskills/*/SKILL.mdget_workflow(workflow)— curated multi-skill recipes forfeature | bugfix | refactor | review
Roadmap
Expand
uiux_stack_guidelinesbeyondreact-native(React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, shadcn/ui, HTML/CSS)Cache
_get_agents()/_get_namespaces()/SUPERPOWERSwalks — currently re-scan disk on every tool callMake
SUPERPOWERSset construction lazy; it runs at import time and will crash ifskills/is ever missingReplace hardcoded Python path in
start.sh(/Library/Frameworks/Python.framework/Versions/3.11/bin/python3) with a venv or$(command -v python3)Auth / access control for the public Cloudflare tunnel endpoint
Health check + reconnect logic in
start.sh(currently fixedsleep 8for tunnel URL parse)Add MCP resources (not just tools) for large static content — design-system CSVs, agent/skill catalogs
Tests — no test suite exists yet
Known Bugs
None identified in shipped tool code. (TODO markers found in
commands/skills/scripts/init_skill.pyandquick_validate.pyare intentional template scaffolding for the skill-builder, not defects.)Minor:
SUPERPOWERS = {…}at module top-level will raiseFileNotFoundErrorifskills/is absent — deployment-time concern only.Minor:
start.shparses the tunnel URL after a fixed 8-second sleep; slow cloudflared startups may leaveTUNNEL_URLempty.
This server cannot be deployed
Maintenance
Related MCP Connectors
MCP server for building and testing AI agents with multi-model experimentation and insights.
The Figma MCP server brings Figma design context directly into your AI workflow.
Unified MCP Server is a remote MCP connector for AI agents and vertical AI products that provides access to 22,000+ authorized SaaS tools across 400+ integrations and 24 categories directly inside LLMs (Claude, GPT, Gemini, Cohere). Tools operate only on explicitly authorized customer connections, enabling agents to safely read and write against live third-party systems.
MCP server unifying ERPs, CRMs, APIs and knowledge base for Claude, ChatGPT and Gemini.
Related MCP Servers
- AlicenseBqualityDmaintenanceAn MCP server that enables AI-powered IDEs to implement a structured development workflow from requirements gathering to code implementation, guiding users through goal collection, requirements specification, design documentation, task planning, and execution.97 npm21MIT
- AlicenseAqualityCmaintenanceAn MCP server that recommends UI components and utility methods from private code repositories using AI to enhance code reuse and development efficiency.45 npm1MIT
- FlicenseNot gradedqualityDmaintenanceMCP server that provides access to over 100 development skills for frontend, backend, integration, design, devops, and process categories via Claude Code and other MCP clients.-
- FlicenseNot gradedqualityBmaintenanceMCP server for AI-first UI design that enables Codex to create, preview, and commit UI changes to a self-hosted design tool.3-