Docs
MCP Server
GitHub Copilot Setup

GitHub Copilot Preline MCP Setup

Connect Preline UI MCP to GitHub Copilot CLI or GitHub Copilot in VS Code, then ask Copilot to build with real Preline components, blocks, documentation, and framework guidance.

Setup overview

The hosted Preline UI MCP server is ready to use from GitHub Copilot. 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, GitHub Copilot 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 GitHub guides for Copilot CLI and Copilot in VS Code.

Setup

Choose where you use GitHub Copilot. Each setup path connects to the same hosted Preline MCP server.

Add the Preline MCP server

Add the hosted server with the copilot mcp add command. Copilot CLI stores user-level MCP configuration in ~/.copilot/mcp-config.json.
Terminal
```
                      
                        copilot mcp add --transport http \
                          --header "Authorization: Bearer TOKEN_KEY" \
                          preline https://mpc.preline.co
                      
                    
```
Replace TOKEN_KEY with your Preline API key. In Copilot CLI, the http transport selects Streamable HTTP. The CLI enables all tools exposed by the server by default, so the command does not need an explicit --tools "*" option.

For a guided setup, run /mcp add in an interactive CLI session. Choose HTTP, enter the endpoint, add {"Authorization":"Bearer TOKEN_KEY"} under HTTP Headers, keep * under Tools, and press Ctrl+S to save.

Inspect the saved configuration

Confirm that Copilot CLI saved the server:

Terminal

                      
                        copilot mcp list

To inspect the saved server definition, run:

Terminal

                      
                        copilot mcp get preline

Keep the token private: Copilot CLI saves the header in its configuration. Do not share ~/.copilot/mcp-config.json or paste its contents into an issue or chat.

Verify the server in your session

In an interactive CLI session, use /mcp show to view configured servers and their status.

Terminal

                      
                        /mcp show

You should see preline listed and its tools available.

Add the Preline server

VS Code has its own MCP configuration and does not reuse ~/.copilot/mcp-config.json. Add Preline through the VS Code interface:
1. Open the Command Palette and run MCP: Add Server.
2. Choose HTTP, enter https://mpc.preline.co, and name the server preline.
3. Choose Workspace or Global as the configuration target.

Configure authorization

Open the generated configuration and add the authorization header shown below. VS Code can prompt for the token instead of storing it directly.

.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
                            }
                          ]
                        }

Project or global? workspace configuration lives in .vscode/mcp.json and can be shared with the repository because the secret is requested through an input variable. Run MCP: Open User Configuration for a server available across all workspaces.

Start and trust the server

Save the file, start preline, and confirm that you trust the server when VS Code prompts you. Use Configure Tools in chat to review or toggle its tools.

Install Preline Agent Skills

MCP gives GitHub Copilot access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so GitHub Copilot 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 location, use .agents/skills/ for a project skill shared by Copilot CLI and VS Code. Both also discover project skills from .github/skills/ and .claude/skills/. For personal skills, both surfaces support ~/.copilot/skills/ and ~/.agents/skills/; VS Code additionally supports ~/.claude/skills/. Each skill lives in its own directory with a SKILL.md file. Use /skills list in Copilot CLI or /skills in VS Code chat to review available skills. If you install a skill during an active CLI session, run /skills reload. For the full setup workflow, see How to set up Agent Skills.

Build with Preline

Prompt GitHub Copilot 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

GitHub Copilot does not list the Preline server.

For Copilot CLI, run copilot mcp list and check ~/.copilot/mcp-config.json; the server belongs under mcpServers. In VS Code, check the workspace .vscode/mcp.json or run MCP: Open User Configuration; VS Code uses the top-level servers key.

GitHub Copilot says the server is unreachable or times out.

In Copilot CLI, run copilot mcp get preline. In VS Code, run MCP: List Servers, select preline, and choose Show Output to review its log.

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.

GitHub Copilot 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.

Agent Setup Guides

Switch to another coding agent setup guide.

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

Setup overview

Setup

Add the Preline MCP server

Inspect the saved configuration

Verify the server in your session

Add the Preline server

Configure authorization

Start and trust the server

Install Preline Agent Skills

Build with Preline

Troubleshooting

Agent Setup Guides