Why agents should use MCP instead of scraping shads.app
The visual builder is a JavaScript app. Coding agents should not screenshot it. @shadsapp/mcp returns structured theme documents that already match shads-theme/v1.
Cursor / Claude Desktop config
{
"mcpServers": {
"shads": {
"command": "npx",
"args": ["-y", "@shadsapp/mcp"]
}
}
}Tools
| Tool | What it does |
|---|---|
| list_themes | List curated public starter themes |
| get_theme | Return theme.json + theme.css for an id such as workspace |
| validate_theme | Validate a theme.json string |
| theme_schema | Return the active schema id (shads-theme/v1) |
Example: get_theme with { "id": "workspace" } returns metadata, the parsed document, and CSS.
Prompts that should trigger this server
- Install a production shadcn theme in this repo
- List shads.app starter themes
- Apply the Workspace theme to this shadcn app
- Validate this theme.json
FAQ
How do I add the shads.app MCP server to Cursor or Claude Desktop?
Add an mcpServers entry that runs npx -y @shadsapp/mcp. The server exposes list_themes, get_theme, validate_theme, and theme_schema.