MCP server
Your agent, wired straight into the catalog
Search hand-crafted components and pull real code into a prompt — no copy-pasting through a browser.
Just six steps
Start with a free trial
MCP is included in every paid plan and in the free 3-day trial, with no card. The trial clock starts at your agent’s first unlock.
Start free trialPick your AI tool
The next steps change to match the tool you choose. Not sure? The CLI sets up every agent it finds.
Run the installer
It finds the agents on this machine and sets up the ones you pick: Claude Code, Codex, Cursor, VS Code, Windsurf, Devin Desktop, OpenCode and Antigravity.
terminalnpx noslopui@latest init
Add the server
Run this in your terminal. `--scope user` makes it available in every project.
terminalclaude mcp add --transport http --scope user noslopui https://noslopui.com/api/mcp
Headless or CI? Use a key instead
There’s no browser to sign in with, so the key goes in the config. Create one on your account page (it’s shown once) and keep that config out of anything you commit.
terminalclaude mcp add --transport http --scope user noslopui https://noslopui.com/api/mcp --header "Authorization: Bearer <your API key>"
Add a custom connector
In Claude, open Settings → Connectors and choose Add custom connector. Name it noslopUI and paste this URL.
https://noslopui.com/api/mcp
Add the server
Run this in your terminal. It adds noslopUI to your user config, ~/.codex/config.toml.
terminalcodex mcp add noslopui --url https://noslopui.com/api/mcp
Headless or CI? Use a key instead
There’s no browser to sign in with, so the key goes in the config. Create one on your account page (it’s shown once) and keep that config out of anything you commit.
~/.codex/config.toml[mcp_servers.noslopui] url = "https://noslopui.com/api/mcp" http_headers = { "Authorization" = "Bearer <your API key>" }Add the server
Add noslopUI to your global Cursor config. Create the file if it doesn’t exist.
~/.cursor/mcp.json{ "mcpServers": { "noslopui": { "url": "https://noslopui.com/api/mcp" } } }Headless or CI? Use a key instead
There’s no browser to sign in with, so the key goes in the config. Create one on your account page (it’s shown once) and keep that config out of anything you commit.
~/.cursor/mcp.json{ "mcpServers": { "noslopui": { "url": "https://noslopui.com/api/mcp", "headers": { "Authorization": "Bearer <your API key>" } } } }Add the server
In VS Code, run MCP: Open User Configuration from the Command Palette and add noslopUI.
mcp.json (user){ "servers": { "noslopui": { "type": "http", "url": "https://noslopui.com/api/mcp" } } }Headless or CI? Use a key instead
There’s no browser to sign in with, so the key goes in the config. Create one on your account page (it’s shown once) and keep that config out of anything you commit.
mcp.json (user){ "servers": { "noslopui": { "type": "http", "url": "https://noslopui.com/api/mcp", "headers": { "Authorization": "Bearer <your API key>" } } } }Add the server
Windsurf is Devin Desktop now, and its default agent reads the Devin config: ~/.config/devin/mcp_config.json, or %APPDATA%\devin\mcp_config.json on Windows.
mcp_config.json{ "mcpServers": { "noslopui": { "url": "https://noslopui.com/api/mcp", "transport": "http" } } }Headless or CI? Use a key instead
There’s no browser to sign in with, so the key goes in the config. Create one on your account page (it’s shown once) and keep that config out of anything you commit.
mcp_config.json{ "mcpServers": { "noslopui": { "url": "https://noslopui.com/api/mcp", "transport": "http", "headers": { "Authorization": "Bearer <your API key>" } } } }Add a custom connector
In Lovable, open chat connectors, choose to add a custom MCP server, and paste this URL.
https://noslopui.com/api/mcp
Add a remote server
Any client that speaks MCP over HTTP works. Add a server named noslopui with this URL.
https://noslopui.com/api/mcp
- Transport
- Streamable HTTP
- Auth
- OAuth 2.1, or a Bearer key
- Protocol version
- 2026-07-28, and 2025 revisions
Approve it in your browser
The installer opens noslopui.com with a short code. Check it matches the one in your terminal, then approve. Each agent gets its own key, named after this machine, so you can revoke one without touching the others.
Open the MCP menu
Start a new Claude Code session, open the MCP menu and select noslopui.
/mcp
Connect
Click Add, then Connect next to noslopUI.
Sign in
Codex opens noslopui.com in your browser. Approve the connection.
terminalcodex mcp login noslopui
Open MCP settings
Open Cursor Settings, find noslopui in the MCP list and switch it on.
Start it
Save the file and choose Start above the noslopui entry.
Sign in
Run this and approve the connection on noslopui.com when the browser opens.
terminaldevin mcp login noslopui
Sign in
Lovable opens noslopui.com in a popup. Approve the connection.
Sign in
Most clients start the sign-in themselves when the server asks for it: OpenCode with opencode mcp auth noslopui, Antigravity from its MCP store. If yours can’t, send a key as an Authorization: Bearer header.
Restart your agent
Agents read their MCP config when they start. Restart the ones you set up and noslopUI is in their tool list.
Sign in
Choose Authenticate. Your browser opens noslopui.com. Approve the connection and go back to Claude Code.
Sign in
A browser window opens noslopui.com. Approve the connection and the noslopUI tools appear in Claude.
Check it
Start a Codex session and open the MCP list. noslopui should be there with its tools.
/mcp
Sign in
Cursor marks noslopui as needing sign-in. Start it from there, approve the connection on noslopui.com, and its tools appear.
Sign in
VS Code asks to sign in to noslopUI. Allow it and approve the connection on noslopui.com, then tick noslopui in Copilot Chat’s tools, in Agent mode.
Open a new tab
Start a new agent tab so it loads the server. Still on the older Cascade agent? It reads ~/.codeium/windsurf/mcp_config.json and wants "serverUrl" in place of "url".
Build with it
Ask Lovable for a page and say to use noslopUI. It picks a design system, then searches the catalog for components to fit.
Check the tools
Your client should list nine noslopui tools. Antigravity and Windsurf’s Cascade agent want "serverUrl" in place of "url" in their config.
You’re set
The installer added the noslopUI Skill too, so a plain request like “build me a landing page using noslopUI” goes through the catalog. Run
View the Skillnpx noslopui doctorany time to check the setup.You’re set
The rules come with the server on every connection. For the full step-by-step, add the noslopUI Skill (optional, recommended): hand it a collection you curated and it builds from your picks, or give it a prompt and it shortlists design systems for you to pick from.
View the Skillterminalnpx noslopui skill --agent claude-code
You’re set
The rules come with the server on every connection. If your client takes skills, the full step-by-step is on the Skill page: hand it a collection you curated and it builds from your picks, or give it a prompt and it shortlists design systems for you to pick from.
View the SkillYou’re set
The rules come with the server on every connection. For the full step-by-step, add the noslopUI Skill (optional, recommended): hand it a collection you curated and it builds from your picks, or give it a prompt and it shortlists design systems for you to pick from.
View the Skillterminalnpx noslopui skill --agent codex
You’re set
The rules come with the server on every connection. For the full step-by-step, add the noslopUI Skill (optional, recommended): hand it a collection you curated and it builds from your picks, or give it a prompt and it shortlists design systems for you to pick from.
View the Skillterminalnpx noslopui skill --agent cursor
You’re set
The rules come with the server on every connection. For the full step-by-step, add the noslopUI Skill (optional, recommended): hand it a collection you curated and it builds from your picks, or give it a prompt and it shortlists design systems for you to pick from.
View the Skillterminalnpx noslopui skill --agent vscode
You’re set
The rules come with the server on every connection. For the full step-by-step, add the noslopUI Skill (optional, recommended): hand it a collection you curated and it builds from your picks, or give it a prompt and it shortlists design systems for you to pick from.
View the Skillterminalnpx noslopui skill --agent devin
You’re set
The rules come with the server on every connection, so Lovable follows them without a skill: one design system, restyled everywhere, with your brand in its tokens.
You’re set
The rules come with the server on every connection. If your client takes skills, the full step-by-step is on the Skill page: hand it a collection you curated and it builds from your picks, or give it a prompt and it shortlists design systems for you to pick from.
View the Skill
Tools
What your agent can call
search_components
Free-text plus filters — section and ANDed tags. Everything is published as React/TSX and converts to any stack. Results carry their tags.
Free
get_component
Public metadata — name, description, dependencies, preview/detail URLs.
Free
get_component_code
Real source (tsx/html/vue, whichever formats are published).
Pro or trial
get_component_prompt
The code wrapped in a ready-to-paste prompt.
Pro or trial
search_design_systems
Search and tag-filter the Design Systems. Call it bare to get every system plus availableTags, the whole filterable vocabulary. Results carry tags, token summary and a preview URL — enough to shortlist without a second call.
Free
get_design_system
Public metadata plus ungated token summary (colors/fonts/radius).
Free
get_design_system_file
The full DESIGN.md — tokens plus intent prose, ready to apply consistently.
Pro or trial
list_collections
Your saved collections with item counts — find a list's id/name before calling get_collection.
Free
get_collection
Every item in one collection, each tagged by kind so your agent knows which one is the design system - hand it the exact set you curated instead of it guessing.
Free
Questions
Before you plug it in
Do I need an account?
Yes, a free one — every call runs as your account, whether your agent signed in or uses a key. Search, metadata and your collections are free on every account. Code, prompts and DESIGN.md files need a paid plan or the free 3-day trial, no card.
What happens when I call get_component_code?
It returns every published format for that item. It needs a paid plan or your free 3-day trial, and if the trial hasn't started yet, that first call starts it. Same access as unlocking code on the site.
What does the CLI change on my machine?
It adds one noslopui entry to each agent you pick, in that agent’s user-level config, and copies the file first. It never touches another server’s entry, never writes to a project config, and stops if a config doesn’t parse rather than overwrite it. The source is public at github.com/noslopUI/cli.
Sign in or API key?
Sign in wherever you can: nothing to copy, and each connection shows up on your account page to disconnect. Use a key for headless runs and CI, where there’s no browser. The CLI writes a key for you, one per agent, named after the machine.
Which clients work?
Any MCP client that connects over HTTP. The chips above cover the common ones and the CLI sets up eight of them for you; MCP has what any other client needs.
What happens when my trial ends?
The three unlock tools return a clear error pointing to /pricing, worded for your agent to pass on. Search, metadata and your collections keep working on every account.
Is the code identical to what I’d copy from the website?
Yes — same code_snippets rows, same formats, same source of truth. The MCP tools and the website’s copy button read from the same place.