Las aplicaciones MCP están cambiando internet. ¡Aquí te enseñamos a crear una! (Skybridge)
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Se está produciendo un cambio de paradigma enorme en toda la industria debido a la inteligencia artificial.
00:00:04Cada vez son más los usuarios que recurren a los chatbots para sus búsquedas rutinarias o investigaciones,
00:00:10y por eso el concepto de las aplicaciones MCP está ganando tanta popularidad.
00:00:14En lugar de generar un archivo JSON o un documento de Markdown,
00:00:18más aplicaciones y servicios están optando por ofrecer estos widgets interactivos y útiles dentro de un chatbot.
00:00:24Y la empresa Alpic lanzó recientemente un nuevo y excelente framework llamado SkyBridge
00:00:29que facilita muchísimo la creación de tus propias aplicaciones MCP personalizadas para todo tipo de casos de uso.
00:00:35Así que en el video de hoy vamos a echar un vistazo a SkyBridge, ver cómo funciona y probarlo por nuestra cuenta.
00:00:41Va a ser muy divertido, así que vamos a sumergirnos en ello.
00:00:47Para comprender de verdad por qué SkyBridge es tan importante, hay que entender cómo funcionan estas nuevas aplicaciones.
00:00:53Cuando creas una aplicación web tradicional, la estás diseñando para un solo usuario: el humano.
00:00:58Pero con una aplicación MCP, en realidad estás construyendo para dos usuarios a la vez: el humano y el asistente de IA,
00:01:05ya que ambos comparten exactamente la misma interfaz.
00:01:08El humano puede hacer clic en botones, introducir datos y mover controles deslizantes, y el LLM ve ese estado al instante.
00:01:15Y a la inversa, el LLM puede actualizar los datos en segundo plano,
00:01:18y la interfaz de usuario cambia en tiempo real justo frente a ti.
00:01:21Y SkyBridge es un framework de TypeScript de código abierto que se encarga de toda la compleja infraestructura,
00:01:26la conexión de protocolos, la sincronización de estados y las reglas de seguridad,
00:01:30para que puedas centrarte simplemente en escribir código React estándar.
00:01:34Ahora bien, si alguna vez has intentado crear aplicaciones MCP para ChatGPT o Claude,
00:01:39ya sabes que el ciclo de pruebas locales solía ser un verdadero dolor de cabeza.
00:01:43Tenías que configurar manualmente túneles públicos, copiar y pegar configuraciones,
00:01:47y reiniciar tus sesiones de chat solo para corregir un pequeño error tipográfico en el CSS.
00:01:52Pero la mejor parte de SkyBridge 1.0 es que ha rediseñado por completo el panel de control de herramientas de desarrollo.
00:01:59Ahora, cuando ejecutas tu servidor de desarrollo local, se inicia un panel de emulación en tu navegador.
00:02:04Y dentro de este panel, dispones de tres herramientas excelentes.
00:02:08La primera es el área de pruebas de Alpik,
00:02:11un entorno aislado local donde puedes probar tus herramientas y ajustar tus widgets de React mediante reemplazo en caliente de módulos.
00:02:17Y puedes ver los cambios al instante sin necesidad de interactuar todavía con un LLM real.
00:02:21Y en segundo lugar, cuenta con un túnel integrado,
00:02:24el cual te permite, literalmente con un solo clic, exponer tu servidor local a través de una URL pública segura.
00:02:30Así que ya no tienes que complicarte con sistemas de túneles externos.
00:02:33Solo pega esta URL en la configuración de desarrollador de ChatGPT y ya estarás en línea.
00:02:37Y la tercera es la herramienta de auditoría Beacon.
00:02:40Esta es una salvación si planeas enviar tus aplicaciones a tiendas públicas.
00:02:44Analiza los metadatos, las herramientas y las políticas de seguridad de tu app para detectar motivos comunes de rechazo
00:02:49antes de enviar tu aplicación a revisión.
00:02:52Y lo mejor de todo es que, aunque nunca hayas creado una aplicación MCP,
00:02:56puedes instalar fácilmente la habilidad de SkyBridge en tu agente de IA preferido para empezar de inmediato.
00:03:02Así que ahora intentemos construir una pequeña aplicación MCP por nuestra cuenta y veamos cómo funciona.
00:03:07Para esta demostración, ya me he adelantado y he creado este pequeño sitio web de comercio electrónico
00:03:11donde puedes comprar diferentes lentes para cámaras.
00:03:14Básicamente es una tienda totalmente desarrollada en React con funcionalidad de carrito y pago.
00:03:19Y ahora quiero añadirle una aplicación MCP.
00:03:22De modo que si un cliente potencial utiliza un chatbot como ChatGPT o Claude para buscar recomendaciones de lentes,
00:03:30este llame inmediatamente a nuestra aplicación MCP para mostrar los productos al usuario final.
00:03:36Como mencioné antes, la forma más fácil de empezar es simplemente instalar la habilidad de SkyBridge.
00:03:42Podemos instalarla de forma global o únicamente para nuestro repositorio específico.
00:03:46Y para los fines de esta demostración, voy a proceder a instalarla dentro del repositorio.
00:03:51Ahora puedes ver que tenemos este directorio .agents con la habilidad de SkyBridge disponible.
00:03:57Y todo lo que tengo que hacer ahora es pedirle a Claude que me cree una aplicación MCP para mi tienda de comercio electrónico.
00:04:04Antes de construirla, Claude me hará primero algunas preguntas de seguimiento sobre el propósito de la app
00:04:09para comprender mejor qué tipo de funcionalidad necesitamos incluir en ella.
00:04:13Para esta demostración, quiero una aplicación que muestre lentes según lo que el usuario esté buscando.
00:04:18Luego podremos seleccionarlos, compararlos lado a lado, añadirlos a nuestro carrito
00:04:24y ofrecer una solución de pago rápido a nuestros clientes.
00:04:28Básicamente eso es todo lo que necesito hacer.
00:04:29Y ahora dejo que Claude haga su trabajo.
00:04:32En unos pocos minutos, vemos que Claude ha generado nuestra aplicación MCP.
00:04:37Y lo mejor es que ahora podemos abrir el panel de desarrollo proporcionado por SkyBridge
00:04:41y probarlo nosotros mismos.
00:04:44Si abrimos el panel de control, podemos ver cómo se ve.
00:04:47Aquí tenemos nuestra herramienta de búsqueda de lentes y la herramienta para realizar pedidos.
00:04:53Primero, para la búsqueda de lentes, simplemente introduciré el precio máximo de los lentes que busco.
00:05:00Y tal vez limitarlo a cinco lentes.
00:05:03Y ahí lo tienes.
00:05:04Encontró 14 resultados que cuestan menos de 2000 dólares.
00:05:09Así es como se ve la aplicación en computadoras de escritorio.
00:05:12También podemos previsualizar la vista móvil.
00:05:14Se ve bien.
00:05:15También tenemos modo oscuro y modo claro.
00:05:18Y aquí tenemos el resultado de la herramienta y el estado.
00:05:23Observa lo que pasa si selecciono algunos de los lentes.
00:05:26Como puedes ver, el estado se actualiza al instante, lo cual es genial.
00:05:31Ahora elijamos tres lentes.
00:05:34Si hacemos clic en comparar, pasamos a la pantalla de comparación.
00:05:40Aquí podemos ver nuestros tres lentes lado a lado con todos sus parámetros.
00:05:45Si estamos satisfechos con la selección, también podemos ir al proceso de pago.
00:05:49Esto pasa a la fase de pago donde podemos ingresar nuestro nombre completo, correo electrónico y dirección de envío para realizar el pedido.
00:05:59Como puedes ver, este panel es excelente para probar tus widgets y verificar si todo funciona como se esperaba.
00:06:08Ahora, si vamos a Claude, en la configuración tenemos esta sección llamada conectores.
00:06:16Tenemos que hacer clic en personalizar.
00:06:19Para esto, necesitarás la URL del túnel.
00:06:21Así que asegúrate de haber activado el túnel.
00:06:24Podemos simplemente copiar esta URL.
00:06:26Y en la sección de conectores, solo tienes que añadir un conector personalizado.
00:06:31Dale un nombre.
00:06:33Y pega esa URL del túnel.
00:06:38Haz clic en añadir.
00:06:39Yo ya la añadí aquí.
00:06:41Y lo último que debes hacer es hacer clic en conectar.
00:06:45También puedes configurar los permisos si deseas que estas herramientas se ejecuten automáticamente o si prefieres una aprobación del usuario.
00:06:53Luego podemos iniciar un nuevo chat.
00:06:57Y en el nuevo chat, ahora puedo pedir: “Dame algunas recomendaciones de los mejores lentes de menos de 2000 dólares para fotografía de retratos”.
00:07:05Ahora podemos ver que dice que buscará en el catálogo de la tienda de lentes excelentes opciones para retratos por menos de 2000 dólares.
00:07:12Y mira eso.
00:07:14Abrió nuestra aplicación MCP.
00:07:16¿Qué tan genial es eso?
00:07:18Podemos hacer las mismas cosas aquí.
00:07:20Podemos seleccionar algunos de los lentes de este lado.
00:07:24Y luego ir a la sección de comparación.
00:07:27Y muestra esta pequeña tabla comparativa.
00:07:32Lo único que noto es que tenemos este espacio en blanco proveniente del estado anterior de nuestra herramienta.
00:07:40Así que probablemente esto sea algo que puedas corregir en el CSS.
00:07:43Pero todo se ve excelente.
00:07:46También tenemos la opción de pagar.
00:07:49Y llegamos a la sección de pago donde podemos realizar nuestro pedido.
00:07:54¿Qué tan genial es esto?
00:07:57Y por último, y más importante, para ver si tu aplicación está lista para publicarse en las tiendas de apps públicas,
00:08:02también podemos ejecutar una auditoría de nuestra aplicación mediante el panel de desarrollador y comprobar si tenemos algún problema con ella.
00:08:10Básicamente, eso es todo.
00:08:11En solo unos minutos, pudimos crear una aplicación MCP lista para producción con SkyBridge.
00:08:16Que teóricamente podríamos enviar a la tienda de aplicaciones de IA.
00:08:20Espero que esto te muestre lo fácil que es comenzar a trabajar con SkyBridge.
00:08:25Y sinceramente, se siente como el futuro de la web moderna.
00:08:28Creo que empezaremos a ver cada vez más de estas aplicaciones de widgets MCP interactivas dentro de nuestros chatbots.
00:08:34Así que es genial que existan frameworks como SkyBridge que facilitan tanto el proceso de crear este tipo de aplicaciones para nosotros los desarrolladores.
00:08:42Así que ahí lo tienen, amigos.
00:08:44Eso es SkyBridge en pocas palabras.
00:08:46¿Qué opinan de SkyBridge?
00:08:47¿Lo han probado?
00:08:48¿Lo van a usar?
00:08:49Hágannos saber en la sección de comentarios abajo.
00:08:52Y amigos, si les gustan este tipo de análisis técnicos, por favor háganmelo saber destrozando ese botón de Me gusta debajo del video.
00:08:58Y tampoco olviden suscribirse a nuestro canal.
00:09:01Esto ha sido Andrus de BetterStack, y los veré en los próximos videos.
00:09:16tú