UIWorld
by Alltechzone
Model Context Protocol

Give your AI editor 436 blocks to build with.

Connect the whole UI World library to Claude, Cursor, Antigravity, Windsurf or VS Code. Ask for a pricing table or a 3D gallery in plain English and it pastes the real React straight into your project, in your brand colours.

Connect it now View on npm MIT · free forever
uiworld

Add an animated pricing table in violet

search_blocks({ query: "animated pricing table" })

pricing-tilt-cards· 9 matches · pricing

Pasted into your project. Nothing left to wire up.

Free, and always will be

MIT licensed. No account, no API key, no rate limit, no paid tier waiting behind it.

Runs on your machine

The whole registry ships inside the package. It makes no network calls, so it works offline and nothing you build is ever sent anywhere.

One line to connect

Node 18+ and npx are all you need. No clone, no build step, no server to host.

Connect in three steps

Takes about a minute. Pick your editor, copy, restart, ask.

  1. 1

    Add the server

    One command in your terminal, inside any project.

    Run it from the project folder you want the blocks in.

    terminal
    claude mcp add uiworld -- npx -y @alltechzone/uiworld-mcp
  2. 2

    Restart your editor

    Close and reopen the app so it picks up the new server. You should see uiworld in the MCP or tools list, with six tools under it. The first run downloads the package through npx, which takes a few seconds. Every run after that is instant.

  3. 3

    Ask for what you need

    Find me an animated pricing table and add it to my landing pageI need a 3D gallery, show me what UI World hasAdd a bouncy bottom tab bar in violetBuild an NDIS provider landing page from the UI World templateSearch UI World for a hero with a terminal in it

    Or type /uiworld in Claude Code. One command, and it works out whether you want a block, a whole page or project setup.

    /uiworld:find animated pricing tableFind a block and add it to your project.
    /uiworld:find a whole NDIS provider landing pageBuild a page from a template.
    /uiworld:find set up this projectTokens, cn() helper and packages, once per project.

What your editor gets

Six tools covering 436 blocks and 5 full page templates.

list_categoriesEvery category with block counts. The usual first call.
search_blocksSearch by keyword, category or kind. Returns slugs and descriptions.
get_blockFull React source for one block, plus its install line. Takes a brand hex.
list_pagesThe complete landing page templates.
get_pageOne whole page as a single self-contained file.
get_setupOne-time project setup: Tailwind v4 tokens and the cn() helper.

What your project needs

  • Node.js 18 or newer, to run the server through npx.
  • React 18+ and Tailwind CSS v4 in the project you are pasting into.
  • npm i motion lucide-react clsx tailwind-merge, once per project.

Design tokens are optional. Run get_setup once to paste them into your global CSS, or skip it entirely by asking for a block in a specific colour, which writes the hex values inline.

Prefer to browse by eye?

Every block has a live preview you can theme and copy by hand, no editor required.

Browse 436 blocks Read the setup guide

Package: @alltechzone/uiworld-mcp