Connect your AI tool

You can connect betterdesign to an AI coding tool, so the AI can search the library and build from a screen you choose. It works through MCP (Model Context Protocol), the standard way AI tools connect to outside services.

When the AI fetches a screen it receives two things: the screen’s image, which it uses for layout, and the project’s design.md, a written description of that project’s colours, type, spacing and components.

What you need

• A paid plan. Connected AI tools are not available on the free plan.
• An API key, which you generate in Settings.
• An AI tool that supports remote MCP servers.

1. Generate an API key

1. Open Settings → API keys on betterdesign.ai.
2. Type a name that tells you where the key will be used, such as “Claude Code”.
3. Press Generate key and copy the key straight away.

Caution

The key is shown once. We store only a scrambled form of it and cannot show it again. If you lose it, revoke it and generate a new one.

You can have up to 5 active keys.

2. Connect your tool

Claude Code

This works in Claude Code in the terminal and in the Code tab of the Claude desktop app.

1. Run this inside Claude Code:

   /plugin install betterdesign-ai --marketplace the-betterlabs/betterdesign-mcp

2. Choose Install for you.

3. Paste your API key when Claude asks for it.

Then try:

/betterdesign-ai:find onboarding

Antigravity

1. Open ~/.gemini/config/mcp_config.json. In the app, this is under MCP Servers → Manage MCP Servers → View raw config.

2. Add a betterdesign entry inside mcpServers, with your own key:

   {
     "mcpServers": {
       "betterdesign": {
         "serverUrl": "https://betterdesign.ai/api/mcp",
         "headers": {
           "Authorization": "Bearer YOUR_API_KEY"
         }
       }
     }
   }

3. Refresh the MCP servers list, or restart Antigravity.

Antigravity needs the field to be called serverUrl. It ignores url.

Other tools

Any tool that supports remote MCP servers over HTTP can connect. Add a server with these two values:

Setting	Value
Address	https://betterdesign.ai/api/mcp
Header	Authorization: Bearer YOUR_API_KEY

Most tools, Cursor included, take this as a url and a headers object in their MCP settings file. Check your tool’s own MCP instructions for the file’s location.

3. Use it

Ask in plain words:

• “Find a pricing page on betterdesign.”
• “Show me dark mobile settings screens.”
• “Fetch number 2 and build it as a React component.”
• “How many betterdesign credits do I have left?”

The AI searches, shows you the matching screens, and asks which one you want. It then fetches that screen and builds from it in your project’s own stack.

The result follows the design’s visual direction. It is not a pixel copy.

Credits

• Searching is free.
• Fetching a screen uses 1 credit, from the same allowance as Copy to Figma.
• Fetching the same screen again in the same billing cycle is free, in any connected tool and on the site.
• If a screen’s project has no design.md yet, nothing is fetched and no credit is used.
• If you are out of credits, the fetch is refused and nothing is used. Your tool will tell you the date your credits reset.

Plans and credits explains the allowance and when it resets.

One key for each AI tool

A key connects to the first AI tool that uses it. After that it works in every app of that tool (for example Claude Code in the terminal and in the desktop app), but a different AI tool is refused and asked to use its own key.

• To use two tools, generate one key for each.
• To move a key to a different tool, press Release beside it in Settings → API keys. The key itself does not change.

Settings shows which tool each key is connected to.

Changing or revoking a key

Press Revoke beside a key in Settings → API keys to stop it working at once. Any tool still using it will be refused.

To give Claude Code a different key, run this, paste the new key, and start a new session:

/plugin configure betterdesign-ai@betterdesign-ai

In other tools, replace the key in the tool’s MCP settings file.

If something goes wrong

Message	What to do
Invalid or revoked API key	Generate a new key and give it to your tool as described above.
This API key is connected to another tool	Generate a separate key for this tool, or release the key in Settings.
This account is on the free plan	Upgrade to a paid plan. The same key then works.
Out of credits	Wait for the reset date shown in the message, or upgrade. Searching still works.
Too many requests	Wait a minute and try again.
The tools do not appear	Start a new session in your AI tool after connecting or changing the key.

For anything else, email support@betterdesign.ai.

What is shared

Your AI tool sends us your API key and either your search words or the id of the screen you chose. We keep a record of each request (which action, which screen, which AI tool and when) so credits can be counted. We do not receive your conversation with the AI, your code or your files, and we do not store your search words.