Zed Preline MCP Setup

Setup overview

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

Once connected, Zed 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 in Zed, see the official Zed installation guide.

Zed

1. Open the MCP settings

   Open Settings > AI > MCP Servers. You can also run agent: open settings from the Command Palette and select MCP Servers.

2. Add the Preline remote server

   Select Add Server > Add Remote Server. Name the server preline, enter https://mpc.preline.co, and add a headers object with Authorization set to Bearer TOKEN_KEY. Replace TOKEN_KEY with your Preline API key and save the server.

   Zed settings.json

                         
                           {
                             "context_servers": {
                               "preline": {
                                 "url": "https://mpc.preline.co",
                                 "headers": {
                                   "Authorization": "Bearer TOKEN_KEY"
                                 }
                               }
                             }
                           }
                         
                       

   The UI writes this entry to Zed's settings file, which you can open with zed: open settings file. Remote servers use url and optional headers; Zed does not require a separate transport field.

   Keep the token private: the authorization header is stored in your Zed settings. Do not share that file or commit a copied server entry containing the real API key.

3. Verify the connection

   Return to the MCP server list and confirm that preline has a green status indicator, which means the server is active.

Agent Skills

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

Install the Preline skills from your project root:

                      
                        npx skills add htmlstreamofficial/preline
                      
                    

Choose .agents/skills/ when prompted. Zed loads project skills from <worktree>/.agents/skills/ and global skills from ~/.agents/skills/; each skill must be a direct child of that directory and contain SKILL.md. Open Settings > AI > Skills to manage them. Zed can select a matching skill automatically, or you can invoke one from the Agent Panel with a slash command or @-mention. Project skills are loaded only for trusted worktrees. For the full setup workflow, see How to set up Agent Skills.

Build with Preline

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

                      
                        Using Preline, add a pricing comparison section to app/pricing.html.
                        Use the default theme and keep the existing page header.
                      
                    

                      
                        Use Preline MCP to add a modal with a form.
                        Wire the required scripts into the existing layout.
                        Keep my current Tailwind setup.
                      
                    

                      
                        Show me the Preline dropdown JavaScript API.
                        Then update this dropdown to close after item selection.
                      
                    

Troubleshooting

Agent Setup Guides

Switch to another coding agent setup guide.

Cursor Claude Codex Visual Studio Code OpenCode Kimi Code CLI Devin GitHub Copilot Gemini CLI, Antigravity Kiro TRAE