Popmelt

https://popmelt.com/guides
Admin
Popmelt is a design tool that equips AI assistants with taste models to make better design decisions...
Tokens:21,575
Snippets:261
Trust Score:5.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Build Complete Pages - Example Prompt

Source: https://popmelt.com/guides/integrations/claude

A prompt example for building a complete page with Popmelt, listing sections like hero, feature cards, pricing table, and footer.

```markdown
- Hero section with headline and CTA
- 3 feature cards
- Pricing table
- Footer
```

--------------------------------

### connect

Source: https://popmelt.com/guides/mcp/tools/connect

Call connect at session start to confirm connection status and receive setup guidance for your client. Accepts optional parameters to specify the client name and active model.

```APIDOC
## connect

### Description
Get account status and active model guidance. Call connect at session start to confirm connection status and receive setup guidance for your client.

### Parameters

#### Optional Parameters
- **clientTool** (string) - Optional - Client name (e.g. "Cursor", "Claude Code").
- **name** (string) - Optional - Optional model name to treat as active in guidance.
- **tasteName** (string) - Optional - Legacy alias for name.

### Examples
- `connect`
- `connect { clientTool: "Cursor" }`
- `connect { clientTool: "Claude", name: "Rabbit" }`

### Related
- `discover`
- `reference`
- `create`
- `update`
- `sample`
```

--------------------------------

### Polling response: success with secret_key and setup commands

Source: https://popmelt.com/guides/integrations/autonomous-registration

Successful response containing the secret_key (shown only once), key_preview, setup commands for various clients, access_token, token_type, and expires_in. The secret_key must be stored securely as it cannot be retrieved later.

```json
{
  "secret_key": "abc123def456...",
  "key_preview": "abc123de...f456",
  "setup": {
    "claude_code": "claude mcp add popmelt https://mcp.popmelt.com --header \"Authorization: Bearer abc123def456...\"",
    "codex_cli": "[mcp_servers.popmelt]\nurl = \"https://mcp.popmelt.com\"\nhttp_headers = { \"Authorization\" = \"Bearer abc123def456...\" }",
    "codex_cli_env": "[mcp_servers.popmelt]\nurl = \"https://mcp.popmelt.com\"\nbearer_token_env_var = \"POPMELT_SECRET_KEY\"",
    "gemini_cli": "{ \"mcpServers\": { \"popmelt\": { ... } } }",
    "gemini_cli_env": "{ \"mcpServers\": { \"popmelt\": { ... } } }",
    "env_var": "export POPMELT_SECRET_KEY=\"abc123def456...\""
  },
  "access_token": "eyJhbGciOiJIUzI1NiIs...",
  "token_type": "Bearer",
  "expires_in": 3600
}

```

--------------------------------

### Claude Code setup command

Source: https://popmelt.com/guides/integrations/autonomous-registration

Run this command from setup.claude_code to add the Popmelt MCP server to Claude Code. Verify with 'claude mcp list'.

```bash
claude mcp add popmelt https://mcp.popmelt.com --header "Authorization: Bearer YOUR_SECRET_KEY"

```

--------------------------------

### Iterative refinement prompts

Source: https://popmelt.com/guides/using-popmelt/building-landing-pages

Examples of specific commands used to adjust styling, content, components, and sections after the initial draft is generated.

```text
Make the hero section taller with more padding
```

```text
Update the hero headline to "Where rare plants find their people"
```

```text
Make the CTA button larger and more prominent
```

```text
Add a "Featured sellers" logo strip below the hero
```

--------------------------------

### GET /api/agents/verify

Source: https://popmelt.com/guides/integrations/autonomous-registration

Completes email verification using a token from the verification email. Returns a secret key and setup commands for various MCP clients.

