TRAE Preline MCP Setup

Setup overview

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

Once connected, TRAE 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 in TRAE IDE, see the official TRAE MCP setup guide.

TRAE IDE

1. Open the MCP settings

   In IDE mode, select the Settings icon in the upper-right corner. In SOLO mode, use the Settings icon in the upper-right corner of the chat panel. Then select MCP in the left navigation.

2. Add the Preline server manually

   Select Add > Add Manually. Paste the JSON below into Configure Manually, replace TOKEN_KEY, and select Confirm.

   MCP server configuration

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

   TRAE's HTTP configuration uses url and optional headers. No separate transport field is required.

3. Verify the connection

   Confirm that preline appears in the MCP server list, then inspect its connection status and available tools.

Project-level configuration

1. Create the project configuration

   To share the MCP definition with a project, create .trae/mcp.json under the project root and add the same configuration:

   .trae/mcp.json

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

   Keep the token private: this project file contains a credential. Do not commit a real API key to version control. For a personal setup, use Add Manually instead of storing the token in the repository.

2. Enable project-level MCP

   Open Settings > MCP, enable project-level MCP with its toggle, and confirm the operation. TRAE loads relevant project servers automatically when their capabilities are needed.

Install Preline Agent Skills

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

Choose the shared .agents/skills/ project path when prompted. In TRAE, open Settings > Skills & Commands and enable the .agents/skills/ directory. TRAE also supports native project skills in .trae/skills/ and global skills in ~/.trae/skills/ on macOS/Linux or %userprofile%/.trae/skills on Windows. Each skill is a folder containing SKILL.md; when names collide, the native .trae/skills/ version takes precedence. For the full setup workflow, see How to set up Agent Skills.

Build with Preline

Prompt TRAE 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.

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