Update v5.0 - Preline MCP, AI Prompts, Animated Icons and more. Visit Changelog

........ Github
Figma X (Twitter)

Claude Preline MCP Setup

Connect Preline UI MCP to Claude Code or Claude Desktop, then ask Claude to build with real Preline components, blocks, documentation, and framework guidance.

Setup overview

The hosted Preline UI MCP server is ready to use from Claude. It uses Streamable HTTP and requires an API key, sent as a bearer token.

MCP endpoint
https://mpc.preline.co
Transport
Streamable HTTP
Authentication
Authorization: Bearer TOKEN_KEY

Once connected, Claude can discover Preline catalog items, fetch the matching source, and place HTML, CSS, scripts, and init code in the right files. For broader MCP prompting guidance, see the Preline UI MCP Server guide.

For the most up-to-date instructions for adding MCP servers, see the official guides for Claude Code and remote MCP connectors in Claude Desktop.

Setup

Choose the Claude surface you use. Both setup paths connect to the same hosted Preline MCP server.

  1. Add the Preline MCP server

    From your project root, add the hosted Preline MCP server to Claude Code, replacing TOKEN_KEY with your own API key:

    Terminal 
                          
                        claude mcp add --transport http preline https://mpc.preline.co --header "Authorization: Bearer TOKEN_KEY"

  2. Choose who can use the connection

    Without a --scope flag this defaults to local scope: private to you, stored in your own ~/.claude.json, and only loaded in this project. To share the connection with your team instead, add --scope project:

    Terminal 
                          
                        claude mcp add --transport http preline https://mpc.preline.co --header "Authorization: Bearer TOKEN_KEY" --scope project

    Project scope writes the same configuration into a .mcp.json file at your project root, which is meant to be checked into version control. If you prefer editing that file directly instead of using the CLI, use this:

    .mcp.json 
                          
                        {
                          "mcpServers": {
                            "preline": {
                              "type": "http",
                              "url": "https://mpc.preline.co",
                              "headers": {
                                "Authorization": "Bearer TOKEN_KEY"
                              }
                            }
                          }
                        }

    Team members still need to approve it. Claude Code prompts each teammate to approve a project-scoped server the first time they open the project, since .mcp.json is checked into version control and could point anywhere. Until approved, claude mcp list shows it as ⏸ Pending approval.

  3. Verify the connection

    Restart Claude Code or open a new session, then confirm that Claude sees the server:

    Terminal 
                          
                        claude mcp list

    You should see preline listed. Inside Claude Code, you can also run /mcp to inspect the connection and reconnect if needed.

Install Preline Agent Skills

MCP gives Claude access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so Claude is more likely to follow the right discovery, placement, theming, and validation habits.

Install the Preline skills from your project root:

Terminal 
                      
                        npx skills add htmlstreamofficial/preline

For the full skills workflow and supported agent paths, see How to set up Agent Skills.

Build with Preline

Prompt Claude in plain language. Name Preline, describe the component or block you want, and mention the file or framework context when it matters.

Prompt 
                      
                        Using Preline, add a pricing comparison section to app/pricing.html.
                        Use the default theme and keep the existing page header.
Prompt 
                      
                        Use Preline MCP to add a modal with a form.
                        Wire the required scripts into the existing layout.
                        Keep my current Tailwind setup.
Prompt 
                      
                        Show me the Preline dropdown JavaScript API.
                        Then update this dropdown to close after item selection.

Troubleshooting

Claude Code says the server has a URL but no type.

Add "type": "http" to the preline entry in .mcp.json. Claude Code treats a server with no type as a stdio server.

The connector is missing or disconnected.

Restart Claude, then check the connection again. In Claude Code, run claude mcp list or open /mcp. In Claude Desktop, reopen Customize > Connectors and confirm the URL is https://mpc.preline.co.

The server responds with "Missing API key".

The request reached the server without an Authorization: Bearer TOKEN_KEY header. In Claude Code, confirm the headers block is present in .mcp.json (or the --header flag was included in claude mcp add). In Claude Desktop, the custom-connector screen may not support a raw bearer token - use Claude Code instead if it doesn't.

Claude writes generic Tailwind CSS instead of using Preline.

Make the instruction explicit: say Use Preline MCP or Using Preline, then name the component, block, theme, and target file.

© 2026 Preline Labs.