```APIDOC
## GET /api/agents/verify

### Description
Completes email verification using a token from the verification email. Returns a secret key and setup commands for various MCP clients.

### Method
GET

### Endpoint
https://popmelt.com/api/agents/verify?token=abc123...

### Parameters
#### Query Parameters
- **token** (string) - Required - The verification token from the email link.

### Request Example
```
curl "https://popmelt.com/api/agents/verify?token=abc123..."
```

### Response
#### Success Response (200)
- **status** (string) - Always "verified".
- **secret_key** (string) - The secret key for the agent. Shown exactly once.
- **key_preview** (string) - A preview of the secret key.
- **setup** (object) - Contains ready-to-run setup commands for various environments.
  - **claude_code** (string) - Command for Claude Code.
  - **codex_cli** (string) - Configuration for Codex CLI.
  - **codex_cli_env** (string) - Configuration for Codex CLI using environment variable.
  - **gemini_cli** (string) - Configuration for Gemini CLI.
  - **gemini_cli_env** (string) - Configuration for Gemini CLI using environment variable.
  - **env_var** (string) - Environment variable export command.

#### Response Example
```
{
  "status": "verified",
  "secret_key": "abc123def456...",
  "key_preview": "abc123de...f456",
  "setup": {
    "claude_code": "claude mcp add popmelt https://mcp.popmelt.com --header \"Authorization: Bearer abc123def456...\"",
    "codex_cli": "[mcp_servers.popmelt]\nurl = \"https://mcp.popmelt.com\"\nhttp_headers = { \"Authorization\" = \"Bearer abc123def456...\" }",
    "codex_cli_env": "[mcp_servers.popmelt]\nurl = \"https://mcp.popmelt.com\"\nbearer_token_env_var = \"POPMELT_SECRET_KEY\"",
    "gemini_cli": "{ \"mcpServers\": { \"popmelt\": { \"httpUrl\": \"https://mcp.popmelt.com\", \"headers\": { \"Authorization\": \"Bearer abc123def456...\" } } } }",
    "gemini_cli_env": "{ \"mcpServers\": { \"popmelt\": { \"httpUrl\": \"https://mcp.popmelt.com\", \"headers\": { \"Authorization\": \"Bearer $POPMELT_SECRET_KEY\" } } } }",
    "env_var": "export POPMELT_SECRET_KEY=\"abc123def456...\""
  }
}
```

### Error Handling
- Verification tokens expire after 24 hours and have limited attempts before lockout.
```

--------------------------------

### Device code response JSON

Source: https://popmelt.com/guides/integrations/autonomous-registration

Example response from the device code request. Contains the device_code, user_code, verification_uri, verification_uri_complete, expires_in, interval, and an ASCII QR code.

```json
{
  "device_code": "GmRhmhcxhZA...",
  "user_code": "WDJB-MJHT",
  "verification_uri": "https://popmelt.com/device",
  "verification_uri_complete": "https://popmelt.com/device?code=WDJB-MJHT",
  "expires_in": 900,
  "interval": 5,
  "qr_code": "▄▄▄▄▄▄▄▄▄▄▄...(ASCII QR code)..."
}

```

--------------------------------

### Prompt to start building with Popmelt Base

Source: https://popmelt.com/guides/getting-started

Use this prompt to instruct your connected AI app to design a landing page using the Popmelt Base taste model. The AI will then use Popmelt MCP tools: connect, discover, reference, create, sample, and update.

```text
Let's design a landing page for an exotic plant marketplace with Popmelt Base

```

--------------------------------

### Use Popmelt in non-interactive and interactive modes

Source: https://popmelt.com/guides/integrations/claude-code

Shows how to use Popmelt in non-interactive (single command) and interactive modes. In single-command mode, pass the prompt as an argument. In interactive mode, start a session and then chat with Claude Code.

```bash
# Single command
claude "Create a button using my Melt taste model"

# Interactive session
claude
> Connect to Popmelt
> Use the Melt taste model
> Create a hero section
```

--------------------------------

### Add asset direction to a taste model

