shadcn/ui MCP Server

Source-backed facts for citing this resource, derived directly from the registry — also available as plain text for AI assistants.

Canonical URL

https://heyclau.de/entry/mcp/shadcn-ui-mcp-server

Source URLs

https://github.com/Jpisnice/shadcn-ui-mcp-server/blob/master/README.md, https://github.com/Jpisnice/shadcn-ui-mcp-server

Brand

shadcn/ui MCP Server

Brand domain

github.com

Safety notes

shadcn/ui MCP Server retrieves component source, demos, blocks, metadata, dependencies, and repository structures from upstream component repositories., Generated component suggestions can add UI dependencies, copy code, or change frontend architecture when acted on by an agent., Review copied component code, dependency additions, styling choices, accessibility behavior, and framework-specific assumptions before committing changes., SSE and Docker deployment modes need normal network, CORS, and host binding review before multi-client or production use.

Privacy notes

Component names, framework choices, GitHub API tokens, prompts, tool arguments, and generated UI code may be visible to the MCP client and model provider., UI prompts can reveal unreleased product workflows, internal design systems, customer-facing screens, or implementation plans., Treat GitHub personal access tokens as secrets and avoid pasting them into prompts, logs, screenshots, or shared configuration snippets.

Author

Jpisnice

Submitted by

oktofeesh1

Claim status

unclaimed

Last verified

2026-06-05

• Component names, framework choices, GitHub API tokens, prompts, tool arguments, and generated UI code may be visible to the MCP client and model provider.
• UI prompts can reveal unreleased product workflows, internal design systems, customer-facing screens, or implementation plans.
• Treat GitHub personal access tokens as secrets and avoid pasting them into prompts, logs, screenshots, or shared configuration snippets.

• Node.js and npx available to the MCP client runtime.
• Optional GitHub personal access token for higher GitHub API rate limits.
• A selected framework target such as React, Svelte, Vue, or React Native.
• A project where copied component code and dependencies can be reviewed before use.

Show that shadcn/ui MCP Server is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

