• PRECISIÓN
  • VELOCIDAD
  • CONSISTENCIA
  • HUMANO

Cómo verificar props y tipos de componentes con tu IA

Conecta Storybook a tu cliente de IA una sola vez. A partir de ahí, tu agente podrá leer la documentación de tus componentes directamente.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo puedo revisar las props y tipos de componentes con IA?

Tu IA consulta tu librería de Storybook para obtener firmas de argumentos y valores por defecto específicos. Esto te proporciona los datos exactos para implementar el código con precisión. Obtendrás tipos de props y estados iniciales exactos para cada componente.

Resultados

Lo que obtienes con la conexión

La IA utiliza los datos de Storybook para lograr lo siguiente:

PRECISIÓN

Firmas de props exactas

La IA recupera los nombres y tipos de argumentos definidos en tus stories. No tendrás que adivinar qué props acepta un componente.

VELOCIDAD

Valores por defecto al instante

Tu agente encuentra los valores por defecto de cada argumento. Así podrás escribir código base que funcione a la primera.

CONSISTENCIA

Alineación con la librería

La IA asegura que el código que escribas coincida con la implementación real de tu librería, evitando discrepancias entre la UI y el código.

HUMANO

Revisión de código manual

La IA aporta los datos, pero tú decides cómo integrar estos componentes en la lógica de tu aplicación. Tú sigues siendo el arquitecto.

El flujo

Qué hace tu IA cuando recibe la solicitud.

La IA actúa como un puente entre tu interfaz de chat y tus archivos de Storybook.

  1. Localizar componentes

    Tu agente busca en tu librería actual para encontrar el componente específico que quieres usar.

    search_components

  2. Extraer argumentos

    Una vez localizado, la IA extrae la lista completa de argumentos y sus configuraciones actuales.

    get_story_args

  3. Validar tipos

    La IA coteja los datos obtenidos con tus requisitos para garantizar la seguridad de tipos.

    get_story_args

  4. Generar código

    El agente utiliza las firmas verificadas para escribir el código de implementación por ti.

    get_story_argssearch_components

Pruébalo

Copia estos ejemplos para empezar.

Usa estos prompts para interactuar con tu librería.

Puntos de partida

Sustituye los nombres de los componentes por los nombres reales de tu librería en Storybook.

Storybook Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  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.
Configuración · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "storybook-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_N8DIzTVbC8oiUJWVxiYw2lmtiUmexGVjlMrCUmAS/mcp"
    }
  }
}
Copia en el chat04

  • Busca el componente Button en Storybook y muéstrame todas sus props disponibles.

  • ¿Cuáles son los valores por defecto de los argumentos del componente PrimaryButton?

  • Busca el componente Card y dame la firma exacta de TypeScript para sus props.

  • Escribe el código en React para implementar el componente Input usando sus argumentos por defecto de Storybook.

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

Empieza aquí

Conecta Storybook una vez y luego pregunta.

Sigue el enlace para conectar tu librería. Tus credenciales se mantienen cifradas y podrás empezar a hacer preguntas sobre tus componentes de inmediato.

Conectar Storybook a tu IA

FAQ

Cómo funciona esta tarea

  • 01

    ¿Puede la IA modificar mis archivos de Storybook?

    No. La IA solo lee los datos de tus stories para proporcionar información. No puede modificar tus archivos.

  • 02

    ¿La IA conoce componentes que no están en Storybook?

    No. La IA solo tiene acceso a los componentes que puede encontrar mediante la herramienta de búsqueda en tu librería.

  • 03

    ¿Puedo usar esto con cualquier cliente de IA?

    Sí, siempre que el cliente sea compatible con MCP, como Claude, Cursor o Windsurf.

  • 04

    ¿La IA escribirá el código real del componente por mí?

    La IA genera código basado en las firmas de props que encuentra, pero tú eres responsable de integrar ese código en tu proyecto.

  • 05

    ¿Cómo encuentra la IA mis componentes?

    Utiliza la herramienta de búsqueda para escanear tu librería de Storybook en busca de nombres y firmas coincidentes.

  • ¿Tienes más dudas sobre Storybook? Ver todo lo que puede hacer el conector de Storybook

Conecta Storybook a Claude, Cursor, ChatGPT y más