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

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

Kiro Preline MCP Setup

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

Setup overview

The hosted Preline UI MCP server uses Streamable HTTP and requires an API key sent as a bearer token. Kiro supports remote MCP servers with a URL and custom HTTP headers.

MCP endpoint
https://mpc.preline.co
Transport
Streamable HTTP
Authentication
Authorization: Bearer TOKEN_KEY

Kiro CLI and Kiro IDE use the same MCP configuration locations: .kiro/settings/mcp.json for the current workspace and ~/.kiro/settings/mcp.json for all workspaces. Workspace entries take precedence when the same server name exists at both levels.

For the most up-to-date instructions for adding MCP servers in Kiro IDE and CLI, see the official Kiro configuration guide.

Setup

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

  1. Export your API key

    Export your Preline API key in the shell that launches Kiro CLI:

    Terminal
    
                      export PRELINE_MCP_TOKEN="TOKEN_KEY"

  2. Add the Preline MCP configuration

    Create or update .kiro/settings/mcp.json in your project. Use ~/.kiro/settings/mcp.json instead if you want Preline available in every workspace:

    .kiro/settings/mcp.json
    
                      {
                        "mcpServers": {
                          "preline": {
                            "url": "https://mpc.preline.co",
                            "headers": {
                              "Authorization": "Bearer ${PRELINE_MCP_TOKEN}"
                            }
                          }
                        }
                      }

    Keep the token out of JSON. Kiro expands ${PRELINE_MCP_TOKEN} from the environment. If you commit a workspace config, commit only the variable reference, never the token value.

  3. Verify the connection

    Kiro CLI hot-reloads MCP configuration after you save it. The updated server is reconciled at the next idle boundary, without restarting the session. In an interactive session, run /mcp to see the active server, its connection status, and available tools.

Install Preline Agent Skills

MCP gives Kiro access to the Preline catalog. Agent Skills add Preline-specific instructions for discovery, placement, theming, and validation. Install the Preline skills from your project root:

Terminal

                      npx skills add htmlstreamofficial/preline

When the installer asks for a target, select Kiro. Workspace skills live in .kiro/skills/; global skills live in ~/.kiro/skills/. Workspace skills take precedence when names conflict. Kiro can activate a matching skill automatically, or you can invoke it from the slash-command menu. In Kiro CLI, use /context show to confirm the skills loaded into the current session.

Build with Preline

Prompt Kiro in plain language. Name Preline, describe the component or block, and mention the target file or framework context.

Prompt

                      Using Preline MCP, 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 and keep my Tailwind setup.

Troubleshooting

Preline does not appear in Kiro.

Validate the JSON, confirm the file is at .kiro/settings/mcp.json or ~/.kiro/settings/mcp.json, and save it again. In CLI, run /mcp. In the IDE, make sure MCP support is enabled and inspect the MCP servers tab.

The server responds with "Missing API key".

Kiro could not expand ${PRELINE_MCP_TOKEN}, or the header is missing. Confirm the variable is set in the environment that launched Kiro and that the header value begins with Bearer.

Kiro writes generic Tailwind CSS instead of using Preline.

Say Use Preline MCP, then name the component or block, theme, and target file. Check that the Preline skills appear in Agent Steering & Skills or in CLI output from /context show.

© 2026 Preline Labs.