Source: https://popmelt.com/guides/using-popmelt/creating-taste-models

Use this prompt to guide image generation when using the taste model. It is an optional step after creating a model from scratch. The asset direction influences the visual style of generated images.

```text
Add asset direction:
- Watercolor illustration style
- Muted earth tones
- Hand-drawn feeling

```

--------------------------------

### Add content direction to a taste model

Source: https://popmelt.com/guides/using-popmelt/creating-taste-models

Use this prompt to guide how the AI writes copy when using the taste model. It is an optional step after creating a model from scratch. The content direction influences the tone and style of generated text.

```text
Add content direction:
- Warm, conversational voice
- Short sentences, clear language
- Avoid corporate jargon

```

--------------------------------

### Build a taste model from scratch

Source: https://popmelt.com/guides/using-popmelt/creating-taste-models

Use this prompt to create a taste model from scratch by describing the desired aesthetic. The AI formats the description into a valid taste model with all required semantic tokens, filling in sensible defaults for unspecified tokens. The model is validated automatically, and missing tokens are reported.

```text
Create a taste model called "Midnight Garden" with:
- Deep navy background (#0a1628)
- Soft cream foreground (#f5f0e8)
- Emerald green primary (#10b981)
- Playfair Display for headings
- 12px border radius
- Subtle shadows

```

--------------------------------

### Gemini CLI configuration (JSON)

Source: https://popmelt.com/guides/integrations/autonomous-registration

Add this config from setup.gemini_cli to ~/.gemini/settings.json (or .gemini/settings.json in your project) to configure the Popmelt MCP server with an Authorization header.

```json
{
  "mcpServers": {
    "popmelt": {
      "httpUrl": "https://mcp.popmelt.com",
      "headers": {
        "Authorization": "Bearer YOUR_SECRET_KEY"
      }
    }
  }
}

```

--------------------------------

### Codex CLI configuration (TOML)

Source: https://popmelt.com/guides/integrations/autonomous-registration

Add this config from setup.codex_cli to ~/.codex/config.toml to configure the Popmelt MCP server with an Authorization header.

```toml
[mcp_servers.popmelt]
url = "https://mcp.popmelt.com"
http_headers = { "Authorization" = "Bearer YOUR_SECRET_KEY" }

```

--------------------------------

### Verify email registration token with curl

Source: https://popmelt.com/guides/integrations/autonomous-registration

Calls the verification endpoint with the token from the email link. The response contains the secret key and setup commands for various tools.

```bash
# The email link looks like:
# https://popmelt.com/api/agents/verify?token=abc123...

curl "https://popmelt.com/api/agents/verify?token=abc123..."
```

```json
{
  "status": "verified",
  "secret_key": "abc123def456...",
  "key_preview": "abc123de...f456",
  "setup": {
    "claude_code": "claude mcp add popmelt https://mcp.popmelt.com --header \"Authorization: Bearer abc123def456...\"",
    "codex_cli": "[mcp_servers.popmelt]\nurl = \"https://mcp.popmelt.com\"\nhttp_headers = { \"Authorization\" = \"Bearer abc123def456...\" }",
    "codex_cli_env": "[mcp_servers.popmelt]\nurl = \"https://mcp.popmelt.com\"\nbearer_token_env_var = \"POPMELT_SECRET_KEY\"",
    "gemini_cli": "{ \"mcpServers\": { \"popmelt\": { \"httpUrl\": \"https://mcp.popmelt.com\", \"headers\": { \"Authorization\": \"Bearer abc123def456...\" } } } }",
    "gemini_cli_env": "{ \"mcpServers\": { \"popmelt\": { \"httpUrl\": \"https://mcp.popmelt.com\", \"headers\": { \"Authorization\": \"Bearer $POPMELT_SECRET_KEY\" } } } }",
    "env_var": "export POPMELT_SECRET_KEY=\"abc123def456...\""
  }
}
```

