Dot MCP
Connect your AI agent to Dot once. It can then search the catalog, add components to your project and customize them, running on your own AI plan. Free with a Dot account; Pro components need Pro.
Works with Cursor · Claude Code · VS Code · Windsurf · Claude Desktop · Gemini CLI · Codex · Cline
1
Connect your agent
Pick your agent, create a token (it's filled into the snippet), and paste it where shown.
~/.cursor/mcp.json (or .cursor/mcp.json in a project)
{
"mcpServers": {
"dot": {
"url": "https://YOUR_DOT_SITE/api/mcp",
"headers": {
"Authorization": "Bearer YOUR_DOT_TOKEN"
}
}
}
}Sign in (free) to get a token.Cursor docs ↗
2
Ask your agent
Talk to it in plain words, for example:
- “Use Dot MCP to add Blur Reveal Text as my hero heading, with a slower stagger.”
- “Find a Dot preloader and add it to my landing page.”
3
What your agent gets
Tools it calls on its own:
search_componentsFinds components by keyword, category or free/Proget_componentFull source, props, dependencies and file pathget_install_commandThe npx dotui command that adds a componentlist_categoriesEvery category and how many components it has
Ready-made prompts, listed as commands in agents that support MCP prompts:
customize_componentChange a component in your project: timing, colors, layoutadd_componentAdd a component and use it where you say
Good to know
- Your token is yours and stays in your agent's config. Revoke it any time in API tokens.
- Dot never runs AI for you: your agent does the work on your own model and plan.
- Free components work on any account. Pro components need a Pro plan, through MCP too.
- If your agent only runs local MCP servers, use the bridge in the dotui CLI after
npx dotui login:
{
"mcpServers": {
"dot": { "command": "npx", "args": ["-y", "dotui", "mcp"] }
}
}