Install Better Design MCP in Devin

Windsurf is now Devin. Run npx better-design, or follow the Devin app steps below.

Install from the terminal

Adds Better Design without replacing your other servers.

terminal

npx better-design

Or configure Devin manually

Use the Devin app or paste the settings below when you need to inspect every value.

Install from the Devin app

1
Open Settings
Press Cmd , (on Windows, Ctrl ,). Devin opens a Devin Settings tab with a sidebar.
2
Open Devin Local, Configuration
In the sidebar, under Devin Local, choose Configuration. Scroll to the MCP servers block.
3
Open the MCP marketplace
Select Open Devin MCP marketplace. Better Design is not in the catalog, so select Add custom MCP at the top right.
4
Paste the block and save
Devin opens ~/.config/devin/mcp_config.json in the editor (on Windows, %APPDATA%\devin\mcp_config.json). Merge the JSON below into it and save.
5
Verify the server
In the marketplace sidebar, under MCPs, choose Installed. better-design shows Connected. From a terminal, devin mcp get better-design shows the same entry.
6
Still on the legacy Cascade agent?
Cascade reads ~/.codeium/windsurf/mcp_config.json. In that file, name the URL field serverUrl and leave out transport.

Need more detail? Read the official Devin MCP documentation.

Config

json

{
  "mcpServers": {
    "better-design": {
      "url": "https://better-design.com/api/mcp",
      "transport": "http",
      "headers": {
        "Authorization": "Bearer <YOUR_API_KEY>",
        "X-Better-Design-Client": "devin"
      }
    }
  }
}