¿Puede la IA cambiar mi código directamente?

No. La IA solo puede encontrar componentes y generar URLs de previsualización. Debes aplicar los cambios de código en tu propio editor.

¿Necesita la IA mi usuario de Storybook?

No. Conectas el MCP a través de Vinkius, que gestiona la conexión de forma segura. Tu cliente de IA no necesita tus credenciales.

¿Puede la IA crear nuevas stories por mí?

No. Las herramientas solo permiten a la IA buscar componentes existentes y obtener URLs de historias ya creadas.

¿La previsualización mostrará mis variables de entorno locales?

La URL de previsualización apunta a tu instancia de Storybook. Se comportará según cómo esté configurado tu Storybook para manejar datos.

¿Puedo usar esto con Cursor?

Sí. Cualquier cliente compatible con MCP, como Cursor, Claude o Windsurf, puede usarlo una vez conectado.

VISUALBÚSQUEDAVERIFICACIÓNHUMANO

VISUAL
BÚSQUEDA
VERIFICACIÓN
HUMANO

Cómo previsualizar componentes con tu IA y Storybook

Conecta Storybook a tu cliente de IA una sola vez. Después, podrás ver previsualizaciones de componentes en vivo directamente en tu chat.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo puedo ver mis componentes de Storybook en el chat de mi IA?

Tu IA utiliza el MCP de Storybook para localizar componentes específicos y generar URLs de iframes únicas. Obtendrás un enlace directo a un entorno de sandbox donde el componente se renderiza de forma aislada. Esto te permite verificar cambios visuales o de comportamiento inmediatamente después de pedir una actualización de código.

Resultados

Lo que obtienes con esta conexión

La IA se encarga de la búsqueda técnica y la generación de URLs, permitiéndote concentrarte en la interfaz.

VISUAL

Previsualizaciones instantáneas

La IA encuentra el componente correcto y te da una URL. Solo tienes que hacer clic para verlo renderizado en un iframe aislado.

BÚSQUEDA

Descubrimiento de componentes

Si no conoces el nombre exacto, tu IA busca en tu librería de Storybook hasta encontrar el componente adecuado.

VERIFICACIÓN

Feedback visual rápido

Cuando la IA modifica el código, puedes solicitar una nueva URL de previsualización para confirmar que el ajuste funcionó.

HUMANO

Edición manual de código

La IA no puede reescribir tus archivos locales ni hacer commits. Tú sigues controlando el guardado de archivos y el flujo de git.

El flujo

Lo que hace tu IA cuando pides una previsualización

La IA actúa como puente entre tu interfaz de chat y tu instancia de Storybook.

Localizar el componente
La IA escanea tu librería de Storybook para identificar el componente específico que quieres ver.
search_components
Generar el enlace de sandbox
Una vez localizado, la IA crea una URL directa que apunta a un iframe aislado de ese componente.
get_preview_url
Entregar la URL
La IA presenta el enlace en tu ventana de chat para que accedas de inmediato.
get_preview_url
Validar cambios
Tras solicitar un ajuste visual, la IA repite la búsqueda y generación para mostrar el estado actualizado.
search_componentsget_preview_url

Pruébalo

Copia estos ejemplos para empezar

Usa estos prompts para activar las herramientas de Storybook.

Puntos de partida

Estas son peticiones básicas. Cambia los nombres de los componentes por los de tu proyecto real.

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.

1In Claude Desktop, open Settings → Connectors.
2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
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 dame una URL de previsualización.
Busca todos los componentes relacionados con 'Navigation' y muéstrame sus enlaces de previsualización.
Necesito ver el componente Modal en un sandbox aislado. ¿Puedes conseguir la URL?
Muéstrame la previsualización del componente PrimaryButton para que pueda revisar el padding.

Claude
ChatGPT
Cursor
VS Code
Windsurf
Claude Code
JetBrains
Cline

Empieza aquí

Conecta Storybook una vez y luego pregunta.

Solo tienes que vincular tu instancia de Storybook a Vinkius. Tus credenciales se mantienen cifradas y estarás listo para previsualizar componentes en cualquier cliente compatible con MCP.

Conectar Storybook a tu IA

FAQ

Cómo funciona la previsualización de Storybook

01
¿Puede la IA cambiar mi código directamente?
No. La IA solo puede encontrar componentes y generar URLs de previsualización. Debes aplicar los cambios de código en tu propio editor.
02
¿Necesita la IA mi usuario de Storybook?
No. Conectas el MCP a través de Vinkius, que gestiona la conexión de forma segura. Tu cliente de IA no necesita tus credenciales.
03
¿Puede la IA crear nuevas stories por mí?
No. Las herramientas solo permiten a la IA buscar componentes existentes y obtener URLs de historias ya creadas.
04
¿La previsualización mostrará mis variables de entorno locales?
La URL de previsualización apunta a tu instancia de Storybook. Se comportará según cómo esté configurado tu Storybook para manejar datos.
05
¿Puedo usar esto con Cursor?
Sí. Cualquier cliente compatible con MCP, como Cursor, Claude o Windsurf, puede usarlo una vez conectado.
¿Más dudas sobre Storybook? Ver todo lo que puede hacer el conector de Storybook

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