[![Listed on HeyClaude](https://heyclau.de/badge/mcp/shadcn-ui-mcp-server.svg)](https://heyclau.de/entry/mcp/shadcn-ui-mcp-server)

shadcn/ui MCP Server side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

Field	shadcn/ui MCP Server MCP server that gives Claude access to shadcn/ui component source, demos, blocks, metadata, and multi-framework implementations. Open dossier	designlang MCP Server MCP server for extracting design systems from live websites, including design tokens, regions, components, contrast data, Tailwind themes, Figma variables, and prompt packs. Open dossier	AFFiNE MCP Server MCP server for connecting Claude to AFFiNE Cloud or self-hosted AFFiNE workspaces, documents, databases, comments, collections, folders, tags, notifications, blobs, access tokens, semantic page composition, templates, edgeless canvas data, and workspace organization workflows over stdio or HTTP. Open dossier	Agent Device MCP Server Official MCP server for agent-device, Callstack's device automation CLI for inspecting, controlling, debugging, recording, and collecting evidence from iOS, Android, TV, macOS, Linux, React Native, Expo, Flutter, and native apps. Open dossier
Next steps	Open dossierCopy installCopy configAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing	Open dossierCopy installCopy configAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing	Open dossierCopy installCopy configAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing	Open dossierCopy installCopy configAPI JSONOpen LLMMCP feedOpen sourceNewsletterClaim listing
Trust	Review first	Review first	Review first	Review first
Review status	Not reviewed	Not reviewed	Not reviewed	Not reviewed
Package trust	Package not verified	Package not verified	Package not verified	Package not verified
Source provenance	Source-backed	Source-backed	Source-backed	Source-backed
Submitter	oktofeesh1	oktofeesh1	oktofeesh1	oktofeesh1
Install risk	Review first	Review first	Review first	Review first
Notes	Safety ✓ Privacy ✓	Safety ✓ Privacy ✓	Safety ✓ Privacy ✓	Safety ✓ Privacy ✓
Brand	—	—	—	agent-device
Category	mcp	mcp	mcp	mcp
Source	Source-backed	Source-backed	Source-backed	Source-backed
Author	Jpisnice	Manavarya09	DAWNCR0W	Callstack
Added	2026-06-05	2026-06-05	2026-06-06	2026-06-06
Platforms	Claude CodeCodexCursorClaude Desktop	Claude CodeClaude Desktop	Claude CodeClaude Desktop	Claude CodeClaude Desktop
Harness	Claude CodeCodexCursorClaude Desktop	Claude CodeClaude Desktop	Claude CodeClaude Desktop	Claude CodeClaude Desktop
Source repo	—	—	—	—
Safety notes	✓shadcn/ui MCP Server retrieves component source, demos, blocks, metadata, dependencies, and repository structures from upstream component repositories. Generated component suggestions can add UI dependencies, copy code, or change frontend architecture when acted on by an agent. Review copied component code, dependency additions, styling choices, accessibility behavior, and framework-specific assumptions before committing changes. SSE and Docker deployment modes need normal network, CORS, and host binding review before multi-client or production use.	✓designlang uses Playwright to crawl live pages and can capture DOM-derived styles, responsive behavior, interaction states, screenshots, and accessibility findings. Authenticated extraction options can use cookies, cookie files, headers, and custom user agents, so never pass production session cookies or credentials unless approved. Generated outputs may include design tokens, Tailwind config, shadcn variables, Figma variables, component anatomy, prompts, screenshots, reports, and cloned starter code. Commands such as apply, clone, sync, drift, visual-diff, and MCP extraction can read live websites and write files in the configured output or project directory. Review extracted prompt packs and generated code before using them in another agent workflow or committing them.	✓The full tool surface can create, update, publish, revoke, move, replace, and delete AFFiNE workspaces, documents, folders, collections, comments, database rows, blobs, surface elements, tags, and access tokens. Start with AFFINE_TOOL_PROFILE=read_only or disable groups such as destructive, admin, blobs, users, access_tokens, docs.database, or write when the assistant only needs discovery or reading. HTTP mode exposes MCP endpoints and must be protected with bearer or OAuth authentication, HTTPS, allowed origins, and deployment-level access controls. AFFiNE Cloud requires API tokens for MCP usage; avoid trying to automate email/password login against Cloud deployments. Cookie and password-based auth can grant broad account access and should be avoided for unattended or shared deployments.	✓Agent Device MCP exposes structured tools backed by `AgentDeviceClient`; the docs state it does not expose generic shell execution over MCP. Tools and CLI workflows can open apps, inspect UI, tap, type, scroll, perform gestures, wait, assert state, handle alerts, and close sessions. Evidence workflows can capture screenshots, recordings, logs, traces, network traffic, performance samples, crash context, React profiles, and replay files. Mutating commands should run serially against one session, and separate sessions or devices should be used for parallel work. Prefer dedicated test devices or simulators, and require approval before entering credentials, submitting forms, changing settings, installing apps, sending messages, or touching production accounts.
Privacy notes	✓Component names, framework choices, GitHub API tokens, prompts, tool arguments, and generated UI code may be visible to the MCP client and model provider. UI prompts can reveal unreleased product workflows, internal design systems, customer-facing screens, or implementation plans. Treat GitHub personal access tokens as secrets and avoid pasting them into prompts, logs, screenshots, or shared configuration snippets.	✓URLs, page content, DOM text, CSS, screenshots, fonts, images, design tokens, cookies, headers, prompts, tool arguments, reports, and generated files may be visible to the MCP client and model provider. Authenticated or internal sites can expose product plans, unreleased UI, customer data, analytics identifiers, private brand assets, and implementation details. Output directories can retain extracted website data after the MCP session ends. Avoid running the server against private, paid, internal, or authenticated properties without legal and security approval.	✓Workspaces, document titles, document bodies, comments, tags, database schemas, database rows, edgeless canvas data, notifications, user profiles, access-token metadata, blobs, and exported markdown can be sent to the MCP client and model. API tokens, cookies, passwords, bearer tokens, OAuth config, and saved config files should be treated as secrets and kept out of prompts, logs, screenshots, issues, and committed MCP config. Generated or modified documents can persist in AFFiNE and may become visible to collaborators depending on workspace permissions and sharing state. Blob upload, cleanup, export, and publish/revoke workflows can expose files, generated content, or collaboration state beyond the current prompt.	✓Screenshots, recordings, traces, logs, network dumps, replay files, reports, UI snapshots, typed input, and React profiles can contain private UI state, tokens, request data, customer information, or credentials. macOS, iOS, Android, and TV automation can expose local app state, notifications, device names, package identifiers, app content, system dialogs, and permission prompts. Network inspection artifacts may include headers, payloads, session identifiers, URLs, and API data; review before sharing or committing. Interactive CLI runs may check npm for newer package versions unless `AGENT_DEVICE_NO_UPDATE_NOTIFIER=1` is set.
Prerequisites	Node.js and npx available to the MCP client runtime. Optional GitHub personal access token for higher GitHub API rate limits. A selected framework target such as React, Svelte, Vue, or React Native. A project where copied component code and dependencies can be reviewed before use.	Node.js 20 or newer available to the MCP client runtime. Network access to the websites you plan to extract. Permission to crawl and analyze the target sites. Playwright or Chromium installation behavior reviewed for the local environment.	Node.js and npm for installing the affine-mcp-server package. AFFiNE Cloud API token or approved self-hosted AFFiNE credentials. AFFiNE base URL for the Cloud or self-hosted deployment. Clear workspace scope and least-privilege tool profile before enabling write, admin, destructive, blob, or access-token tools.	Node.js 22 or newer and `agent-device` installed globally or project-locally. Xcode tooling for iOS, tvOS, or macOS targets, or Android SDK and ADB for Android targets. Device, simulator, emulator, TV, macOS, or Linux desktop target that the agent is allowed to automate. Required local permissions such as Android device trust, iOS Developer Mode, macOS Accessibility, and Screen Recording where applicable.
Install	npx @jpisnice/shadcn-ui-mcp-server Copy install	npx -y designlang mcp Copy install	npm i -g affine-mcp-server Copy install	claude mcp add --transport stdio --scope user agent-device -- agent-device mcp Copy install
Config	{ "mcpServers": { "shadcn": { "command": "npx", "args": ["@jpisnice/shadcn-ui-mcp-server"] } } } Copy config	{ "mcpServers": { "designlang": { "command": "npx", "args": ["-y", "designlang", "mcp", "--output-dir", "./design-extract-output"] } } } Copy config	{ "mcpServers": { "affine": { "command": "affine-mcp", "env": { "AFFINE_BASE_URL": "<affine-base-url>", "AFFINE_API_TOKEN": "<affine-api-token>", "AFFINE_TOOL_PROFILE": "read_only" } } } } Copy config	{ "mcpServers": { "agent-device": { "command": "agent-device", "args": ["mcp"] } } } Copy config
Citations	Source repositorygithub.com 2026-07-21T05:16:31+00:00 Documentationgithub.com Submitted by oktofeesh12026-06-05 Source methodology →	Source repositorygithub.com 2026-07-21T05:16:31+00:00 Documentationgithub.com Submitted by oktofeesh12026-06-05 Source methodology →	Source repositorygithub.com 2026-07-21T05:16:31+00:00 Documentationgithub.com Submitted by oktofeesh12026-06-06 Source methodology →	Source repositorygithub.com 2026-07-21T05:16:31+00:00 Documentationgithub.com Submitted by oktofeesh12026-06-06 Source methodology →
Claim	Unclaimed	Unclaimed	Unclaimed	Unclaimed

Source-backed guides for putting this to work.