Search documentation

Search docs pages and sections

  • Docs home
Figma Kit
  • Getting started
  • Styles
  • Variables
  • Typeset
  • Theming
  • Components
  • Icons
  • Development
  • Updates
Registry
  • Pro Blocks
  • Templates
  • Themes
Plugin
  • Introduction
  • Generate code
  • Manage variables
  • Typeset
  • Select and install Pro Blocks
  • Security
Agent Skills
  • Agent Skills
DS Manager
  • DS Manager
  • Quickstart
  • Interface tour
  • Styles and icons
  • Colors and tokens
  • Typography
  • Radius, spacing and shadow
  • Controls
  • Brand
  • Editing components
  • Variants and states
  • Breakpoints
  • Custom components
  • ProBlocks
  • Design agent
  • MCP server
  • Lint locks
  • Publish and install
  • Share links and forks
  • Plans and limits
Licensing
  • Licensing agreement
  1. Documentation
  3. MCP server

Menu

HomePreviewPricingRoadmapHelp & Contact

Products

shadcn Componentsshadcn BlocksAgent SkillsDS ManagerNewFigma Pluginshadcn Templates

Resources

shadcn ThemesTheme GeneratorDocsAcademyBlogIcons

Legal

Licensing AgreementTerms & ConditionsPrivacy PolicyCookies

Components

AccordionAlertAlert DialogAspect RatioAttachmentAvatarBadgeBreadcrumbBubbleButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDrawerDropdown MenuEmptyFieldFormHover CardIcons - HugeIconsIcons - Lucide IconsIcons - Phosphor IconsIcons - Remix IconIcons - Tabler IconsInputInput GroupInput OTPItemKbdLabelMenubarMessageMessage ScrollerNavigation MenuPaginationPopoverProgressQuestionnaireRadio GroupResizableScroll-areaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypesetTypography

Landing Page Blocks

404 SectionsBannersBento GridsBlog SectionsCTA SectionsComparison SectionsContact SectionsEmpty LP SectionsFAQ SectionsFeature SectionsFootersGallery SectionsHeader SectionsHero SectionsLP NavbarsLanding Page ExamplesLogo SectionsPatternsPricing SectionsRich Text SectionsStats SectionsTeam SectionsTestimonials Sections

Application Blocks

App ShellsApplication ExamplesButtonsCardsDescription ListsEmpty SectionsNavbarsPage HeadersSection FootersSection HeadersSectionsSettingsSign inSign upTable Headers

E-commerce Blocks

CheckoutsExamplesIncentivesOrder Summary SectionsProduct Category SectionsProduct HeadersProduct List FiltersProduct List SectionsSale SectionsShopping CartsStore Navbars

This project is independent and not affiliated with Figma or shadcn/ui.
Copyright © 2026 Matt Wierzbicki

MCP server

Connect Claude Code, Cursor, Codex, Claude.ai or Claude desktop to DS Manager over MCP, so your coding agent can edit, import, sync and install your shadcn design system.

DS Manager is an MCP server. When you connect a coding agent to it, the agent can read and change your design systems, bring in a project's theme or a Figma design system, sync the shadcndesign Figma kit and install a published system into your project. Every change shows in the editor, and the things you decide on, such as reviews and publishing, stay with you in DS Manager.

The design agent runs inside DS Manager. The MCP server is for an agent that runs somewhere else, such as Claude Code in your project.

Who can use it

The MCP server is part of Pro and Lifetime. A Free account can try it with 50 edits and 500 reads, once. The MCP tab shows how many are left, and your agent gets a note when 10 edits or 50 reads remain. When either runs out, your agent stays connected and is told MCP is part of Pro. DS Manager checks your plan on every call, so after an upgrade the agent carries on without signing in again. See Plans and limits.

The agent runs on your own Claude, Cursor or Codex plan. MCP calls don't use the AI usage that comes with DS Manager.

