MCP Server

Introduction

The Shuffle MCP server brings the Multi-AI Designer to your AI assistant. Describe the website you need, or give the URL of a website to redesign, and Shuffle generates designs with up to four AI models in parallel, so you can compare them side by side.

Every design is a regular Shuffle project. Open it in the Shuffle Editor to change content and styles visually, then export the code or publish it.

MCP (Model Context Protocol) is an open standard for connecting AI apps to external tools. Once you connect Shuffle, your assistant can create designs, check their progress, and give you links to preview and edit them.

Multi-AI Designer: one prompt, multiple designs

See it in action on the web. Now bring the same creative power to your favorite tools with MCP.

MCP Server

Before you start

• You need a Shuffle account. You sign in to it when you connect the server for the first time.
• Designs use your Shuffle AI usage allowance, the same as other AI features. See Limits & usage.
• Your AI app must support remote MCP servers (Streamable HTTP) with OAuth sign-in. All apps listed below do.

MCP Server

Server URL

Use this URL in every app:

https://shuffle.dev/mcp

The server uses the Streamable HTTP transport. You don't need an API key; you sign in with your Shuffle account instead.

MCP Server

Signing in

The first time your app uses the server, it opens a Shuffle page in your browser. Log in if needed, review the access request, and click Allow. You're then sent back to your app.

Important: the access request shows where you'll be sent back to, for example "claude.ai" or "an app running on this computer". The app name on that page is provided by the app itself, so only click Allow if you started the connection.

To disconnect, remove the Shuffle server from your app.

Connect your app

Claude Code

Run this command in your terminal:

claude mcp add --transport http shuffle https://shuffle.dev/mcp

Then start Claude Code, run /mcp, select shuffle and choose to authenticate. Your browser opens the Shuffle sign-in page.

Connect your app

Codex

With the Codex CLI installed, run these commands in your terminal:

codex mcp add shuffle --url https://shuffle.dev/mcp
codex mcp login shuffle

Follow the browser sign-in flow, log in to your Shuffle account and click Allow. The Codex CLI and IDE extension share the same MCP configuration.

Alternatively, add this to ~/.codex/config.toml, then run codex mcp login shuffle:

[mcp_servers.shuffle]
url = "https://shuffle.dev/mcp"

Start a new Codex session and run /mcp to check that Shuffle is connected. Then try: "Use Shuffle to design a landing page for my app."

See the official Codex MCP documentation for more configuration options.

Connect your app

Cursor

Add the server to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json in your project:

{
  "mcpServers": {
    "shuffle": {
      "url": "https://shuffle.dev/mcp"
    }
  }
}

Open Cursor Settings → MCP, find shuffle and click Login or Connect to sign in.

Connect your app

VS Code

Add the server to .vscode/mcp.json in your project, or run MCP: Add Server from the Command Palette and choose HTTP:

{
  "servers": {
    "shuffle": {
      "type": "http",
      "url": "https://shuffle.dev/mcp"
    }
  }
}

Start the server from the file or the MCP view, then follow the sign-in prompt. Use Copilot Chat in agent mode to work with the Shuffle tools.

Connect your app

Claude (web & desktop)

1. Open Settings → Connectors and choose Add custom connector.
2. Name it Shuffle and paste the server URL: https://shuffle.dev/mcp
3. Click Connect and sign in to Shuffle.
4. In a chat, make sure the Shuffle connector is enabled in the tools menu.

Connect your app

Other MCP clients

Any app that supports remote MCP servers with OAuth can connect. Add a server with the URL https://shuffle.dev/mcp and the HTTP (Streamable HTTP) transport. Sign-in details are discovered automatically.

If your app only supports local (stdio) servers, check whether it can connect to remote servers through a bridge such as mcp-remote.

Using the server

Make sure your assistant uses Shuffle

Your assistant decides on its own which tools to use. A request like "design me a landing page" could also be answered without Shuffle, for example by writing the code directly. To make sure Shuffle is used:

Mention Shuffle in your message

Start with "Use Shuffle to…" or add "with Shuffle". This works in every app.

Use the Shuffle commands

Shuffle provides two commands, design and redesign, that always use Shuffle. Apps show them under names based on the name you gave the server (shuffle in the setup steps above):

• Claude Code: /mcp__shuffle__design and /mcp__shuffle__redesign
• VS Code: /mcp.shuffle.design and /mcp.shuffle.redesign
• Other apps may list them in their attach or "+" menu.

The design command asks for a description of the website. The redesign command asks for the website URL and, optionally, what to change. Both accept an optional list of models to compare.

Enable Shuffle in the chat

In Claude, make sure the Shuffle connector is turned on in the chat's tools menu.

Using the server

Example prompts

Ask your assistant in plain language. For example:

