Prodular UI

AI ready

Two things have to be true. Your product needs components for the AI features people now expect, and the coding agent building it needs to know how to use them.

Components for AI features

Composer, streaming responses, reasoning, tool calls, sources, agent runs, approvals, model pickers and usage meters. They share one visual language: a single gradient, a single tint and a single mark for anything a model made. People learn it once and recognise it everywhere in your product.

Rules your agent can read

Every component page has a section called Rules for AI agents. The same rules are published as plain text, so Claude Code, Cursor or any other agent gets them before it writes a line of UI.

https://ui.prodular.co/llms.txthttps://ui.prodular.co/llms-full.txt

Connect your agent over MCP

The Prodular UI MCP server gives your agent the kit before it writes a line. It reads the rules, searches components and full-page blocks by what you need, sees your theme and what is already installed, installs what is missing and checks the code it wrote for raw colors, hand-rolled controls, nested cards and unmarked AI output.

npx prodular-ui mcp init --client claude

Use --client cursor or --client vscode for those editors. The MCP server page lists every tool, prompts to try and setup for other agents.

Tell your agent once

Paste this into AGENTS.md or CLAUDE.md at the root of your repo.

AGENTS.md
## UI
This project uses Prodular UI. Before writing UI:
- Read https://ui.prodular.co/llms.txt and the page of every component you use.- Install components with `npx shadcn@latest add @prodular/<name>`. Do not hand-roll a component that exists.- Use semantic tokens only (bg-card, text-muted-foreground, border-border). No raw colors.- Mark anything a model produced with AiMark, Message or Reasoning.- Irreversible or external actions taken by an agent go through Approval.- One container level. Separate content inside cards with dividers, not nested boxes.