Connecting Miro MCP to AI Coding Tools

📘

This is a beta release of our MCP: sign up at https://miro.com/ai/mcp/.

It is intended for evaluation and feedback purposes. The feature set and user experience may change in future releases.

This guide shows examples of how to connect to Miro MCP based on the AI Coding tool you are planning to work with. The Miro OAuth flow will be the same, but each tool may have a slightly different UI.

📘

The UI of each AI Coding Tool on this page may have changed recently, so please use this as a general guide. For most accurate information, see the AI Coding Tool's documentation on how to configure MCP Server.

Cursor

This example is with Cursor, but it should work the same or very similar in your AI tool of choice. The main difference will be where to add in the MCP configuration. The auth steps after that should be the same.

Go to Cursor settings -> Cursor Settings -> MCP -> Add a Custom MCP Server and add in the following JSON:

{
  "mcpServers": {
    "miro-mcp": {
      "url": "https://mcp.miro.com/", 
      "disabled": false,
      "autoApprove": []
    }
  }
}

Click on the authenticate button. This should open a new window for the Miro OAuth flow (see below). See OAuth details in previous guide.

You should see that the MCP Server is enabled and should see that tools and prompts are available, as shown below.

That's it! You're ready to start generating diagrams and next level apps with Miro MCP!

Claude Code

Watch the video below to see how to use Miro's MCP Server with Claude Code.

1. Login to Claude Code with claude command.
2. Next, use claude mcp add --transport http miro https://mcp.miro.com to add the Miro MCP into Claude Code.
3. From there, you can use Miro MCP prompts by running: /miro-mcp:code_explain_on_board

Lovable

1. Log into lovable.dev.
2. Click on your profile in the top right (make sure you're logged into an Enterprise or Business account).
3. Click on settings -> integrations.
4. From there you will need to click on New Custom MCP Server
   1. Note: (by the time you're reading this - Miro may already be a featured server within Lovable, if so use that flow instead).
5. Give it a name and add https://mcp.miro.com as the server URL.
6. This will open the Miro OAuth flow. For more details on the OAuth flow, refer to this page.
7. Once you've connected, you should see something like this (UI may have changed by the time you read this):

🎉 That's it! You've now connected Miro MCP to Lovable!

✨You can prompt it something like "build me a landing page based on the content of this board: ".

❤️ Now you can start using your content inside Miro to build prototypes in Lovable, just make sure to include the board you want to reference in your prompt!

VSCode and GitHub Copilot

Watch the video below for details - written instructions also provided.

1. Open the command palette with >
2. Select "Add MCP Server", and then "HTTP"
3. Enter in the URL: https://mcp.miro.com/
4. Select either Global or Workspace
5. Open the Miro OAuth flow, install the app on the team of your choice
6. use /to start a prompt, and find the Miro MCP prompt code_create_from_board and add in a board URL like https://miro.com/app/board/uX1234567/ and hit enter.
7. That's it!

Gemini CLI

Watch the video below:

Windsurf

1. Go to Windsurf settings -> Windsurf Settings -> Cascade -> Manage MCPs -> Configure and then add in the following JSON:

{
  "mcpServers": {
    "miro-mcp": {
      "url": "https://mcp.miro.com/", 
      "disabled": false,
      "autoApprove": []
    }
  }
}

2. Go through the Miro OAuth flow and add the MCP app on the team of your choice.
3. Start prompting Windsurf to use Miro MCP, we recommend code_create_from_boardadd in a board URL like https://miro.com/app/board/uX1234567/ and hit enter.