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

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

Cursor Preline MCP Setup

Connect Preline UI MCP to Cursor CLI or the Cursor desktop app, then ask Cursor to build with real Preline components, blocks, documentation, and framework guidance.

Setup overview

The hosted Preline UI MCP server is ready to use from Cursor. 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, Cursor 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 Cursor MCP guide and Cursor Agent CLI reference.

Setup

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

  1. Configure the Preline MCP server

    Cursor CLI automatically uses the same MCP configuration as the editor. Create .cursor/mcp.json in the project root for a project-specific server, or ~/.cursor/mcp.json to make it available in every project.

    Add to Cursor
    .cursor/mcp.json 
                          
                        {
                          "mcpServers": {
                            "preline": {
                              "url": "https://mpc.preline.co",
                              "headers": {
                                "Authorization": "Bearer TOKEN_KEY"
                              }
                            }
                          }
                        }

    Whether you use the button or edit mcp.json manually, replace TOKEN_KEY with your Preline API key. Cursor detects Streamable HTTP from the URL, so this entry does not need a transport or type field.

    Keep the token private: the configuration above contains a credential. Do not commit it to version control; use the global file or exclude the project file if it contains the real token.

  2. Inspect the server and its tools

    Confirm that Cursor loaded the server configuration:

    Terminal 
                          
                        cursor-agent mcp list

    Cursor Agent CLI uses the cursor-agent command. To inspect the tools exposed by Preline, run:

    Terminal 
                          
                        cursor-agent mcp list-tools preline

  3. Verify the server in your session

    In an interactive CLI session, /mcp list opens the MCP menu. It can also be used to browse and manage configured servers.

    Terminal 
                          
                        /mcp list

    You should see preline listed and its tools available.

Install Preline Agent Skills

MCP gives Cursor access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so Cursor 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

When the installer asks for a target, select Cursor. Cursor discovers project skills from .cursor/skills/ or .agents/skills/, and user-level skills from ~/.cursor/skills/ or ~/.agents/skills/. Each skill is defined by a SKILL.md file. Skills work in both the editor and CLI, and can also be invoked from the slash command menu. For the full setup workflow, see How to set up Agent Skills.

Build with Preline

Prompt Cursor 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

Cursor does not list the Preline server.

Confirm the file is named mcp.json and lives at .cursor/mcp.json in the project root or ~/.cursor/mcp.json globally. Also check that it is valid JSON and that preline is nested under mcpServers.

Cursor says the server is unreachable or times out.

Run cursor-agent mcp list to check the configured server and cursor-agent mcp list-tools preline to inspect its tools. In Cursor desktop, review the server status under Settings > Customize.

The server responds with "Missing API key".

The request reached the server without a valid Authorization: Bearer TOKEN_KEY header. Confirm the header is inside the preline server entry and replace TOKEN_KEY with your actual Preline API key.

Cursor 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.