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

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

OpenCode Preline MCP Setup

Connect Preline UI MCP to OpenCode, then ask OpenCode to build with real Preline components, blocks, documentation, and framework guidance.

Setup overview

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

MCP endpoint
https://mpc.preline.co
Transport
Streamable HTTP (OpenCode type: "remote")
Authentication
Authorization: Bearer TOKEN_KEY

Once connected, OpenCode 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 local or remote MCP servers, see the official OpenCode MCP setup guide.

OpenCode Configuration

  1. Choose the configuration scope

    OpenCode reads MCP servers from an opencode.json (or opencode.jsonc) file. It checks a project file at your project root and a global file at ~/.config/opencode/opencode.json, then merges them - later, more specific sources only override the keys they set, so a project entry for preline takes precedence over a global one without erasing unrelated settings.

  2. Add the Preline MCP server

    Add the server under the mcp key, replacing TOKEN_KEY with your own API key:

    opencode.json 
                          
                        {
                          "$schema": "https://opencode.ai/config.json",
                          "mcp": {
                            "preline": {
                              "type": "remote",
                              "url": "https://mpc.preline.co",
                              "enabled": true,
                              "oauth": false,
                              "headers": {
                                "Authorization": "Bearer TOKEN_KEY"
                              }
                            }
                          }
                        }

    Two details worth keeping: set "oauth": false to disable automatic OAuth detection because Preline authenticates with an API key header. And avoid hardcoding the token if this file is committed to version control; OpenCode expands {env:VAR_NAME} inside config values, so "Authorization": "Bearer {env:PRELINE_MCP_TOKEN}" reads the token from your environment instead.

  3. Verify the connection

    Restart OpenCode, then confirm it sees the server:

    Terminal 
                          
                        opencode mcp list

    You should see preline listed with its auth status.

Install Preline Agent Skills

MCP gives OpenCode access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so OpenCode 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 OpenCode. Project skills live in .opencode/skills/; global skills live in ~/.config/opencode/skills/. OpenCode discovers their names and descriptions, then loads full skill instructions on demand through its native skill tool. For the full skills workflow and supported agent paths, see How to set up Agent Skills.

Build with Preline

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

The server isn't listed, or connection details look wrong.

Run opencode mcp list to see every configured server and its auth status. If a global ~/.config/opencode/opencode.json and a project opencode.json both define mcp.preline, the project one wins - check both files if the values don't match what you expect.

OpenCode tries to open an OAuth flow instead of using the header.

Add "oauth": false to the preline entry. This disables automatic OAuth detection for a server that authenticates with an API key header.

The server responds with "Missing API key".

The request reached the server without an Authorization: Bearer TOKEN_KEY header. Confirm the headers block is present under mcp.preline, and if you used {env:PRELINE_MCP_TOKEN} substitution, confirm that variable is exported in the environment OpenCode runs in.

For a deeper look, use the debug command:

opencode mcp debug preline reports the current authentication status, tests HTTP connectivity, and attempts OAuth discovery. With "oauth": false, use its connectivity result together with the server response to diagnose the URL or header.

Terminal 
                          
                            opencode mcp debug preline

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