skybridge: Apps que viven dentro de Claude y ChatGPT, hechas con React y tipado en serio.

Apps que viven dentro de Claude y ChatGPT, hechas con React y tipado en serio.

Anthropic y OpenAI están convirtiendo sus chatbots en plataformas. Skybridge te deja construir apps que corren adentro de Claude y ChatGPT escribiendo React con tipos, sin pelearte con HTML crudo ni con el protocolo MCP a mano.

Estrellas

1.2k★

Lenguaje

TypeScript

Apps de ejemplo

11+

Revisado

24 may 2026

De un vistazo, lo que vas a obtener si lo instalas.

React de verdad

Componentes tipados, hooks, props. No emites strings de HTML desde el servidor — escribes UI como en cualquier app web moderna.

Plataforma agnóstica

El mismo componente corre en Claude (MCP-UI), ChatGPT (Apps SDK) y cualquier MCP client compatible. Sin forks por target.

Type-safe punta a punta

El contrato entre tu servidor MCP y tu componente está tipado. Si rompes la API, falla al compilar, no en producción.

Auth listo para enchufar

Ejemplos oficiales con Clerk, WorkOS AuthKit, Stytch y Auth0. No reinventas OAuth para tu app dentro de Claude.

Ejemplos para copiar

11+ apps demo con código abierto — carrusel de ecommerce, mapa interactivo, juego multi-pantalla, dashboard. Punto de partida real.

El contexto detrás del repo.

La forma "oficial" de construir apps MCP o ChatGPT Apps hoy es regresarse diez años: emites strings de HTML desde el servidor, sin componentes, sin tipado, sin hot reload. Funciona, pero el costo de iterar es alto y los bugs sutiles aparecen al final, no al compilar.

Skybridge resuelve esa fricción. Escribes React con TypeScript del lado del cliente y un servidor MCP del lado del backend, y el framework traduce la comunicación al protocolo correcto: MCP-UI para Anthropic, Apps SDK para OpenAI, y cualquier MCP client compatible. El mismo componente corre en Claude, ChatGPT o un cliente custom — no reescribes nada.

Atrás está alpic-ai, una empresa comercial. Eso es bueno (recursos, ritmo de release) y es riesgo (puede pivotar). Pero es MIT, open-weight, y los ejemplos son copiables. Si quieres meterle UI a un MCP server hoy, este es el camino con mejor ergonomía que existe.

Cuándo lo recomiendo (y cuándo no).

Lo recomiendo si ya tienes un MCP server funcionando y quieres pasar de respuestas de texto plano a UI interactiva — carruseles de productos, formularios, mapas, dashboards. También sirve si estás explorando si MCP Apps tienen tracción como canal: con Skybridge puedes prototipar una app completa en una tarde, no en una semana.

No lo recomiendo si todavía estás en la pregunta "¿qué es MCP?". Primero entiende el protocolo y arma un server simple. Skybridge agrega valor cuando ya tienes la lógica del lado del agente y quieres ponerle cara. Tampoco encaja si tu stack es Vue, Svelte o vanilla JS sin compilación — esto es React-only por diseño.

En 3 pasos, listo para probar.

Arranca con el template oficial

# Clona el repo y entra al ejemplo "everything"
gh repo clone alpic-ai/skybridge
cd skybridge/examples/everything

# Instala dependencias
pnpm install

El ejemplo "everything" es el playground más completo — toca todas las APIs del framework. Es el mejor lugar para entender qué te da Skybridge antes de empezar el tuyo.

Corre tu MCP server local

# Levanta el servidor MCP + el bundle de UI
pnpm dev

# En otra terminal, conéctalo a Claude Desktop
# Edita claude_desktop_config.json y agrega:
# {
#   "mcpServers": {
#     "skybridge-demo": {
#       "command": "node",
#       "args": ["./dist/server.js"]
#     }
#   }
# }

Una vez conectado, abre Claude Desktop y verás tu app disponible como herramienta. Las invocaciones renderizan tu componente React adentro de la conversación.

Define tu primer componente

import { defineComponent } from '@skybridge/react'
import { z } from 'zod'

export default defineComponent({
  name: 'product-card',
  props: z.object({
    title: z.string(),
    price: z.number(),
  }),
  render: ({ title, price }) => (
    <article>
      <h2>{title}</h2>
      <p>${price}</p>
    </article>
  ),
})

Cualquier componente que definas queda disponible como output del servidor MCP. Claude o ChatGPT lo invocan cuando el contexto lo amerita y lo renderizan inline.

MCP Apps son el nuevo canal de distribución

Anthropic y OpenAI están convirtiendo sus chatbots en plataformas. Cada uno empuja su versión del estándar: MCP Apps en Claude, ChatGPT Apps en OpenAI, y abajo de todo el Model Context Protocol como capa común. El movimiento es claro — el chatbot es el shell, las apps de terceros viven adentro.

Esto cambia el modelo de distribución. Hasta hoy, si quieres que tu producto SaaS llegue a usuarios, peleas SEO, ads y partnerships. Si los stores de apps de IA cuajan en 2026, el flujo será otro: el usuario habla con su asistente, el asistente invoca tu app cuando tiene sentido, y tu app responde con UI rica adentro de la conversación. Es un canal nuevo, virgen, y todavía sin saturarse de jugadores grandes.

Qué resuelve Skybridge específicamente

La capa visual de MCP hoy te obliga a emitir HTML como string desde tu servidor. Sin componentes, sin tipos, sin hot reload, sin la ergonomía que tu equipo ya tiene en producción. Es brutal después de pasar años con React/Next.js y todas las herramientas modernas.

Skybridge te deja escribir como ya escribes: componentes React tipados, props validadas con Zod, hot reload local. Por abajo, el framework traduce eso al protocolo MCP-UI o al Apps SDK de OpenAI. El componente queda igual, el target cambia. Y como es MIT, no estás casado con alpic-ai si después prefieres mover el código a otro stack.

Mi recomendación

Si tu producto encaja en el modelo conversacional — ecommerce, búsqueda especializada, agendamiento, tutoriales interactivos — vale la prueba este fin de semana. Levantas el ejemplo everything, copias el patrón más cercano a tu caso y en una tarde tienes algo demo-able en Claude Desktop.

Si tu producto es una app de productividad pura (notion, linear, figma), el modelo conversacional sigue sin ser obvio. Para esos casos, espera a que el ecosistema MCP madure un par de releases más antes de invertir tiempo.