Nasaq MCP server
Teach your AI assistant Nasaq. It reads every component manual, the design foundations and the tokens, then writes UI for React, shadcn, Vue 3, Laravel Blade or HTML + Alpine.js the way Nasaq expects.
https://mcp.nasaqui.com/mcp390 components12 foundations docs230 design tokensStreamable HTTP · v0.3.1
Connect your client
Run once in your terminal.
claude mcp add --transport http nasaq https://mcp.nasaqui.com/mcp
Settings → Connectors → Add custom connector, then paste the URL. Works on claude.ai too.
https://mcp.nasaqui.com/mcp
Add to ~/.cursor/mcp.json or .cursor/mcp.json in your project.
{
"mcpServers": {
"nasaq": {
"url": "https://mcp.nasaqui.com/mcp"
}
}
}Add to .vscode/mcp.json, then start the server from the MCP view.
{
"servers": {
"nasaq": {
"type": "http",
"url": "https://mcp.nasaqui.com/mcp"
}
}
}Add to ~/.codeium/windsurf/mcp_config.json.
{
"mcpServers": {
"nasaq": {
"serverUrl": "https://mcp.nasaqui.com/mcp"
}
}
}Runs the same server locally from npm. Use it as the command in any MCP client.
npx -y @fadymondy/nasaq-mcp
Tools
Six read-only tools. Your assistant calls them on its own when you ask for UI.
list_componentsEvery component with its group and one-line summary.search_componentsRanks components for a need described in plain words.get_componentA component's manual: props, examples, accessibility and RTL rules, plus its source per stack.get_foundationThe design rules behind the components: colour roles, type, spacing, motion and more.list_tokensThe --nq-* design tokens: colours, spacing, radius and type sizes.get_setupHow to install Nasaq for React, shadcn, Vue 3, Laravel Blade or HTML + Alpine.js.
How your assistant uses it
- get_setup once, for the stack you are on.
- search_components or list_components to find the right piece.
- get_component for its manual, then it writes code with only the documented props and tokens.