Try MCP free with 50 edits

Free accounts get 50 edits and 500 reads to try it. Pro and Lifetime accounts get the full daily limits.

See plans

Server address

Add this address to your agent:

https://manager.shadcndesign.com/api/mcp

The server uses streamable HTTP and signs you in with OAuth. In your agent's config the server is named ds-manager, and it reports its name as DS Manager.

The MCP tab in Settings

The setup lives in DS Manager. Open the account menu, choose Settings… and go to the MCP tab, between API keys and Plans. The tab has five sections:

  • Address, with a Copy address button.
  • Set up your agent, with a tab for each client and a Copy setup prompt button for Claude Code, Cursor and Codex.
  • Connected agents, with the abilities of each agent and a Revoke all button.
  • Figma kit files, the kit file linked to each system.
  • Recent calls from your agents.

Connect your agent

There is a guide for five clients: Claude Code, Cursor, Codex, Claude.ai and Claude desktop. Each one ends the same way: DS Manager opens in your browser and you approve the agent on the Allow screen. You never paste a token.

Claude Code

  1. Run this command:

    claude mcp add --transport http ds-manager https://manager.shadcndesign.com/api/mcp

  2. In Claude Code, run /mcp, choose ds-manager and then Authenticate.

  3. Approve the agent in the browser.

Cursor

  1. Copy the mcp.json entry from the Cursor guide in Settings, MCP.
  2. Paste it into your mcp.json.
  3. Click Connect, then approve the agent in the browser.

Codex

  1. Run this command:

    codex mcp add ds-manager --url https://manager.shadcndesign.com/api/mcp

  2. Then sign in:

    codex mcp login ds-manager

  3. Approve the agent in the browser.

Claude.ai and Claude desktop

The Claude.ai and Claude desktop guides have the same steps.

  1. Go to Settings, Connectors, Add custom connector.
  2. Name it DS Manager and paste the server address.
  3. Click Connect, then approve the agent in the browser.

Other clients

Other MCP clients that sign in with OAuth may work, but DS Manager has no guide for them. MCP clients that run inside a web page can't connect. Claude's own connectors are the exception.

The Allow screen

When your agent connects, DS Manager opens a page that asks whether to let the agent in, for example "Allow Claude Code to use DS Manager?". The browser tab's title names the agent too. The page lists what the agent will be able to do. Check the name, then click Allow, or Cancel to stop.

Disconnect an agent

Connected agents in the MCP tab lists every agent you allowed, with what each one can do. Revoke all disconnects them.

An agent stays connected until you revoke it. An agent you leave unused for 30 days is disconnected on its own.

What the agent can do

The server gives the agent 29 tools, listed here by job.

Start and get help

  • whoami confirms the connection and shows your name and plan.
  • get_skill gives the agent DS Manager's steps for one job: build, import, convert, figma, install, locks or components.

Build and edit a system

  • list_systems lists the systems in your account and whether each is published.
  • read_system sums up one system: style, colors, radius, fonts, icons, edits, lint and whether it is published.
  • create_system makes a new system with the default look. It counts toward your plan's system limit.
  • read_tokens and read_theme read the full color table and the rest of the foundation.
  • set_tokens sets light and dark colors and adds custom tokens, in oklch or hex.
  • set_foundation changes fonts, radius, spacing, the type scale, control heights and focus.
  • view_page describes a page as text, with contrast checks that list failing pairs first. The agent uses it to check its own work.

Each change appears in the editor as the agent makes it. All the changes in one run show as one banner that names the agent and counts the values, such as "Claude Code changed 24 values", with an Undo button that takes back the whole run.

A system the agent creates appears without a reload. If no system is open, it opens on its own. Otherwise a toast offers Open.

