Visual Studio Code Preline MCP Setup

Setup overview

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

Once connected, VS Code can expose Preline tools in chat and agent mode. For general prompting guidance, see the Preline UI MCP Server guide. For VS Code behavior and configuration fields, see the official MCP server guide and configuration reference.

For the most up-to-date instructions for adding MCP servers in VS Code, see the official VS Code setup guide.

VS Code configuration

1. Choose the configuration scope

   Use .vscode/mcp.json for a workspace server that can be shared with your team. For a server available across workspaces, run MCP: Open User Configuration. You can also run MCP: Add Server and choose Workspace or Global in the guided flow.

2. Add the Preline MCP server

   Add a remote HTTP server under the top-level servers key. The input variable keeps your API key out of the configuration file and prompts for it when VS Code starts the server.

   .vscode/mcp.json

                             
                               {
                                 "servers": {
                                   "preline": {
                                     "type": "http",
                                     "url": "https://mpc.preline.co",
                                     "headers": {
                                       "Authorization": "Bearer ${input:preline-api-key}"
                                     }
                                   }
                                 },
                                 "inputs": [
                                   {
                                     "type": "promptString",
                                     "id": "preline-api-key",
                                     "description": "Preline API key",
                                     "password": true
                                   }
                                 ]
                               }
                             
                           

   Keep the token private: do not replace the input variable with a real key in a committed workspace file.

3. Start and trust the server

   Save the file, start preline, enter your API key, and confirm that you trust the server when VS Code prompts you. VS Code discovers the available tools after the server starts.

   Run MCP: List Servers to inspect the server, start or stop it, review its tools, or open its output log. In chat, select Configure Tools to enable or disable individual Preline tools.

Agent Skills

MCP gives VS Code access to the Preline catalog. Agent Skills add Preline-specific workflow instructions for discovery, placement, theming, and validation.

Install the Preline skills from your project root:

                      
                        npx skills add htmlstreamofficial/preline
                      
                    

When prompted, choose .agents/skills/ for a portable project skill. VS Code also discovers project skills from .github/skills/ and .claude/skills/, and personal skills from ~/.copilot/skills/, ~/.claude/skills/, and ~/.agents/skills/. Type /skills in chat to open the skills menu. See the official Agent Skills guide and the Preline setup guide for more details.

Build with Preline

Prompt VS Code in agent mode. Name Preline, describe the component or block, and mention the target file or framework context.

                      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.
                    

Troubleshooting

Agent Setup Guides

Switch to another coding agent setup guide.

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