Skip to content

shadcn/ui components in every Manus task

Add shadcn.io as a custom connector, and Manus builds pages from real blocks, checks each component's props and gets the install for your framework, in the cloud or on your desktop. The connector comes with every Pro plan.

Get ProSet it up
Kind
App
Goes in
Settings → Connectors → Custom MCP
Connects
Over HTTP
Team config
No
Its docs
None

Add it as a custom MCP connector

Manus keeps MCP servers as connectors on your account, so one connector serves every task. Signed in with Pro, the three fields beside the steps hold your URL.

  1. Copy the three fields

    The server URL beside these steps carries your token as ?token=, so there's no header to add. No token yet? Create one on your account.

  2. Start a custom MCP

    In Manus, go to Settings → Connectors, choose Add connectors, open the Custom MCP tab and pick Direct configuration. Manus's connectors page (opens in a new tab) names the same form Create → Add MCP by URL.

  3. Fill in the form and save

    Server name shadcnio, transport HTTP, and the whole URL, ?token= included. When you save, Manus contacts the server and fetches its 22 tools.

  4. Switch it on in a task

    Start a task, switch shadcnio on from the connectors button under the message box, and name it in your first prompt (use shadcnio…).

Settings → Connectors → Custom MCP
Sign in to get your config
Sign in with a Pro account, and this holds your MCP URL, ready to paste.
GoogleGitHub
Use email insteadPart of Pro

How it reads, with YOUR_TOKEN where your token goes:

Server name:    shadcnio
Transport type: HTTP
Server URL:     https://www.shadcn.io/api/mcp?token=YOUR_TOKEN

Manus saves the URL with your account's connectors, not on your computer, so any task you start can switch it on. Your token is a key: regenerate it if it ever leaks.

What Manus does with an install, by where it works
Where Manus worksWhat it does with the install
A cloud taskRuns it in its own sandbox, or hands you the command and the files for your project
Manus Desktop, My ComputerRuns npx shadcn add in a folder you added, once you click Allow Once or Always Allow
A website builder projectWrites the components into the app's React and Tailwind code, which you can export or sync to GitHub

See it answer in a task

Settings → Connectors lists shadcnio beside your other connectors once it's saved, and a task shows its calls as it works.

  1. Open Settings → Connectors and find shadcnio among your connectors.
  2. Start a new task and switch shadcnio on for it.
  3. Send the prompt below: Manus calls whoami and replies with your account and the calls you have left this minute.
Prompt
use shadcnio to tell me which account I'm connected as

Three Manus tasks, with the connector on

Three jobs people hand Manus: a site in the website builder, a change in a folder on your computer through Manus Desktop, and files for a Nuxt app. Switch the MCP off to see what Manus does without it.

Your agent
  1. shadcn.io MCP connected · 22 tools
  2. You: Build a website for my pottery studio with class prices, reviews and a booking form.
  3. MCP call: plan_page({ brief: "site for a pottery studio that sells weekend classes", kind: "marketing" })Returns: Hero, pricing, testimonials and contact, two alternatives each
  4. MCP call: get_block({ names: ["hero-centered-masonry-gallery", "pricing-three-columns", "testimonials-with-photo", "contact-booking"], include: ["install"] })Returns: One shadcn add command for all four
  5. Agent step: Ran the command in its sandboxReturns: Four sections in the app's components
  6. Agent step: Rebuilt the live previewReturns: The page, with the studio's own copy
  7. Your agent: Your studio site has a gallery hero, three class plans, student reviews and a booking form, all in the live preview.

In your project

Pottery studio site

  • Four sections from real blocks
  • Copy rewritten for the studio

1 prompt → 2 MCP calls

Prompts for a Manus task

Paste one into a new task. A cloud task can't see your project, so the prompts that touch one say the framework.

Prompts
use shadcnio to build a one-page site for my yoga studio with the class schedule, prices and a contact form
use shadcnio to plan the screens of a habit tracker app and list the blocks each screen uses
use shadcnio to compare three pricing blocks for a two-plan SaaS and tell me which one fits
use shadcnio to give me the Vue files for a date picker and the packages to install, as a zip
use shadcnio to restyle my website builder project after Aesop's DESIGN.md
use shadcnio to find Lucide icons for a five-tab mobile nav in a Svelte app
use shadcnio to add a command menu to the app in my projects folder
use shadcnio to tell me which props Combobox takes on React Aria

Get more from it in Manus

The parts of Manus that make the connector pay off: Projects, Skills, Manus Desktop and the website builder.

  • Make it a Project default

    Connect shadcnio in a Project and it's on for every new task there. A line in the Project's instructions makes those tasks reach for it before writing UI by hand.

    For any UI work, use the shadcnio connector: plan pages with plan_page, look for a component before writing one, and use the install it returns.

  • Turn a good run into a Skill

    When a task gets the workflow right, ask Manus to save it as a Skill (Skills → + Add → Build with Manus). Type / in the message box to run it again in any task.

  • Let Manus Desktop run the install

    With My Computer in Manus Desktop, click Add Folder for your project, and Manus can run the install it got from the server there. Every command waits for Allow Once, or Always Allow for a task you trust.

  • Say your stack in cloud tasks

    A cloud task can't open your package.json, so the tools fall back to React on Base UI. Put the framework, the primitives and the package manager in the prompt.

    use shadcnio for SvelteKit with pnpm: add a combobox for the country field

  • Pair the builder with GitHub

    Website builder projects are React and Tailwind, so blocks drop in as they are. Connect GitHub from the project and Manus pushes each change to main, and pulls your own edits before its next one.

  • Share replays without the token

    Sharing a task's replay doesn't share your token: Manus hides connector output in shared sessions and redacts keys. The connector itself stays on your account.

When Manus can't reach it

What goes wrong between Manus and the server, and the fix. The troubleshooting guide covers every client.

Manus won't save the connector, or says it can't connect.
Check the transport is HTTP and that the URL still ends in ?token= with the whole token: a URL cut at the ? reaches nothing. Paste it again from this page.
A task's step fails with 401 Unauthorized.
The URL's token is missing, or you regenerated it after saving. Open shadcnio in Settings → Connectors and replace the server URL with the one on this page.
Calls come back 403 Pro required.
Manus got through and the token is real, but the shadcn.io account it belongs to has let Pro lapse. Renew it and the same connector works again within a few minutes, with nothing to change in Manus.
Manus answers from memory and never calls shadcnio.
Check the connector is switched on for this task, then name it: use shadcnio to…. In a Project, a line in its instructions makes that the default.
Manus says it can't install into your project.
A cloud task works in its own sandbox, not on your machine. Copy the command it gives you, ask for the files (get_install_plan), or run the task in Manus Desktop with the folder added under My Computer.
A long task stops on 429 Too Many Requests.
It passed 600 calls in a minute, usually a step repeating itself. Wait the minute the Retry-After header names, then give the task a narrower goal.

Get the MCP for Manus with Pro

The MCP comes with every Pro plan, with every block and premium template, for you or your whole team. Monthly, yearly or lifetime.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

Frequently asked questions

The shadcn MCP in Manus: setup, limits, and the rest.

Using another agent too?

The same URL works in every MCP client: use it beside Manus, in your editor, your terminal or your chat app.

See all 38 agents

4.9 out of 5 from 150+ developers

Build real UI from your next Manus task

Pro gives Manus every component, 6,181 blocks and 294k icons through one connector, whether it works in the cloud or on your desktop.

Get Pro
  • Cancel anytime
  • Keep what you've shipped