Getting Started
MCP Server
Add one URL to Claude Code, Cursor or VS Code and your assistant can read Sabil UI's rules, components, tokens and motion patterns on demand. No install, no API key.
Server URL#
https://ui.muttaqinsabilul.my.id/mcpRemote MCP over Streamable HTTP. It reads the same files as this site, so it is always up to date. Prefer no MCP? Point your assistant to /llms.txt or the AI rules instead.
Setup#
Claude Code
Run once in your terminal. Add --scope project to share it with your team through .mcp.json.
claude mcp add --transport http sabil-ui https://ui.muttaqinsabilul.my.id/mcpCursor
Add to .cursor/mcp.json in your project, or ~/.cursor/mcp.json for every project.
{ "mcpServers": { "sabil-ui": { "url": "https://ui.muttaqinsabilul.my.id/mcp" } }}VS Code
Add to .vscode/mcp.json, then click Start above the server. Works with GitHub Copilot in agent mode.
{ "servers": { "sabil-ui": { "type": "http", "url": "https://ui.muttaqinsabilul.my.id/mcp" } }}Claude Desktop & claude.ai
Settings → Connectors → Add custom connector. Name it Sabil UI and paste the URL.
https://ui.muttaqinsabilul.my.id/mcpTools#
| get_rules | Design rules to follow. Assistants call this first. |
| list_components | Every component with a one-line description. |
| get_component | Import line and example for one component; detail "full" adds its source and all examples. |
| get_component_source | Files to write into a project, with npm and internal dependencies. |
| get_tokens | All design tokens as W3C Design Tokens JSON. |
| get_setup | Project setup and the foundation CSS. |
| get_motion | Motion foundations, or one of 16 animation patterns with code. |
| get_html_edition | The plain HTML, CSS & JS edition. |
| search_docs | Find components and guides by keyword. |
Try it#
After adding the server, ask your assistant:
- Build a pricing page with Sabil UI.
- Add a Sabil UI dialog to edit the user profile in this project.
- Which Sabil UI component should I use for picking a date range?
- Animate this list with the Sabil UI stagger pattern.