What is Ply UI MCP?
Ply UI MCP is the ply-ui-mcp server from the ply-ui-ng/ply repository. It gives an AI coding agent catalog tools to list, search and read Ply's Angular and Tailwind components, and a local stdio mode that can also add components, initialize a project and run the doctor check.
Ply is an Angular and Tailwind CSS component library with 218 components and blocks, 128 of them free and 90 Pro. Ply UI MCP is the ply-ui-mcp package in its repository, which lets an AI coding agent work with that catalog.
Components are delivered shadcn style. The command line copies the TypeScript and HTML source into your project, where you own and edit it. The README says the CLI stays the canonical installer and the MCP server wraps it.
What changes in your agent's output
- The agent searches the real catalog and reads a component's details instead of inventing selectors and inputs from memory.
- Components arrive as source files inside your repository, so the agent can edit them like any other code you wrote.
- The agent can run the doctor check to find a missing Tailwind source path, CDK package or icon sprite.
- Components you already installed can be compared with upstream and updated, with a merge mode for files you customized.
Local server or hosted catalog
Run npx -y ply-ui-mcp and the server talks to your agent over stdio. That mode exposes every tool, including the ones that write files. A hosted endpoint at mcp.ply-ui.com serves a read-only catalog for chat apps.
The README lists Cursor, Claude Code and Desktop, Kimi, VS Code with GitHub Copilot and Windsurf as stdio hosts. ChatGPT and Gemini chat apps use the hosted catalog and install with the CLI yourself.
Who Ply UI MCP is for
Best for
- Angular teams on version 22 who want an agent to pull signal based components rather than hand writing every dialog and form.
- Projects already using Tailwind CSS 4, since the library needs no custom theme file.
- Readers who know the copy-in model from the community shadcn/ui server and want the Angular equivalent.
- Anyone comparing component sources through other design system servers.
- Teams that pair a component source with a theming skill or an accessibility review skill.
Not for
- React, Vue or WordPress projects. The components are Angular only and the README says Ply is unrelated to MUI's React Base UI.
- Setups on older Angular. Free components for Angular 19 and above sit on a separate compat branch.
- Getting Pro items for free. Pro components are not in the repository and need a paid license key.
- Reading designs from Figma. This is a component source and has no design reader.
Use it with UiChemy
Ply builds Angular applications, so its output does not become a WordPress page. If your goal is an editable WordPress site, UiChemy is the route: Figma to WordPress and Composer build there. Click Get Started on uichemy.com.
Connect Ply UI MCP Server: Angular Components for AI Agents to your AI client
npx -y ply-ui-mcpCheck the requirements
The README asks for Node.js 22 or newer, Tailwind CSS 4.x and Angular 22 on the main branch. Angular 19 and above is covered by the compat/angular-19 branch.
Initialize the project
Run
npx ply-ui-cli init. It writes ply-ui.json and ply-ui.css and downloads the icon sprites. It does not install packages, so runnpm install @angular/cdkyourself.Register the server in your agent
Add
npx -y ply-ui-mcpas a stdio server in your agent's MCP settings. The vendor's getting started page has the setup for each supported host.Ask for components by name
Ask the agent to search the catalog and add what you need. The same install works by hand with
npx ply-ui-cli add button card dialog.Verify the setup
Run
npx ply-ui-cli doctor. It is read-only and checks ply-ui.json, the Angular workspace, the CDK, Tailwind source paths, the CSS import and the icon sprites.
Endpoints and ports
https://mcp.ply-ui.com/mcpRead-only, for ChatGPT and Gemini chat appshttps://ply-ui.comVendor site with the getting started guidehttps://ply-ui.com/llms.txtPlain text index for AI agentsWhat you can do with it
- Copy-in sourceComponents are copied into your project as TypeScript and HTML, so you own and edit them. There is no npm library package to keep updated.
- 218 components and blocksThe catalog has 128 free items and 90 Pro items, plus 392 outline icons and 18 full page layouts.
- All 19 form blocks freeLogin, signup, checkout, billing and wizard forms are in the free tier, along with the primitives such as buttons, dialogs, tabs and tooltips.
- Modern Angular defaultsComponents are standalone, zoneless, signal based and safe to render on the server. The docs site prerenders every catalog route.
- Standard Tailwind CSS 4No custom theme file is required. Set
--ply-brandto change the primary color, or export a scale from the Theme Studio on ply-ui.com. - Diff and update workflowThe CLI shows upstream changes for installed components and updates untouched files automatically, asking you what to keep for files you customized.
- Agent-ready docsA component catalog file, Cursor rules, an llms.txt index and a design skill are published for agents, and init writes the rules when they are missing.
- Pro behind a license keySet
PLY_LICENSE_KEYand the same CLI adds Pro components. The key is validated server side on every fetch.
Tools it exposes
list_components
Lists the components in the Ply catalog. Available in the catalog tools.
search_components
Searches the catalog for components that match a query. Available in the catalog tools.
get_component
Returns the details of one component from the catalog. Available in the catalog tools.
add_components
Local stdio only. Adds components to the project, and Pro items when PLY_LICENSE_KEY is set.
init_project
Local stdio only. Sets the project up for Ply.
doctor
Local stdio only. Runs the setup check on the project.
diff_components
Local stdio only. Shows what changed upstream for components you have already installed.
update_components
Local stdio only. Pulls upstream changes into installed components, with a merge option for a three way merge.
Frequently asked questions
What is Ply UI MCP?
It is the ply-ui-mcp package in the ply-ui-ng/ply repository. It gives an AI coding agent tools to list, search and read Ply's Angular and Tailwind components, and in local mode to add them to your project and keep them updated.
How do I install Ply UI MCP?
Run npx -y ply-ui-mcp locally and register it as a stdio server in your agent's MCP settings. The vendor's getting started page lists the setup for each host. You also need the Ply CLI initialized in your Angular project with npx ply-ui-cli init.
Which tools does the Ply UI MCP server expose?
The catalog tools are list_components, search_components and get_component. Local stdio also has add_components, init_project, doctor, diff_components and update_components. The hosted endpoint at mcp.ply-ui.com is a read-only catalog, so installs there go through the command line.
Which AI coding agents work with it?
The README names Cursor, Claude Code and Claude Desktop, Kimi, VS Code with GitHub Copilot and Windsurf as stdio hosts. ChatGPT and Gemini chat apps can read the hosted catalog but cannot write files, so you run the CLI install yourself.
Is Ply free to use?
128 items, covering every primitive and all 19 form blocks, are free and need no account. The other 90 items are Pro and need a license key from ply-ui.com. The repository holds only the free source, the CLI and the MCP package.
What does Ply need in my project?
The README lists Node.js 22 or newer, Angular 22 on the main branch and Tailwind CSS 4.x. Angular 19 and above has free components on a compat branch. You also add the Angular CDK yourself, because init does not install npm packages.
Is Ply the same as MUI's Base UI?
No. Ply is an Angular and Tailwind library installed with its own command line. MUI's Base UI is an unrelated React library. Ply was formerly named Base UI (Angular), which is why the two names get confused.
How is Ply different from shadcn/ui?
The copy-in idea is the same: real source in your repo that you own. Ply is built natively for Angular and Tailwind, and adds a diff and update workflow. For React, see the community shadcn/ui server instead.