Components and blocks

  • list_components, read_rules and find_rules find and read component styles as Tailwind utilities.
  • edit_rules restyles components by swapping, adding or removing utilities.
  • reset_rules puts rules back to the style's default.
  • variants adds, renames or removes a variant or size, such as a soft Button.
  • create_component, update_component and read_component build custom components that the kit doesn't ship, in React and TypeScript. DS Manager checks each one before it saves it.
  • list_blocks lists ProBlocks by group (Landing page, Application, E-commerce) and shows which are locked.

Lint locks

  • read_locks tells the agent your system's Lint locks in plain words and how to add shadcn's linter to the project.
  • read_lint_policy reads the published lint policy file.

An agent can't change or remove a lock, and it can't delete a component. Only you can, in DS Manager.

Import a project's theme

import_project reads a shadcn/ui project and brings its theme into DS Manager. It reads:

  • components.json
  • globals.css
  • the Tailwind config
  • the fonts in the root layout
  • the files in components/ui

Your code is read, never run. The changes wait on a review page that you apply, into a new system or an existing one.

Convert a Figma design system

convert_figma brings in a design system from another Figma file, such as Untitled UI or your company's library. It is not for the shadcndesign kit. If you give it the kit file linked to your system, it refuses and points the agent to Figma kit sync.

Give the agent the Figma file's link. The agent reads the file with Figma's own MCP tools, so your agent needs those connected. DS Manager never opens the file, and the conversion changes nothing in it.

It brings in:

  • theme tokens
  • extra colors, as custom colors
  • fonts, radius, shadows and spacing
  • the components that match a shadcn component

Components with no shadcn match are not brought in. They are listed as left out.

Converting into a new system creates it right away. Converting into an existing system opens a review page first.

Figma kit sync

figma_sync and figma_continue keep a system and its shadcndesign Figma kit file in step. There are three actions:

  • Pull brings changes from the kit into DS Manager through a review.
  • Push writes your DS Manager values into the kit after you confirm them on a review page.
  • Undo push puts back what the last push overwrote.

Sync works only with the shadcndesign Figma kit 3.0 or newer. Run it in the file that holds the kit's variables. A product file that only uses the kit as a library is refused. DS Manager is sold separately from the shadcndesign.com packages, and a kit license doesn't include DS Manager Pro.

The sync runs through your agent's own Figma MCP connection. DS Manager never talks to Figma.

Your Figma seat decides what the agent can do:

  • Push needs a Full seat on a paid Figma plan.
  • Pull works on a Dev seat.

A push only edits variables that already exist in the kit. Tablet and Mobile values, added variants and custom components stay in DS Manager, and the review page lists them under "Not in the kit".

Each system links to one kit file. The Figma kit files section of the MCP tab shows the link, with Unlink to remove it.

Install into a project

install_commands gives the shadcn CLI commands for a published system and any ProBlocks, in the right order, for npm, pnpm and other package managers. Before it runs them, the agent lists the files they will overwrite and asks you. Afterwards it runs typecheck, lint and build. See Publish and install.

Publish

publish doesn't publish. It returns a link, and you press Publish in DS Manager.

Reviews

These changes wait on a review page until you apply them:

  • a project import, into a new or an existing system
  • a Figma conversion into an existing system
  • a pull from the Figma kit
  • a push to the Figma kit, which you confirm before anything is written

review_status tells the agent whether you applied it, discarded it or still have it open.

Usage limits

Every account has these limits:

  • MCP requests: 60 a minute and 3,000 a day
  • Edits: 30 a minute and 1,000 a day
  • Imports or Figma conversions: 20 a day
  • Custom component checks: 30 a minute and 3,000 a day
  • Figma script steps: 120 a day
  • Page views (view_page): 100 a day

The daily limits reset at midnight UTC.

A Free account also has a one-time allowance of 50 edits and 500 reads, never refilled. Calls that fail don't count. When either runs out, DS Manager refuses each call with a sentence that MCP is part of Pro.

One call can send at most 1 MB and get back at most 100 KB, and it must finish within 60 seconds.