symbols-mcp
Click on "Install 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., "@symbols-mcpgenerate a button component with primary styling"
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.
symbols-mcp
mcp-name: io.github.symbo-ls/symbols-mcp
MCP server for Symbols.app — provides documentation search, code generation, conversion, auditing, project management, publishing/deployment, and CLI/SDK reference tools for AI coding assistants (Cursor, Claude Code, Windsurf, claude.ai, etc.).
Targets the modern smbls stack — flat element API, signal-based reactivity, declarative fetch: (@symbo.ls/fetch), polyglot translations (@symbo.ls/polyglot), helmet metadata (@symbo.ls/helmet), SPA routing via el.router(...), theme via @symbo.ls/scratch, and SSR via @symbo.ls/brender.
No API keys required for documentation tools. Project management tools require a Symbols account (login or API key).
Tools
Context — start here
Tool | Description |
| CALL FIRST. Walks up from cwd to find |
| Bundled mandatory ruleset (FRAMEWORK + DESIGN_SYSTEM + RULES + DEFAULT_PROJECT, ≈180K chars). Call before any code generation task. |
| Complete Symbols CLI ( |
| Complete Symbols SDK ( |
| Keyword search across all bundled Symbols documentation files. |
| [Legacy] Caller-supplied flags variant of env classification. Prefer |
Generation & conversion
Tool | Description |
| Generate a DOMQL component from a natural language description. Returns prompt + bundled context (≈300K chars). |
| Generate a full page with routing, helmet metadata, and declarative |
| Convert React/JSX code to Symbols DOMQL (modern smbls stack). |
| Convert raw HTML/CSS to Symbols DOMQL components. |
| Convert DOMQL JS source to platform JSON (mirrors frank's toJSON pipeline). Use after |
Audit
Tool | Description |
| Inline VALIDATOR for a single component string. Returns violations + warnings (≈1K chars). Use during generation. Pass |
| Returns the multi-phase project audit PLAYBOOK (instructions for the agent — Phase 0 setup → Phase 5 report). Pair with |
For filesystem-wide audits the package ships a CLI: npx -y @symbo.ls/mcp symbols-audit <symbols-dir> (strict by default, exit 1 on findings). Under the hood it runs frank-audit audit --strict — the audit core is now @symbo.ls/frank-audit, the AST-based engine that owns the canonical 59-rule registry, prescription generation, and verify-or-rollback fixers.
lib/audit.js is preserved as a backward-compat shim that delegates to frank-audit (subprocess CLI, or the /audit-content HTTP endpoint when FRANK_AUDIT_URL is set). The legacy programmatic API stays callable for non-CLI consumers (the @symbo.ls/cli, the MCP HTTP worker, web/edge clients):
const {
auditContent, // audit one component string (delegates to frank-audit)
auditFiles, // audit a list of {path, content}
auditDirectory, // walk a symbols/ dir via `frank-audit audit <dir>`
mergeFindings, // preserve status across runs
summarize, // breakdown by severity / category / origin
} = require('@symbo.ls/mcp/lib/audit')Findings drift vs the old regex output is expected and correct — frank-audit detects more issues with higher accuracy. Field names stay the same (file, line, rule, severity, category, snippet, suggested_fix). To inspect the rule registry, query frank-audit directly: npx frank-audit explain <id>.
Project Management & Publishing
Tool | Description |
| Log in to Symbols platform — returns a JWT token. |
| List the user's projects (names, keys, IDs) to choose from. |
| Create a new Symbols project on the platform. |
| Get a project's current data (components, pages, design system, state). |
| Save components/pages/data to a project — creates a new version with change tuples, granular changes, orders, and auto-generated schema entries. |
| Publish a version (make it live). |
| Deploy a project to an environment (production, staging, dev). |
End-to-End Flow (from any MCP client)
1. get_project_context → resolve owner/key/env/auth state from cwd's symbols.json
2. generate_component → JS source code
3. audit_component → inline check (saves a roundtrip if violations exist)
4. convert_to_json → platform JSON
5. login → only if token_present was false in step 1
6. create_project → (if new project needed)
list_projects → (or pick existing)
7. save_to_project → push JSON to platform (creates version)
8. publish → make version live
7. push → deploy to environmentRelated MCP server: symbols-mcp-server
Resources
Skills (documentation)
URI | Description |
| Authoritative framework reference — project structure, plugins, theming, SSR, publish pipeline (mirrors |
| 62 strict rules for AI agents working in Symbols/DOMQL projects |
| Complete DOMQL syntax language reference (flat API, signal reactivity) |
| Modern smbls stack — fetch, polyglot, helmet (full metadata catalog), router, scratch theme runtime, brender SSR |
| DOMQL component reference (flat props on element, flat onX events) |
| Project folder structure and file conventions |
| sharedLibraries pattern — config, runtime merge, precedence |
| Design system contract + token catalog (colors, theme, typography, spacing, etc.) |
| UI/UX direction + design-to-code translator + 7 specialist personas (consolidated) |
| UI patterns, accessibility, AI optimization |
| Migration guide for legacy projects + React/Angular/Vue → Symbols |
| Full audit playbook (Phase 0–5, executable end-to-end) |
| Wrong vs correct DOMQL patterns with zero-tolerance enforcement |
| Patterns that survive |
| Framework internals, technical gotchas, deep runtime knowledge |
| Cookbook of small reactive recipes (toggle, fetch, modal, tabs, etc.) |
| Production-ready component snippets (nav, hero, pricing card, footer, etc.) |
| Default starter — library catalog (127+ components) + pre-configured design system tokens |
| Complete source code of 130+ default template components (heavy reference, on demand) |
| 4 ways to run Symbols apps (local, CDN, JSON, remote) |
| Symbols CLI ( |
| Symbols SDK ( |
Reference (inline)
URI | Description |
| Spacing token table (golden-ratio scale) |
| Built-in atom/primitive components |
| Event handler signatures and patterns |
Prompts
Prompt | Description |
| Generate a component from a description |
| Migrate code from React/Angular/Vue |
| Scaffold a complete project |
| Review code for compliance |
| Convert HTML/CSS to DOMQL |
| Visual/design audit against the design system |
Quickstart
Two commands and a one-line config — works for every major MCP client.
1. Install
Pick whichever runtime you have:
uvx symbols-mcp # uv — recommended, zero install
pip install symbols-mcp # pip — global binary
npx -y @symbo.ls/mcp # npm — Node-friendly wrapper2. Configure your editor
The standard MCP config snippet (works for Claude Code, Claude Desktop, Cursor, Windsurf, Cline, Continue, Zed, Goose, Gemini CLI — wrap it in whatever shape that editor expects):
{
"mcpServers": {
"symbols-mcp": {
"type": "stdio",
"command": "uvx",
"args": ["--refresh", "symbols-mcp"]
}
}
}--refresh pulls the latest from PyPI on every launch (~1–2s startup tax — drop it for pinned/offline runs).
3. Verify
In your editor's chat, ask the assistant:
Use
symbols-mcpto callget_project_rules, then summarize the modern stack rules.
If that returns a long ruleset, you're set. Try audit_component on a deliberately broken snippet to confirm Rule 62 (the banned inline-SVG-for-icon rule) fires.
Auto-bootstrapping a Symbols project — no more "use symbols-mcp" reminders
Once symbols-mcp is configured in your editor, drop project-level rule files so every editor auto-loads the framework rules on every chat:
# from your Symbols project root
npx -y @symbo.ls/mcp init-rulesWrites CLAUDE.md, .cursor/rules/symbols.md, .windsurfrules, .clinerules, and AGENTS.md — each tailored to its editor, all pointing at the symbols-mcp tools (get_project_context, get_project_rules, generate_component, audit_component, etc.). Idempotent; pass --force to overwrite or --only=cursor,claude to scope.
Combined with the MCP server's instructions field (auto-loaded on connect by every MCP-aware editor — Claude Code, Cursor, Windsurf, Cline, Continue, Roo, Zed, Goose, Gemini CLI, Antigravity, Cody), this means you never have to remind the agent to "use symbols-mcp" — the workflow is bootstrapped on first interaction.
Claude Code: enforcement hooks (installed by default)
Project-level rule files (CLAUDE.md, AGENTS.md, etc.) are best-effort — long contexts dilute them and the agent can drift. For Claude Code, init-rules also installs a hooks layer that the harness enforces directly:
Hook | Trigger | What it does |
| PreToolUse | BLOCKS Edit/Write on |
| UserPromptSubmit | Injects the MUST-DO sequence + frankability FA-rule cheatsheet on every turn when cwd is inside a Symbols project. Per-turn injection isn't diluted by long contexts the way CLAUDE.md is. |
| PostToolUse | After every JS edit inside a Symbols project, runs |
Files installed:
.claude/settings.json # wires the three hooks
.claude/hooks/symbols-mcp-require.sh # PreToolUse — block edit until rules loaded
.claude/hooks/symbols-mcp-reminder.sh # UserPromptSubmit — inject directive
.claude/hooks/symbols-mcp-audit.sh # PostToolUse — frank-audit + FA-rule checkSkip hooks: npx -y @symbo.ls/mcp init-rules --no-hooks.
Disable a single hook at runtime: SYMBOLS_MCP_REQUIRE_RULES=0, SYMBOLS_MCP_REMINDER=0, SYMBOLS_MCP_POST_AUDIT=0.
Hooks require bash and jq on PATH (already standard on macOS / most Linux distros). frank-audit is invoked via npx -y --no-install @symbo.ls/frank-audit — if not installed, the inline pattern check still runs.
See SETUP.md → Bootstrapping for the layered model and verification steps.
What about /symbols-audit?
The /symbols-audit slash command is Claude Code-only, but the underlying capability works in every MCP-aware editor — Cursor, Windsurf, Cline, Continue, Roo, Zed, Goose, Gemini CLI, Antigravity (Google), Cody, Claude.ai web, and any custom MCP client.
Three patterns:
Natural language (zero setup) — just say "Run a full Symbols audit on this project using symbols-mcp." The agent calls
get_project_context→audit_project(playbook) →bin/symbols-auditCLI → iterates fixes withaudit_component.Custom command — register a Cursor rule, Continue customCommand, Windsurf workflow, etc. for one-keystroke parity. Templates in SETUP.md.
Pure shell —
npx -y @symbo.ls/mcp symbols-audit ./symbolsworks from any terminal, no editor needed. Strict by default, exit 1 on findings.
Full setup guide
See SETUP.md for:
Per-editor configs: Claude Code · Claude Desktop · Claude.ai (web) · Cursor · Windsurf · Zed · Cline · Continue · Roo · Cody · Gemini CLI · Goose · Antigravity · generic clients
Local development: clone the repo, run from source,
.mcp.jsontemplateUsing
/symbols-audit& other tools in non-Claude-Code editors: natural language, custom commands per editor, shell fallback, sourcing the bundled venv directlyTransport modes: stdio (default) and SSE (for claude.ai web / remote clients)
Audit CLI: standalone
bin/symbols-auditfor CI / pre-commitUpdating and Troubleshooting (PATH issues, stale versions, missing tools)
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseAqualityDmaintenanceA comprehensive MCP server providing tools for AI agents to interact with code, including reading symbols, importing modules, replacing text, and sending OS notifications.Last updated38910MIT
- Alicense-qualityDmaintenanceAn MCP server that exposes the Symbols/DOMQL v3 AI assistant capabilities to any MCP-compatible platform. Enables generating components, pages, projects, and more from natural language, as well as searching documentation and reviewing code.Last updatedMIT
- Alicense-qualityAmaintenanceA production-ready MCP server that enables AI assistants to intelligently understand, analyze, edit, navigate, and review software projects with multi-workspace support, Git integration, and semantic search.Last updatedMIT
- Flicense-qualityBmaintenanceMCP server for AI DevTool workflow, exposing tools and resources for code review, repository chat, and repository operations.Last updated1
Related MCP Connectors
MCP server for AI agents to plan, verify, and deploy Cloudflare-native apps.
Official MCP server for Lovable, the AI-powered full-stack app builder.
An MCP server that gives your AI access to the source code and docs of all public github repos
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/symbo-ls/symbols-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server