An astronaut overseeing a futuristic data hub
Télécharger le PDFVersion Markdown

Connectez Storybook à ChatGPT, Claude et Gemini

Configurez-le une fois et il fonctionne avec ChatGPT, Claude, Cursor et n'importe quel autre client que vous aimez. Tout s'exécute en toute sécurité en arrière-plan, pour que vous puissiez vous détendre et vous concentrer sur l'essentiel. Pilotez votre bibliothèque de composants par simple commande textuelle.

Demandez à l'IA à propos de ce Connector

Développé, maintenu et hébergé par Vinkius.

MCP VÉRIFIÉ · PRÊT POUR LA PRODUCTION · GARANTIE VINKIUS

Waiting for input…

Works with modern AI clients that support MCP, including ChatGPT, Claude, Cursor, and more.

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Votre IA fait le travail. Nous veillons dessus, en toute sécurité.

Aucun autre outil d'IA ne vous offre ça. Votre workflow s'exécute dans le client que vous aimez déjà, votre compte reste protégé, et vous décidez ce que l'agent peut ou ne peut pas faire. C'est la vraie raison de faire le pas.

Chaque Connector vit dans notre infrastructure, là où votre workflow s'exécute. Les trois choses ci-dessous en font déjà partie et travaillent discrètement en arrière-plan pour que vous n'ayez jamais à y penser. Rien à ajouter, rien à configurer, aucune inquiétude à avoir.

A futuristic MCP client docking bay
V8 Isolate01

Chaque Connector s'exécute dans son propre environnement scellé.

Chaque Connector s'exécute dans son propre runtime V8 scellé, sans accès à vos fichiers, à votre système ni aux autres serveurs. Un Connector ne voit jamais au-delà de sa propre requête.

Kill Switch02

Un seul interrupteur arrête tous les agents. Immédiatement.

Une seule action désactive tous les Connectors, révoque tous les tokens et termine toutes les sessions d'un coup. La Gouvernance de l'IA conserve le registre.

FinOps par utilisateur03

Des limites de dépense qui s'interrompent au lieu de surprendre.

Chaque utilisateur garde ses propres connexions et identifiants, isolés de ceux des autres. Ce qui dépasserait votre limite de dépense est stoppé et mis en attente de votre approbation, pas facturé.

Trois contrôles, intégrés à la couche par laquelle votre IA se connecte.

Sélection · 6 capacités

Nous ne livrons que les actions qui comptent.

Ensemble de capacités01 / 02

01-03

3 capacités dans cet ensemble.

Sur 6 disponibles via Storybook.

  1. 01

    Générer un aperçu

    Crée une URL de prévisualisation pour tester un composant dans un environnement isolé.

  2. 02

    Récupérer les arguments

    Extrait les métadonnées et les arguments par défaut d'un composant spécifique.

  3. 03

    Lister les composants

    Affiche tous les composants UI disponibles, avec la possibilité de filtrer par catégorie.

Ensemble de capacités02 / 02

04-06

3 capacités dans cet ensemble.

Sur 6 disponibles via Storybook.

  1. 04

    Extraire la documentation

    Fournit des instructions sur la manière de consulter la documentation d'un composant.

  2. 05

    Lister les catégories

    Affiche la structure des dossiers et les catégories de haut niveau du Design System.

  3. 06

    Rechercher des composants

    Permet de trouver des composants précis via un nom ou un mot-clé.

Travail réel

Ce que les équipes font tourner

01

Component Discovery

Ask your agent to find if a specific UI pattern already exists in your library before you start coding it.

02

Prop Verification

Use the agent to check the exact types and default values for a component's arguments.

03

Rapid Prototyping

Generate preview URLs for components to quickly verify visual changes in a sandbox.

04

Code Mapping

Locate the exact file paths for components to help your agent write more accurate imports.

Automatisez une tâche

Mettez Storybook au travail sur une chose.

Des automatisations étape par étape que votre IA exécute via ce Connector : le flux, les prompts pour démarrer et les capabilities exactes derrière chaque étape.

Un connector, toutes les IAs

Storybook fonctionne avec les clients IA les plus populaires.

Voici les clients les plus populaires, chacun avec un guide pas à pas : un lien, configuré une fois, avec gouvernance et visibilité intégrées. Et comme tout tourne sur le standard MCP, la même connexion fonctionne aussi dans tout autre client compatible : rien à reconstruire.

