Guided setup
Your agent.
A shared design contract.
Connect to the public read-only MCP to give your coding agent access to design rules. No project account or provider key is required.
Your coding client may have its own subscription or model costs. Just exploring? Try the no-install demo.
01 / Connect
Choose your client
Add this entry to .cursor/mcp.json in your project, or ~/.cursor/mcp.json for personal use. Merge it with existing servers; do not replace other configuration. Save and restart Cursor.
{
"mcpServers": {
"style-constitution": {
"url": "https://astra-fable-styleguide-mcp.vercel.app/mcp"
}
}
}Configuration follows Cursor's official MCP documentation. This is a setup guide, not a claim that every client version has been tested.
02 / Confirm in your client
Look for eight tools
Open your client's MCP tools list. Enable the server if needed and check for get_style_manifest, get_component_rules and check_style_compliance among the eight public tools.
This page cannot see your client's connection. Tool visibility and a successful call in your client are the confirmation.
Try this first prompt
Read the Style Constitution manifest and button/dialog rules. Cite their rule IDs. Separate declared rules from anything you have actually measured. Do not edit files yet.
The public MCP supplies rules and checks submitted values. It cannot inspect your local browser or edit your files.
03 / Optional developer workflow
Check your own supported interface
The separate experimental CLI runs Chromium locally. It supports trusted static HTML/CSS/JavaScript journeys and trusted local React/Vite production previews with configured typography, spacing, contrast and overflow checks.
Arbitrary frameworks, custom comboboxes, shadow DOM and complete accessibility coverage are outside its current scope. Install the verified release archive with Node 22.12+, then install Chromium. Git and pnpm 10.34.5 are needed only when building from source. The package is not on npm.
Use Local Studio to select a project, inspect findings and review supported corrections. Author and pin your team's constitution, recheck after a repair, and undo when needed. React/Vite corrections require explicitly mapped literal CSS and a trusted rebuild.
If something doesn't connect
I opened /mcp in my browser
That address is a protocol endpoint, not a webpage. A browser request is not an MCP connection test. Add the URL inside a client that supports Streamable HTTP, then check its tool list.
The tools aren't appearing
Confirm the exact endpoint, reload the client's MCP configuration, and inspect its connection log. Organization policies can restrict servers. Keep existing client security controls enabled. If it still fails, share the error text after removing credentials or private paths.
Can I check a website by pasting its URL?
Not with this product experience. The interactive demo checks its own sample. Your project's checks run through the separate local verifier and require a supported configuration.