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

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

Devin Preline MCP Setup

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

Setup overview

The hosted Preline UI MCP server is ready to use from Devin. 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, Devin 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 Devin guides for Devin CLI and Devin Desktop.

Devin CLI and Devin Desktop manage MCP servers separately. CLI uses configuration under .devin/, while Desktop Cascade uses ~/.codeium/windsurf/mcp_config.json.

Setup

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

  1. Add the Preline MCP server

    From your project root, add the hosted Preline MCP server. Current versions of Devin CLI infer Streamable HTTP from the URL and save the server to the gitignored local scope by default:

    Terminal 
                          
                        devin mcp add preline https://mpc.preline.co

  2. Add the authorization header

    Open the generated .devin/config.local.json and add the authorization header, replacing TOKEN_KEY with your own API key:

    .devin/config.local.json 
                          
                        {
                          "mcpServers": {
                            "preline": {
                              "url": "https://mpc.preline.co",
                              "headers": {
                                "Authorization": "Bearer TOKEN_KEY"
                              }
                            }
                          }
                        }

    Keep the API key in local scope. Devin automatically excludes .devin/config.local.json from git. Do not move the header into the shared .devin/config.json file or commit the token to version control. The optional transport field is omitted above because URL-based servers default to Streamable HTTP.

  3. Verify the connection

    Start a new Devin CLI session, then confirm Devin sees the server:

    Terminal 
                          
                        devin mcp list

    You should see preline listed. Run devin mcp get preline for the full entry, or devin mcp disable preline / devin mcp enable preline to toggle it without removing the configuration.

See the official Devin CLI MCP configuration guide for configuration scopes, supported fields, permissions, and organization restrictions.

Install Preline Agent Skills

MCP gives Devin access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so Devin 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 Devin this installs into .agents/skills/, the recommended project path. Devin discovers committed skills from connected and cloned repositories. For the full skills workflow and supported agent paths, see How to set up Agent Skills and the official Devin Skills guide.

Build with Preline

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

Devin CLI seems to hang, or takes a while to connect to Preline.

This can be expected: Devin CLI tries Streamable HTTP first, and only falls back to legacy SSE on the same URL if the server answers with a 4xx status. Connection errors or 5xx responses skip the fallback and report immediately. If Preline never resolves at all, check the URL and header first (below) rather than assuming the fallback is stuck.

The preline entry doesn't show up after adding it.

Confirm that you opened the repository containing .devin/config.local.json. Run devin mcp list to see the resolved servers, or devin mcp get preline to inspect the entry.

The server responds with "Missing API key".

The request reached the server without an Authorization: Bearer TOKEN_KEY header. For CLI, confirm that the headers block is present in .devin/config.local.json, inspect the resolved entry with devin mcp get preline, and start a new session. For Desktop, confirm the header in ~/.codeium/windsurf/mcp_config.json and make sure the referenced environment variable or file contains the token before reloading the app.

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