Kimi Code CLI Preline MCP Setup

Setup overview

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

Once connected, Kimi Code CLI 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 Kimi Code CLI add command reference.

Kimi Code CLI Configuration

1. Choose the configuration scope

   Kimi Code CLI loads MCP servers from ~/.kimi/mcp.json by default. You can load another file for a particular launch with kimi --mcp-config-file PATH.

2. Add the API key and Preline server

   Add the remote HTTP server with the official kimi mcp add command. Replace TOKEN_KEY with your Preline API key:

   Terminal

                         
                           kimi mcp add --transport http --header "Authorization:Bearer TOKEN_KEY" preline https://mpc.preline.co
                         
                       

   ~/.kimi/mcp.json

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

   Keep the token private: Kimi stores the header in ~/.kimi/mcp.json. Do not commit that file or copy the real token into a project file.

3. Verify the connection

   List the configured servers, then test the connection and inspect the tools exposed by Preline:

   Terminal

                         
                           kimi mcp list
                           kimi mcp test preline
                         
                       

   In an interactive Kimi session, use /mcp to display MCP server and tool status.

Agent Skills

MCP gives Kimi Code CLI access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so Kimi Code CLI 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
                      
                    

When the installer asks for a location, choose the shared project path .agents/skills/. Kimi also scans .kimi/skills/, .claude/skills/, and .codex/skills/ at project level. At user level, it supports the corresponding home-directory paths plus the recommended generic path ~/.config/agents/skills/ and ~/.agents/skills/. Each directory-form skill contains SKILL.md; invoke it with /skill:<name>, or let Kimi select it automatically from its description. For the full skills workflow and supported agent paths, see How to set up Agent Skills.

Build with Preline

Prompt Kimi Code CLI 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.