--------------------------------

### sample

Source: https://popmelt.com/guides/mcp/tools/sample

Extracts design tokens and components from a public webpage, returning signals for building or updating models.

```APIDOC
## sample

### Description
Extract design tokens/components from a public webpage. Analyzes a public URL and returns token/component signals you can use to build or update models.

### Method
sample

### Endpoint
sample

### Parameters
#### Path Parameters
- **url** (string) - Required - Public webpage URL.

#### Query Parameters
- **components** (array) - Optional - Request full details for selected components.
- **includeStructure** (boolean) - Optional - Include simplified structure output.
- **resolveVariables** (boolean) - Optional - Resolve CSS variables to concrete values (default `true`).

### Request Example
```
sample { url: "https://stripe.com" }
```

### Response
#### Success Response
- **tokens** (array) - Extracted design tokens.
- **components** (array) - Extracted component signals.

#### Response Example
```
{
  "tokens": [],
  "components": []
}
```
```

--------------------------------

### Gemini CLI configuration with environment variable

Source: https://popmelt.com/guides/integrations/autonomous-registration

Alternative Gemini CLI configuration using setup.gemini_cli_env with an environment variable for the secret key.

```json
{
  "mcpServers": {
    "popmelt": {
      "httpUrl": "https://mcp.popmelt.com",
      "headers": {
        "Authorization": "Bearer $POPMELT_SECRET_KEY"
      }
    }
  }
}

```

--------------------------------

### Configure Popmelt MCP server

Source: https://popmelt.com/guides/integrations/cursor

Add this configuration to your global or project-specific .cursor/mcp.json file to enable the Popmelt integration.

```json
{
  "mcpServers": {
    "popmelt": {
      "url": "https://mcp.popmelt.com"
    }
  }
}
```

--------------------------------

### Configure OpenCode with Popmelt MCP Server

Source: https://popmelt.com/guides/integrations/opencode

Add the Popmelt MCP server configuration to your opencode.json file to enable integration.

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "popmelt": {
      "type": "remote",
      "url": "https://mcp.popmelt.com"
    }
  }
}
```

--------------------------------

### Add Copilot Instructions for Popmelt

Source: https://popmelt.com/guides/integrations/vscode

Add this setting to your VS Code configuration to instruct GitHub Copilot to prioritize Popmelt taste models for UI styling.

```json
"github.copilot.chat.instructions": ["Use Popmelt taste models for all UI styling"]
```

--------------------------------

### Simple landing page prompt

Source: https://popmelt.com/guides/using-popmelt/building-landing-pages

A basic prompt to initiate the creation of a landing page for an exotic plant marketplace.

```text
Create a landing page for a marketplace for exotic plant collectors

```

--------------------------------

### Display authorization instructions to user

Source: https://popmelt.com/guides/integrations/autonomous-registration

Shows the user the verification URL and code, and optionally an ASCII QR code to scan. The user must be logged into Popmelt and have an active account.

```text
To authorize this agent, visit: https://popmelt.com/device
Enter code: WDJB-MJHT

Or scan:
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄█ █ █ ▄▄▄▄▄ █
...

```

--------------------------------

### Configure Popmelt MCP Server in settings.json

Source: https://popmelt.com/guides/integrations/vscode

Add this configuration to your VS Code settings.json file to enable the Popmelt MCP server.

```json
{
  "mcp.servers": {
    "popmelt": {
      "url": "https://mcp.popmelt.com"
    }
  }
}
```

--------------------------------

### Section-by-section landing page prompt

Source: https://popmelt.com/guides/using-popmelt/building-landing-pages

A structured prompt defining specific elements for a hero section.

```text
Create a hero section with:
- Headline: "Find your next rare specimen"
- Subheadline: "The marketplace where collectors discover extraordinary plants"
- CTA button: "Browse Plants"

```
Tokens:
Raw