• "Use Shuffle to design a landing page for a specialty coffee roastery in Berlin, with a menu, opening hours and table booking. Warm, earthy colors."
• "Redesign https://example.com with Shuffle. Make it modern and bold, and keep the existing sections."
• "Use Shuffle to create a SaaS homepage for a time-tracking app, but compare only Claude and Gemini."
• "Which AI models can Shuffle use?"
• "Show me the designs I created with Shuffle this week."

The more you describe (business, audience, sections, style, colors, tone), the better the results.

Using the server

How generation works

1. Your assistant starts a design session. Shuffle queues one design per AI model and replies right away.
2. Each model generates its design in the background. This usually takes a few minutes.
3. Your assistant checks progress and shares the links when the designs are ready.

Every design moves through these statuses:

• queued: waiting to start
• running: the model is generating the design
• succeeded: ready, with preview and editor links
• failed: something went wrong; the error explains why

Each finished design has an edit link that opens it in the Shuffle Editor and a preview link, and you can download its code. Designs are also saved as projects in your Shuffle account.

Using the server

Downloading the code

You can download the HTML code of any finished design as a ZIP file. Ask your assistant, for example "Download the Claude design" or "Give me the code of the Gemini version".

The download link works without signing in and expires after 15 minutes. If it has expired, ask your assistant for a new one.

Download into your project

Coding assistants that can run commands, such as Claude Code or Cursor, can download and unpack the design directly into your project. Ask for example: "Use Shuffle to design a landing page for my app, then download the Claude design into the ./site folder." Behind the scenes, the assistant runs a command like:

curl -L -o shuffle-design.zip "<download link>" && unzip shuffle-design.zip -d site

The ZIP contains a ready-to-use static website (public/index.html with its CSS, JavaScript and assets) and the source files in src/.

Using the server

Tools reference

Your assistant picks these tools automatically. This reference is useful if you build your own agent or want to know what happens behind the scenes.

create_design

Starts a design session with several AI models. Returns immediately with a session id.

• prompt (required): description of the website, 10–4000 characters. For redesigns, what to improve.
• mode: design (default) for a new website, or redesign to redesign the website at url.
• url: public http(s) URL of the website to redesign. Required in redesign mode.
• models: optional list of up to 4 model ids (see list_models). Defaults to the standard set of models.

get_design

Returns the status of a session and, for finished designs, the preview, editor and screenshot links.

• hash (required): the session id returned by create_design.
• wait_seconds: wait up to 25 seconds for progress before returning. The call returns as soon as a design changes status or all designs are finished.

download_design

Returns a download link for the HTML code (ZIP) of a finished design. The link works without signing in and expires after 15 minutes.

• hash (required): the session id returned by create_design.
• model: model id of the design to download. Optional when only one design in the session is finished.

list_designs

Lists the design sessions you created through the MCP server, newest first, 10 per page.

• page: page number, starting at 1.

list_models

Lists the AI models available in the Multi-AI Designer, with their ids.

Example result of get_design (shortened):

{
  "hash": "m-2A11cuK-hZx2",
  "mode": "design",
  "finished": true,
  "designs": [
    {
      "model": "claude-opus-5-5",
      "model_label": "Claude Opus 5.5",
      "status": "succeeded",
      "preview_url": "https://shuffle.dev/preview/…",
      "edit_url": "https://shuffle.dev/editor?project=…",
      "screenshot_url": "https://static.shuffle.dev/…"
    }
  ]
}

Using the server

Limits & usage

• Up to 4 AI models per design session.
• Up to 8 designs in progress at the same time. Wait for running designs to finish before starting more.
• Designs count toward your Shuffle AI usage allowance. When you reach the limit, new designs fail with a message until the limit resets.
• Trial accounts can generate a small number of designs. See pricing for plan details.
• Redesigns work only for public websites. Private, local and internal addresses are rejected.

Using the server

Privacy

• Your prompt, and for redesigns the website URL and a screenshot of that website, are sent to the AI models you use (for example Anthropic, OpenAI and Google) to generate the designs.
• Design sessions created through the MCP server are not shown in public galleries or featured examples. Anyone you share a design link with can open it.
• Shuffle receives only what your assistant sends to its tools, such as your design request. It does not receive your chat history.

Using the server

Troubleshooting

The app can't connect or keeps asking me to sign in

Check that the URL is exactly https://shuffle.dev/mcp and the transport is HTTP (Streamable HTTP), not SSE or stdio. Remove the server from your app, add it again, and sign in.

"Redirect URI is not allowed"

Your app uses a sign-in callback that Shuffle doesn't recognize yet. Apps that run on your computer and the apps listed above are supported. Contact us with the name of your app and we'll add it.

Designs stay "queued" or "running" for a long time

Generation usually takes a few minutes per model. If a design doesn't finish within 30 minutes, it's marked as failed. Ask your assistant to try again.

"You've reached the AI usage limit"

Your account's AI usage allowance is used up. It resets automatically; you can check your usage in your Shuffle dashboard.