shadcn/ui Resolver Connector for AI agents.
3 live capabilities
Fix missing React components and UI dependencies instantly.
Waiting for input…
Why people use shadcn/ui Resolver
Shadcn/ui Dependency Resolver stops broken React imports
This MCP changes that. It scans the code for you and tells you exactly what's missing. You get a list of packages and tags, so you can install them and move on with your day.
What Vinkius changes
You stop debugging missing UI dependencies manually.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 5,900+ Connectors
- Real-world use case 01
The Broken Dialog Scenario
You ask your agent to build a modal, it gives you code with <DialogContent>, but the app crashes because the dialog package isn't installed.
- Real-world use case 02
New Component Verification
You are unsure if a specific tag like AccordionTrigger is part of the standard shadcn/ui registry.
Complete set · 3capabilities
The complete shadcn/ui Resolver capability set.
These are the exact actions your AI can choose when you ask it to work with shadcn/ui Resolver.
01—03
3 capabilities in this set.
Part of 3 available through shadcn/ui Resolver.
- 01 Capability
Extract dependencies
Scans your code to find every shadcn/ui package and sub-component you need. It tells you exactly what is missing from your current setup.
- 02 Capability
List all registry components
Provides a full list of all shadcn/ui components that can be resolved. Use this to see the scope of supported UI elements.
- 03 Capability
Validate component registry entry
Checks if a specific string is a valid part of the shadcn/ui registry. It confirms if a component or sub-component exists in the system.
Set up in minutes
One URL. Then ask shadcn/ui Resolver to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use shadcn/ui Resolver from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_U9irMWgXv28cwSXxmqiAgD6Vnm7Obd7lVDbcbdVU/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it shadcn/ui Resolver, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable shadcn/ui Resolver for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_U9irMWgXv28cwSXxmqiAgD6Vnm7Obd7lVDbcbdVU/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the shadcn/ui Resolver URL.
- Step 03
Save and start
Save the connection and enable shadcn/ui Resolver in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"shadcnui-dependency-resolver": {
"url": "https://edge.vinkius.com/vk_preview_U9irMWgXv28cwSXxmqiAgD6Vnm7Obd7lVDbcbdVU/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using shadcn/ui Resolver
Open Agent mode in chat and ask: "Using shadcn/ui Resolver, help me...". 3 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"shadcnui-dependency-resolver": {
"url": "https://edge.vinkius.com/vk_preview_U9irMWgXv28cwSXxmqiAgD6Vnm7Obd7lVDbcbdVU/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using shadcn/ui Resolver
Ask Copilot: "Using shadcn/ui Resolver, help me...". 3 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"shadcnui-dependency-resolver": {
"url": "https://edge.vinkius.com/vk_preview_U9irMWgXv28cwSXxmqiAgD6Vnm7Obd7lVDbcbdVU/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using shadcn/ui Resolver
Open Cascade and ask: "Using shadcn/ui Resolver, help me...". 3 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"shadcnui-dependency-resolver": {
"url": "https://edge.vinkius.com/vk_preview_U9irMWgXv28cwSXxmqiAgD6Vnm7Obd7lVDbcbdVU/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using shadcn/ui Resolver
Ask Cline: "Using shadcn/ui Resolver, help me...". 3 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add shadcnui-dependency-resolver --transport http "https://edge.vinkius.com/vk_preview_U9irMWgXv28cwSXxmqiAgD6Vnm7Obd7lVDbcbdVU/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using shadcn/ui Resolver
Ask Claude: "Using shadcn/ui Resolver, show me...". 3 tools are ready
Where the request belongs
Work shadcn/ui Resolver can move forward.
Frontend engineers and React developers who are tired of seeing 'module not found' errors every time their agent generates a new component.
Frontend Engineer
Uses this to verify that newly generated UI snippets will actually run in the existing project.
React Developer
Checks for missing sub-components like DialogTrigger before committing code.
UI/UX Designer
Validates that prototype code snippets are technically viable with the current component library.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse Connectors
shadcn/ui Dependency Resolver
Resolves exact shadcn/ui component dependencies from JSX snippets.
React 19 useActionState Validator
Validates React 19 `useActionState` hook implementations in JSX snippets.
CSS Class Usage & Collision Analyzer
Identify orphaned, missing, or colliding CSS classes in your project.
Svelte 5 Rune Syntax Validator
Ensure your Svelte components strictly adhere to the new Runes API syntax.
Storybook
Connect your AI to Storybook. Explore your design system, inspect UI components, and retrieve implementation guidance programmatically.
Vue.js Excellence Prover
AI agents produce legacy Vue 2 configurations, unstable reactivity loops, and untyped interfaces. This prover enforces Vue 3 Composition API excellence, strict reactivity limits, compile-time type-safety, and optimized browser execution. Zero tolerance for Options API and raw prop mutations.
Bring your own AI
Change the model, client or framework. Keep shadcn/ui Resolver connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about shadcn/ui Resolver.
The practical details behind the request, access and result.
How does shadcn/ui Dependency Resolver fix my code?
It scans your JSX snippets to identify exactly which packages and sub-components are required, so you can install them before running the app.
Can I use this MCP with Cursor or Claude?
Yes. You can connect it to any MCP-compatible client like Cursor, Claude, or Windsurf to verify your React components.
Does it work for all React projects?
It works for any project using shadcn/ui. It specifically looks for dependencies within that registry.
What happens if a component is missing from the registry?
The capability will not recognize it as a managed dependency, so you should verify those components manually.
Do I need to install anything extra to use this?
No. Once connected via Vinkius, you can start scanning snippets immediately through your AI client.
What does the `extract_dependencies` capability return?
It returns a unique list of required components, the total count of detected components, and a list of any missing sub-components found in your snippet.
How does it identify components?
The capability scans your JSX for tags starting with an uppercase letter and matches them against a strict registry of shadcn/ui component families.
Can I verify a specific tag name?
Yes, you can use the validate_component_registry_entry capability to check if a specific string like 'AccordionItem' is recognized as a valid shadcn/ui component.
One connection away
Give your agent a direct line to shadcn/ui Resolver.
Connect shadcn/ui Resolver once. Keep it beside 5,900+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available