CLI tool & MCP

[s2bomb]

Problem or use case

As a claude code/cursor user, I am having hard time aligning it to not touch the source components without providing it an example in how to implement x component.

One off components are fine, as I manually find the example in the docs or demos in this repo, but when I have a full section with a few components I then need to find many examples, and this gets tedious.

The cli tool can make this easier to find examples/implementation guides but it only provides source or examples of full pages, not examples of specific primitives and components and how they are used.

Ps. My team has been avid Untitled UI users for years now, so massive congrats for this launch! I have been excitedly anticipating it for a while.

Proposed solution

As for solutions i can think of 2 high level ways and both would suit different use cases.

1. Add demos/example/implementation details (whatever we want to call it) into the cli tool. The demo files are halfway there in the repo though they are too verbose as they include all variants in one file. Ideally (I think), if the cli could lets users select demos > {component type} > {component} > {variants of component}.

{component type} = ❖ SHARED COMPONENTS, ❖ MARKETING WEBSITE COMPONENTS, ❖ APPLICATION COMPONENTS
{component} = eg. Buttons, Button groups, etc
{variants of component} = this I am not sure of as like i said the demo has all variants which is too verbose, so maybe we split by things like hierarchy when its a button etc

2. A MCP server that like the example provided from shadcn, it has source and "Component Demos: Access example implementations and usage patterns". claude code can use the CLI tool directly but not all AI can, so a MCP is more general. I think implementation docs like whats on the website is almost perfect, both code examples and textual description/explanation of how to use this thing.

The ideal AI workflow from Untitled UI Figma to proper implementation of Untitled UI react code is that we:

1. provide the AI some limited part of the design like a section, what we provide is up for grabs, I think a copy as a png of the design can be enough but ideally a way to copy that AND the components names from a section would be awesome (this is another problem to solve so I'll move on, but the Figma API might be part of that solution).
2. Once we have the requirements set up the AI would parse what components is needed from requirements and check if source is installed using the CLI (claude code) or just checking (cursor).
3. Approach the build how it wants, most likely go one component at a time from top of the section to the bottom and at each component it uses the MCP to query the implementation docs.

• I'm not the best react/javascript dev so I can't contribute code (unless you want AI spaghetti, I'm sure you don't this repo looks beautiful) as I'm a early stage python dev but have been thrown into this world for work. So the AI workflow is vital to me but I think for the future of any good web code base (which Untitled UI is) would benefit from good AI compatibility, like MCP and CLI tool. BUT if I can contribute thoughtfully, I can and will!

Alternatives considered

No response

Examples or mockups

A shadcn example MCP -> https://github.com/Jpisnice/shadcn-ui-mcp-server