Preline UI MCP Server
Preline UI MCP connects AI coding agents to the Preline UI catalog so they can discover and integrate components, blocks, and documentation in your project.
Included free with Preline Pro through January 1, 2027
Preline MCP is a hosted AI service. Free access is included with Preline Pro through January 1, 2027. A subscription is required afterward. Rate limits may apply.
Introduction
Model Context Protocol (MCP) is a standard way for AI applications to connect to external tools and data sources. It lets a coding agent request structured information while it works instead of relying only on what the model already knows.
Preline UI MCP is a hosted MCP server for the Preline UI catalog. It gives supported coding agents access to real Preline components, ready-made blocks, JavaScript API references, and framework documentation. The server is read-only: it returns source code and guidance, while your agent decides what to fetch and makes the changes in your project.
You work with Preline UI MCP through natural-language prompts in your coding agent; you don't call the MCP tools yourself. Under the hood, the server exposes seven tools. For catalog content, the recommended workflow is to discover valid IDs first, fetch one component or block, then let the agent integrate it before fetching another. Documentation tools can be called independently when API or framework guidance is needed.
| Tool | What it does |
|---|---|
components_list |
Lists the component sections and the exact component IDs inside one section. |
single_component |
Returns the code for one component. |
blocks_categories |
Lists the block hierarchy (main section → subsection → category). |
blocks_in_category |
Lists the exact block IDs inside one category. |
single_block |
Returns one complete block instance with its required HTML, CSS, scripts, and initialization code. |
component_documentation |
Returns the JavaScript API (methods, events, options) for interactive plugins. |
framework_documentation |
Returns integration documentation for using Preline UI with a specific framework or stack (React, Next.js, Vue, Laravel, Rails, Django, and more). |
The server also exposes the preline_init MCP prompt, which gives compatible clients the core Preline discovery, integration, and file-placement workflow.
Set the right expectation. The server returns building blocks plus an integration recipe, not a bespoke screenshot-perfect screen. The closer your prompt maps to things that actually exist in the catalog, the closer the result. The sections below show how to write that prompt.
Setup overview
The hosted Preline UI MCP server 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
Choose your coding agent in the setup guides below for client-specific connection instructions.
Install Preline Agent Skills
MCP gives your coding agent access to the Preline catalog. Agent Skills add Preline-specific workflow instructions, so your agent 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 target, choose your coding agent and preferred project or user scope. Each skill is defined by a SKILL.md file. For the full setup workflow and supported agent paths, see How to set up Agent Skills.
Agent Setup Guides
Preline MCP works through the coding agent you use to build. For a stronger Preline-aware workflow, install Preline UI Agent Skills in the agent you use most.
Pick your agent for the setup path. Agents with dedicated MCP setup guides open step-by-step instructions; the remaining cards point to the full Agent Skills setup guide.
Cursor
Connect Preline UI MCP to Cursor CLI and desktop, then add reusable Agent Skills.
Claude
Connect Preline MCP to Claude Code or Claude Desktop, then add skills for stronger workflows.
Codex
Use .codex/skills/ to make Preline workflows available in Codex.
Visual Studio Code
Connect Preline MCP to VS Code agent mode, then add portable Agent Skills.
OpenCode
Use .opencode/skills/ for project-level OpenCode setup.
Kimi Code CLI
Connect Preline MCP to Kimi Code CLI and add shared Agent Skills.
Devin
Add Preline skills to .agents/skills/ for Devin workspaces.
GitHub Copilot
Connect Preline MCP to Copilot CLI or VS Code, then add shared Agent Skills.
Zed
Connect Preline MCP to the Zed Agent and add project or global Agent Skills.
Gemini CLI, Antigravity
Connect Preline UI MCP to Gemini CLI and Google Antigravity, then add shared Agent Skills.
Kiro
Connect Preline MCP to Kiro CLI or Kiro IDE, then add workspace skills.
TRAE
Connect Preline UI MCP to TRAE IDE, then add reusable project or global Skills.
Anatomy of a good prompt
A reliable prompt answers five questions. You don't need formal syntax; plain language is fine. The more of these you make explicit, the less the agent has to guess.
| Lever | Ask yourself | Example wording |
|---|---|---|
| Trigger | Is Preline named? | "Using Preline…" or "/preline add…" |
| Unit | One element or a whole page? | "a component" vs. "an example page" |
| What | Which element(s), in plain words? | "a pricing table with a monthly/yearly toggle" |
| Style | Theme tokens or utilities? Which theme? | "utility classes, ocean theme" |
| Where | Which file, and where in it? | "into index.html, below the hero" |
Putting it together
Using Preline, add a pricing table component with a monthly/yearly toggle into pricing.html, below the hero section. Use utility classes with the ocean theme.
You never need to supply section slugs or component IDs (e.g. advanced-select, datatables-basic-usage-example). Those are exact strings the agent looks up through the tools. Guessing them yourself is more likely to mislead than help; describe what you want in plain words instead.
Components vs. blocks
A few words in your prompt help the agent choose the right workflow. Use component for an individual UI element and block or example for pre-assembled content.
| Say | You get | Use when |
|---|---|---|
| "component" | A single element, such as one button, one modal, or one table. | You're adding one piece to an existing page. |
| "block" / "example" | One pre-assembled block, which may be a section, layout, app shell, or complete page. | You want a whole hero, pricing section, login screen, or dashboard at once. |
When you want more than one element, prefer a block or example. A ready-made block gives a more complete, consistent result than stitching several components by hand. The selected block can still be adapted before insertion to remove regions you did not request.
Themes and class system
By default the server returns markup using Preline's semantic design-token classes. If your project styles with plain Tailwind utilities, say so. Ask for "utility classes" and, optionally, a theme. Decide this once at the start of a request and keep it the same for every piece, so the output doesn't end up half token-based and half utility-based.
| If you say… | The agent uses |
|---|---|
| (nothing about classes) | Design-token classes (default). |
| "utility classes" / "plain Tailwind" | Utility classes (isUtilityBased), default theme. |
| "utility classes, ocean theme" | Utility classes converted to that named theme. |
Available themes: default (blue), harvest (amber/khaki), retro (fuchsia/neutral), moon (grayscale), ocean (cyan), bubblegum (pink/mauve), cashmere (mauve/stone), autumn (amber/stone), olive (avocado green). Learn more.
Composite and layout requests
This is where most prompts go wrong. When you ask for a whole layout, such as an app shell, a dashboard, or a settings screen, it's tempting to write one long, highly detailed paragraph describing every element. Counter-intuitively, more adjectives don't help: a bespoke layout you describe in prose doesn't exist in the catalog as a single unit, so the agent has to invent the assembly, and it tends to under-deliver.
The fix isn't "be more detailed"; it's name a skeleton and describe the delta from it. Point the agent at an existing example layout to use as the starting frame, then list the changes you want on top of it.
Instead of one dense paragraph…
Build a navbar with a logo on the left, a sidebar toggle, project/team/account dropdowns with dividers, links and a theme switcher; a left sidebar with search and links; navbar and sidebar as one gray panel, content as a white bordered card.
…anchor to a layout, then describe changes
Using Preline, start from an application layout example with a header and a sidebar as the base. Then: add project, team and account dropdowns to the navbar plus a theme switcher; add a search box and links to the sidebar; keep the navbar and sidebar on one shared gray surface and the content area as a bordered card. Use theme-token classes.
A good composite prompt does three things:
- Names a starting frame. "Start from an application/dashboard layout example" tells the agent to reuse a real shell instead of hand-building one.
- Lists changes as a delta. Add X, replace Y, and remove Z relative to that frame.
- States constraints once. Shared surfaces, the class system, and repeated states (selected, collapsed, pinned) are declared up front so they hold across the whole build.
If you're not sure a matching layout exists, just ask: "find a Preline example layout that pairs a header and a sidebar, and use it as the base." The agent will browse the example categories and pick one before building.
Prompt recipes
Copy-ready patterns for the most common requests. Replace the bracketed parts.
Single component
Using Preline, add a [component, e.g. accordion] component into [file] at [location]. [Optional: utility classes, [theme] theme.]
Complete section or page
Using Preline, add a [kind, e.g. pricing / hero / login] block or example and save it as [file].
Layout / app shell (skeleton-first)
Using Preline, start from a [dashboard / application] layout example as the base, then [add / replace / remove …]. Keep [shared surface / constraint]. Use [token or utility] classes. Save as [file].
Wiring up an interactive plugin
Using Preline, add a [datepicker / select / modal], and check its documentation so the JavaScript and init script are wired correctly.
One request at a time. The agent fetches and integrates each piece fully before the next, so let it finish one component or block before asking for another. For a large response, the server returns a temporary artifact URL with instructions to download the scratch file, integrate its sections, and remove it afterward. That's expected, not an error.