Caramell MCP

Bring your designs straight into your IDE

Get API Key View Setup Guide

Claude Code

Claude Desktop

Cursor

Windsurf

VS Code

ChatGPT

Antigravity

Claude Code

Claude Desktop

Cursor

Windsurf

VS Code

ChatGPT

Antigravity

Claude Code

Claude Desktop

Cursor

Windsurf

VS Code

ChatGPT

Antigravity

Claude Code

Claude Desktop

Cursor

Windsurf

VS Code

ChatGPT

Antigravity

How It Works

From design to code in three simple steps

Create on Caramell

Design your landing page on caramell

Connect MCP

Add Caramell MCP to your AI coding tool with your API key.

Pull & Integrate

Fetch your designs and let AI know

Available Tools

Two simple tools to access your Caramell projects

list_projects

Get your recent Caramell projects

Input:{ limit?: number }

Output:List of projects with id, name, createdAt

view_project

Get the code of a specific project

Input:{ projectId: "..." }

Output:Project name, HTML code, preview URL

Setup Guide

Get started in under a minute

Get your API Key

Go to Settings > MCP and copy your API key.

Add to your MCP config

Add this to your MCP settings file:

{
  "mcpServers": {
    "caramell": {
      "command": "npx",
      "args": ["-y", "caramell-mcp-server"],
      "env": {
        "CARAMELL_API_KEY": "your-api-key"
      }
    }
  }
}

Start using

Ask your AI assistant to list or view your Caramell projects:

"Show me my Caramell projects"

"Get the code from my latest Caramell landing page"

"Convert my Caramell design to React components"

Get Started