AI ACCESS
Give your AI a better
starting point.
Connect UIBlocks to your coding assistant. Let it search the collection, inspect real designs, read the source, and bring a matching set of blocks into your project.
01. Connect once
Streamable HTTP endpoint
https://uiblocks.org/mcpRun in the terminal where Codex is installed. The Codex CLI and editor integration share the MCP configuration.
codex mcp add uiblocks --url https://uiblocks.org/mcp
codex mcp listRefresh the client’s MCP connections or start a new chat after setup. This public library connection needs no API key. Confirm that the five UIBlocks tools appear before asking the assistant to use them.
An assistant can call only the tools exposed by its client. After connecting, check that UIBlocks is enabled in that client’s tool list. The website does not automatically add itself to other chats or editors.
02. Give it a concrete task
Start with a page goal and your actual product content. The assistant can then choose a whole recipe and inspect its screenshots before adapting individual blocks.
Use the UIBlocks MCP server to build a product landing page in this project. Use search_blocks with my page requirements or list_recipes, then get_recipe for tool-landing. Inspect its real screenshot with get_preview. Execute the single recipe install command and import its page component using the published entry and usage example. Use my real product copy and assets, keep the clean-saas typography and spacing, and connect navigation to this project. Check desktop, mobile, and long Chinese headings before finishing.中文任务示例
使用 UIBlocks MCP 为当前项目搭建产品官网。先用 search_blocks 描述页面需求，再调用 get_recipe 选择 tool-landing，用 get_preview 查看真实截图。执行返回的一条整页安装命令，按入口和示例导入页面组件，填入我提供的真实文案和素材，保持统一的字体、宽度、间距与配色。把链接和事件接到当前项目，完成后检查桌面、手机和长中文标题。Make it a project habit
Merge this rule into the consuming project’s existing AGENTS.md or equivalent editor rules. Keep the project’s other instructions.
For UI implementation, consult the UIBlocks MCP server first. Choose a complete page recipe when it fits, inspect the actual preview image, read its content boundaries and source, and install matching blocks. Preserve the recipe’s visual system and MIT notices. Adapt copy, props, links, and callbacks to this project. Verify real content at desktop and mobile widths.03. Verify the connection
Try a real MCP call
This sends the actual initialize, tools/list, and search_blocks requests used by an MCP client. It checks the service connection without invoking a language model.
What your assistant receives
list_recipes
Find a coherent starting point for a complete page.
search_blocks
Describe a scenario in English or Chinese. Receive ranked blocks and matching page recipes, with category and page-type filters.
get_recipe
Get a complete page component, one installation command, its actual source, and typed content/callback options.
get_preview
Return an actual PNG image for any block or complete page, including its captured state and viewport. A vision-capable assistant can inspect it directly.
get_block
Read actual source files, pinned dependencies, entry exports, compatibility, and original attribution.
The server discovers and reads library content. Your coding assistant executes installation commands and edits files in your authorized local project. All 93 blocks and two recipes include exact screenshots rendered from their implementations. Capture metadata records the viewport and visible state, including opened dialogs and menus.
Already using the shadcn MCP server?
Keep using it for standard registry discovery and installation. Add @uiblocks to components.json as described in the setup guide. UIBlocks’ dedicated MCP also exposes design constraints, complete installable page recipes, props contracts, ranked scenario search, and actual preview images.
Client setup follows the official Codex, Cursor, and Claude Code documentation. Library demos use fictional Frame content; connect the supplied callbacks to your real services.