• REDUNDANCY
  • DISCOVERY
  • STRUCTURE
  • HUMAN

How to find existing UI components with your AI

Connect Storybook to your AI client once. After that, you can query your entire design system using natural language.

Ask AI about this page

Short answer

How do I find existing UI components with my AI?

Your AI uses the Storybook MCP to scan your component library and categories. It identifies matches based on your description so you don't rebuild what already exists.

Where your search leads

What you get from these searches

The AI turns your design system into a searchable knowledge base.

REDUNDANCY

Zero duplicate code

The AI identifies existing components that match your requirements. You avoid writing new CSS or logic for things already in the library.

DISCOVERY

Instant component lookup

Instead of clicking through folders, you just ask for what you need. The AI finds the right component in seconds.

STRUCTURE

Organized system view

The AI maps out your component categories. This helps you understand how the design system is organized without manual browsing.

HUMAN

Final implementation check

The AI suggests the best component to use. You decide if it actually fits the specific UI pattern you're building.

The workflow

What your AI does when the request arrives.

The AI acts as a bridge between your chat interface and your Storybook files.

  1. Map the system

    The AI looks at how your components are grouped to understand the library structure.

    list_categories

  2. List available parts

    It pulls a full list of components from specific categories to see what's available.

    list_components

  3. Targeted search

    When you describe a specific UI element, the AI searches for the closest match in the library.

    search_components

  4. Verify the match

    The AI compares your needs against the component properties to ensure it's the right choice.

    search_components

Try it

Copy these to start.

Use these prompts to begin interacting with your design system.

Starting points

Swap out the component names or categories for the ones in your specific Storybook setup.

Storybook Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Storybook capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
Copy into chat04

  • Find all the button components in my Storybook.

  • Search for any input components that handle text entry.

  • List all the categories available in my design system.

  • I need a card component for a user profile; what do we have in Storybook?

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Start here

Connect Storybook once, then ask.

Just link your Storybook instance to Vinkius. Your credentials stay encrypted, and you can immediately start asking your AI about your components.

Connect Storybook to your AI

FAQ

How this task behaves.

  • 01

    Can the AI change my component code?

    No. The AI can only read and search your Storybook data. It cannot modify your source code or files.

  • 02

    Does the AI see my private component logic?

    The AI only sees the component metadata and structure exposed through Storybook. It doesn't have access to your entire local file system.

  • 03

    Can it create new components for me?

    No. The tools only allow the AI to list, categorize, and search existing components.

  • 04

    How does it know which components exist?

    It uses the search and list tools to pull the current component registry directly from your Storybook instance.

  • 05

    Will it work with any Storybook setup?

    Yes, as long as the Storybook instance is accessible via the connection you set up through Vinkius.

  • More questions about Storybook? The Connector page answers them. See everything the Storybook Connector can do

Connect Storybook to Claude, Cursor, ChatGPT & more