ClaudeClaudeChatGPTChatGPTGeminiGeminiPerplexityPerplexityGrokGrokMicrosoft CopilotMicrosoft CopilotCursorCursorVS CodeVS CodeWindsurfWindsurfJetBrainsJetBrainsClineClineLangChainLangChainVercel AI SDKVercel AI SDKLovableLovableZ.aiZ.aiRaycastRaycastQwen CodeQwen CodeKimi CodeKimi CodeLe ChatLe Chat

Vous construisez votre propre app ? Le connector est à vous.

Vous n'avez pas besoin d'un client pour mettre Storybook au travail : la même connexion hébergée se branche sur vos propres applications et le code de votre agent, avec la même gouvernance à chaque requête. Construisez avec lui, discutez avec lui : une connexion pour les deux.

Observée, pas estimée

Moyenne de 889 ms. Rapide en production.

Storybook est vérifié quotidiennement contre le service en production.

Moyenne quotidiennePic à 1013 ms
3 oct.Aujourd'hui
Jour le plus rapide
750ms
Jour le plus lent
1013ms
Tendance sur 14 jours
En ralentissement+8%

Connectez votre client

Une URL. Tous les clients.

Activez le Connector, copiez votre lien et collez-le dans le client que vous utilisez déjà. 6 capacités arrivent prêtes à l'emploi.

Accès aperçu · pas d’authentification du fournisseur

Le jeton vk_preview_* appartient à l’infrastructure d’aperçu de Vinkius. Il permet à Claude de découvrir et d’afficher les capacités de Storybook, pour que vous voyiez l’expérience dans votre IA.

Il n’authentifie pas votre compte auprès de Storybook. Les actions nécessitant des identifiants ou des données de compte réelles peuvent ne pas s’exécuter tant que vous n’avez pas activé le Connector et autorisé le service.

Storybook Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

  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.jsonCopier
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Les instructions pas à pas pour chaque client sont dans le guide. Comment connecter

Configuration guidée pour Claude ? Configurer Storybook avec Claude et les autres IA

Voyez tous les clients IA avec lesquels ce connector fonctionne ↑

Pour qui

Conçu pour le travail que les utilisateurs de Storybook délèguent.

Ce connecteur est conçu pour les équipes produit travaillant sur des interfaces complexes.

  • 01

    Ingénieurs Frontend

    Pour découvrir rapidement les éléments UI existants et leurs propriétés sans quitter l'éditeur de code.

  • 02

    Designers UI/UX

    Pour valider et auditer les structures de composants déployées de manière programmatique.

  • 03

    Rédacteurs Techniques

    Pour extraire automatiquement les liens de documentation et maintenir des guides de design à jour.

FAQ

Les questions des utilisateurs de Storybook.

  • 01

    How does the MCP get my component data?

    The MCP reads the static index.json file that Storybook generates, which contains the full hierarchy of your components.

  • 02

    Do I need to change my Storybook setup?

    No, you just need to provide the URL of your already deployed Storybook instance.

  • 03

    Can I see what the components look like?

    Yes, you can ask your agent to generate a preview URL, which provides an isolated iframe sandbox for the component.

  • 04

    Which AI clients can use this?

    This MCP works with any MCP-compatible client, including Claude, Cursor, Windsurf, and VS Code.

  • 05

    Can it help me write code?

    Yes, by retrieving prop signatures and local source paths, it gives your agent the context needed to write accurate implementation code.

  • 06

    Does it require API keys or OAuth?

    No. The MCP reads the static index.json file generated by your Storybook build. As long as the agent can reach the STORYBOOK_URL over the network, no additional authentication is needed.

  • 07

    Is the integration read-only?

    Yes. The AI reads component metadata, props, and documentation from the static index. It cannot modify actual React, Vue, or Angular source files through this integration.

  • 08

    Which UI frameworks are supported?

    Any framework supported by Storybook. React, Vue, Angular, Svelte, Web Components, and more. The MCP reads the universal index.json format, which is framework-agnostic.

Explorer

Plus dans Loved By Devs

Suggestions

Connectez Storybook à Claude, Cursor, ChatGPT et d'autres