# UIBlocks

> Curated React blocks and complete page recipes, served by TanStack Start.

## Connect your coding assistant
- MCP endpoint (Streamable HTTP): https://uiblocks.org/mcp
- [AI setup](/ai-access): Codex, Cursor, and Claude Code configuration plus a real connection test.
- Public read-only tools, no API key. The coding client must enable the connection; the library cannot add tools to unrelated chats automatically.
- Tools: list_recipes, search_blocks, get_recipe, get_preview, get_block.
- Call get_preview to inspect the actual PNG for any of the 93 blocks and 2 recipes (95 exact screenshots). Check capture.state and viewport; an opened dialog or menu is a recorded visual state, not a claim about the component's initial state.
- The server returns source and installation commands. The coding agent executes those commands in its authorized local consumer project.

## Discovery
- [Catalog](/catalog.json): purposes, bilingual tags, versions, source attribution, and content boundaries.
- [Registry](/r/registry.json): standard shadcn registry index, also compatible with the official shadcn MCP.
- [Agent rules](/ai-usage.md): selection, installation, and visual verification workflow.
- [Preview provenance](/previews/manifest.json): exact images, captured states, viewport/dimensions, dependency hashes, and PNG hashes.
- [Registry setup](/docs): merge @uiblocks into existing components.json.

## Complete pages
- [AI tool landing page](/recipes/tool-landing.json): A complete, quietly confident product page. Introduce your tool, show its workflow, explain the plans, and answer the questions that matter. Live preview: /preview/recipes/tool-landing
- [File processing workspace](/recipes/tool-workspace.json): A focused media workspace with local file selection, output controls, a filterable task queue, downloadable demo previews, and a clear usage summary. Live preview: /preview/recipes/tool-workspace

## Build a page
1. Start with list_recipes or search_blocks using a page goal, scenario, English keywords, or Chinese requirements.
2. Read get_recipe and inspect get_preview. Complete recipes install as one package; get_block remains available for individual designs.
3. Preserve the clean-saas typography, spacing, and layout; use the content guidelines.
4. Install with shadcn CLI, honoring the consumer aliases and dependencies. meta.entry and meta.exportName identify the installed component.
5. Install a complete page with one recipe command, import its component, and adapt real copy, host navigation, and callbacks. Workspace simulation requires explicit demo mode.
6. Check desktop, mobile, long names, and empty/loading/error/completed states. Preserve MIT notices.

All current blocks use framework-independent React and Tailwind CSS 4. They work in TanStack Start, Vite, or Next.js host applications. The Frame workspace is a local UI simulation and does not convert or upload videos.