Grok Bot MCP - Add a Custom Design MCP Server

How do I connect MiroMiro to Grok Bot?

Sign in once. No API key to copy, nothing to install, and 300 free credits a month.

1Connectabout two minutes

Add MiroMiro to Grok Bot

Message to your bot

Add a custom MCP server called miromiro at https://miromiro.app/mcp
- Setup: standard MCP over HTTP with OAuth. Post the Authorize card and I will approve it.
Once you are in, list the MiroMiro tools you can call.

1 Ask your bot to add it
2 Confirm and authorize
3 Check the tools are there
4 Ask in plain language

Grok Bot signs in with a Cursor account and runs on a cloud computer, so it only reaches servers on the public internet. MiroMiro’s is one. Servers in your Cursor settings do not carry over: add MiroMiro in Grok Bot itself.

2Ask MiroMiro connected

Then just ask Grok Bot

1

Ask your bot to add it

Send the message in a chat with your bot. Say “custom MCP server”, or it may look for a catalog plugin instead. Grok Bot’s settings have no field for a server URL.

2

Confirm and authorize

The bot shows the name and URL. Confirm, then press Authorize on the card it posts and sign in to MiroMiro. A free account includes 300 credits a month, no card.

3

Check the tools are there

Open Settings, then Plugins, then Yours. MiroMiro should be listed and switched on.

4

Ask in plain language

Name a website and what you want from it. Grok Bot calls the right tool on its own and works with what comes back.

What it does

Ask Grok Bot for a website. It comes back with the real thing.

Three things people ask for most. Pick one to watch it happen.

Prompts

What can I ask Grok Bot for?

Four requests to start from. Copy one, swap in the site you care about.

Rebuild

Rebuild a section

“Rebuild the features section of notion.com as a Tailwind component and save the file.”

extract_code25 credits

Brand

Keep a brand kit current

“Read our homepage’s brand colors, fonts and logo and update the brand kit document.”

extract_brand15 credits

Compare

Watch a competitor

“Extract the design tokens of rival.com and tell me what changed since last month.”

extract_design_tokens10 credits

Assets

Collect before a migration

“Collect every image, icon and font file on the old site before we move it.”

extract_assets1 credit

Why connect it

Without it, Grok Bot guesses

A screenshot holds pixels, not values. Same request, two results.

From a screenshot

Brand color: #3b82f6
Font: a serif, roughly
Heading: 48px

With MiroMiro connected

Brand color: #5e6ad2
Font: Inter Variable
Heading: 56px

Included

Nine tools Grok Bot can call

You never name them. Grok Bot picks the right one from what you ask.

What is the MiroMiro MCP server?

MCP is the standard way to give an AI agent new tools. MiroMiro’s server gives Grok Bot nine of them, each one reading a live website and returning its real values: the code of a section, the brand, the design tokens, the files.

It is one URL. Grok Bot discovers the tools when it connects, and there is nothing to keep up to date on your side.

More about the MCP server

Name: MiroMiro
URL: https://miromiro.app/mcp
Type: Remote MCP server (Streamable HTTP)
Sign-in: OAuth, found automatically. API keys also work.
Tools: Nine, discovered on connect

extract_code25 credits

A section as code, or an Elementor / Shopify file

extract_brand15 credits

Color roles, palette, fonts and logo

extract_design_tokens10 credits

Every color, size, spacing and shadow

extract_fonts5 credits

Font families and their files

extract_lottie3 credits

Lottie animation files

extract_assets1 credit

Every image on the page

extract_svgs1 credit

SVG icons as paste-ready code

extract_videos1 credit

Videos the page declares

extract_audio1 credit

Audio files the page declares

Options

Which way should I connect Grok Bot?

The sign-in suits almost everyone. The others are there when you need a key.

WayHowAPI keyBest for

Sign-in Recommended

Ask your bot to add the custom MCP server, then press Authorize and sign in.

No key

Everyone using Grok Bot

API key

Tell the bot to send your MiroMiro key as an Authorization: Bearer header. It stores the key on the server entry.

Key needed

Build machines and shared team setups

REST API

Call the same nine tools as GET endpoints from your own code.

Key needed

Scripts, backends and CI, with no agent involved

Good to know

What it reads, and where it stops

Public URLs

Any public page

Whatever a visitor without an account can open. No pages behind a login, no localhost.

8 named sections

Sections by name

Hero, header, footer, pricing, features, testimonials, FAQ or CTA. Every result lists the page’s other sections.

No extra cost

JavaScript sites

Read as HTML and CSS first. When a page needs its scripts, it is re-read in a real browser automatically.

Both themes

Light and dark

A site with a dark variant returns its light version by default. Ask for the dark one and you get that.

0 credits

Repeats are free

Results are kept for 24 hours. Asking again for the same page in that time spends nothing.

0 credits

Failures are free

A site that blocks the request or times out costs no credits. You pay for results only.

FAQ

Questions about MiroMiro in Grok Bot

Can Grok Bot clone a website?

Not well on its own: from a screenshot or the page text it estimates the colors, fonts and spacing. With MiroMiro connected, Grok Bot reads the live page’s real CSS and rebuilds one section at a time as code, with the true values. It is a section you own and restyle, not a pixel copy of a whole site, and behavior such as menus and carousels is not carried over.

Does Grok Bot support MCP servers?

Yes. It connects to MCP servers reachable over the public internet, added by asking the bot or from its plugin marketplace. It cannot reach a server running on your own machine at a localhost address.

Do I need an API key?

No. The bot posts an Authorize card and you sign in to MiroMiro through the browser. If your team prefers keys, tell the bot to send your MiroMiro key as a bearer header instead.

I already added MiroMiro in Cursor. Is it in Grok Bot too?

No. Grok Bot uses your Cursor account, but servers in Cursor’s settings or in ~/.cursor/mcp.json stay in Cursor. Add MiroMiro again in Grok Bot.

Grok Bot does not show the MiroMiro tools. What should I check?

Open Settings, then Plugins, then Yours and check that MiroMiro is listed and on. If it says “Disabled by team admin”, your team’s MCP policy blocks it and an admin has to allow it. If the sign-in window never opened, remove MiroMiro and add it again, then start a new conversation: most clients only load their tools when one begins.

Does it work on sites built with JavaScript?

Yes. MiroMiro reads the page’s HTML and CSS first, which is enough for most sites. When a page only draws itself in the browser, MiroMiro re-reads it in a real browser that runs the page’s scripts, automatically and at no extra cost. Your agent can also ask for the browser up front for 5 extra credits, on any plan.

Which formats can it return?

A section comes back as Tailwind, HTML and CSS, React, Vue, an Elementor template or a Shopify section. Design tokens come back as JSON, CSS variables, a Tailwind config or a W3C design tokens file.

What does it cost?

Connecting is free, and a free account includes 300 credits every month with no card. Each tool call spends credits: 1 for images or SVG icons, 15 for a brand kit, 25 for a section as code. Repeat calls within 24 hours and failed calls are free.

What happens when I run out of credits?

Grok Bot tells you the monthly credits are used up and the calls stop until they reset, or until you add credits or a plan on the pricing page. Nothing is charged on a free account, ever.

Can it read pages behind a login?

No. It reads public pages the way a visitor without an account would see them. Pages that need a sign-in, and addresses on your own machine such as localhost, are out of reach.