스크립트
00:00:00Gracias a todos por venir. Hoy voy a hablar sobre una de las piezas de software más extrañas
00:00:18que he escrito jamás. Está al límite de muchas de las cosas que he estado aportando
00:00:22al mundo. Así que acompañadme, si queréis. Vamos a intentar adoptar el enfoque más razonado
00:00:27hacia algo muy extraño que los agentes en MCP y otras herramientas han posibilitado. Y para empezar,
00:00:34quiero hablar de las aplicaciones MCP. No sé si alguno de vosotros pudo asistir a las otras
00:00:38charlas de hoy temprano, quizás la que Ido y Liat acaban de dar hace una hora. Que levante la mano
00:00:44quien esté familiarizado con las aplicaciones MCP. Bien, este es probablemente el mejor público ante el que he dado esta charla,
00:00:52la verdad. Así que es fantástico. Para los que no hayan levantado la mano, las aplicaciones MCP son una
00:00:57extensión del protocolo MCP que se introdujo, creo, en enero de este año. Y la idea es que
00:01:02este es un ciclo típico de solicitud y respuesta para una herramienta MCP. El usuario hace una solicitud al agente. El
00:01:10agente a su vez decide usar una herramienta MCP alojada en un servidor MCP. El resultado de la herramienta regresa
00:01:16al contexto del agente. Y el agente elige formular alguna respuesta y enviársela al usuario. Y así,
00:01:23fundamentalmente, los servidores MCP son estas fantásticas maneras de añadir funciones y lógica de negocio a vuestros agentes,
00:01:28pero nunca hay una conexión directa entre el usuario y el servidor MCP. Siempre pasa a través del cerebro del
00:01:34agente y, lo que es más importante, a través de la ventana de contexto del agente. Por lo tanto, las aplicaciones MCP son una extensión de esto,
00:01:40lo que nos permite de hecho sortear al agente. Y en su lugar, lo que ocurre es lo siguiente:
00:01:44el usuario solicita algo al agente, el agente usa una herramienta, pero en vez de que esa solicitud de herramienta vuelva
00:01:49al agente, se le envía al usuario. Y se envía como HTML, CSS y JavaScript. Es una interfaz completa.
00:01:55Y puede ser lo que queráis que sea. Por lo tanto, la idea es que tenéis esta forma de hacer, de poner
00:02:01básicamente internet en vuestro agente, por decirlo de algún modo. Podéis desplegar cualquier interfaz útil y con marca personalizada que queráis. Podéis
00:02:08permitir que el usuario tenga la experiencia interactiva que desee. Y entonces el usuario, como podéis ver en el
00:02:12diagrama, el usuario ahora puede interactuar con la aplicación. Puede usar las herramientas. Puede enviar
00:02:17información de vuelta a un backend alojado en esa aplicación y obtener realmente una experiencia completa. Así que podéis imaginar
00:02:21reservar una mesa en un restaurante, cambiar vuestro asiento en un avión o interactuar con un horario.
00:02:28Para los ingenieros de IA, hay muchas cosas que podéis hacer ahora como usuarios en las que el agente facilitó el proceso,
00:02:33pero vais a interactuar como humanos. Y se avecina una extensión. Esto va a
00:02:37salir en la versión de MCP de julio, en la que el agente también podrá interactuar con la aplicación. Y esto
00:02:43preparará el terreno para algunos casos de uso muy interesantes de los que no vamos a hablar hoy, pero podríais
00:02:47hipotéticamente jugar una partida de ajedrez contra el agente ahora en una aplicación visual donde hacéis un movimiento,
00:02:52y luego el agente también interactúa con la aplicación. Y creo que eso va a abrir un mundo
00:02:55entero de posibilidades. Ahora bien, algunos de vosotros quizás conozcáis un marco del que soy autor y que mi empresa
00:03:03mantiene llamado FastMCP. FastMCP es una de las maneras más populares de construir servidores MCP. Y por eso, cada vez que cosas
00:03:09nuevas y geniales llegan al mundo de MCP, lo primero que me pregunto es: ¿cómo puedo ofrecérselo a nuestros usuarios?
00:03:16Y una de las cosas más importantes que tengo que compartir con vosotros sobre nuestra base de usuarios es que son
00:03:20principalmente ingenieros de Python. Y por tanto, esto supone un pequeño problema cuando queremos ofrecer
00:03:27interfaces y experiencias de usuario, porque ¿cómo vamos a hacer eso realmente? Y este es el momento de la charla
00:03:31en el que revelo que no recuerdo exactamente cómo es la siguiente diapositiva, así que vamos a echarle un vistazo.
00:03:35No, vamos a volver. Tenemos un reto ahora. ¿Cómo vamos a hacer que los ingenieros de Python creen
00:03:42interfaces que sigan las mejores prácticas, que sean interactivas, bonitas y útiles, sin
00:03:50pretender que vamos a hacer algo absurdo, algo que ya se ha intentado, y meter a la fuerza todo
00:03:54el desarrollo frontend, todo el ecosistema, todo dentro de Python en una especie de sistema extraño, comprometido,
00:04:00improvisado y frankensteiniano. Así que me costó mucho lidiar con esto. Necesito,
00:04:04realmente necesito, siento la obligación de encontrar una forma de ofrecer esto. Pero no puedo fingir que
00:04:10vamos a desplegar React en Python. No va a funcionar. Y por eso pensamos bastante en quiénes son
00:04:15nuestros usuarios en el ecosistema de FastMCP. ¿Quiénes son estos desarrolladores de Python que suelen estar en grandes empresas?
00:04:20¿Qué hacen y para qué necesitan estas interfaces? ¿Para qué necesitan estas aplicaciones MCP?
00:04:25Lo que no necesitan son interfaces de usuario personalizadas para consumidores con marca propia. Eso no es lo que hace esta gente. Lo que se les encomienda principalmente
00:04:34es compartir información en toda su organización y recopilar
00:04:38información en toda su organización. Y eso cambió la naturaleza de lo que esperamos que hagan
00:04:43dentro del marco de las aplicaciones MCP. Y esa limitación resultó muy útil. Por lo tanto, fundamentalmente, esperamos que
00:04:48hagan cosas como construir tablas, recopilar información a través de formularios
00:04:53y querrán compartir gráficos. Así que, fundamentalmente, con esta restricción,
00:04:58podemos presentar un software que abrimos al código fuente hace unos meses y que ha sido sorprendentemente
00:05:03popular entre este público, llamado Prefab. Es un marco de creación de interfaces de usuario delimitado con el propósito de
00:05:11ofrecer interfaces a través de un agente para los fines que mencioné hace un momento. Este es un tarjeta de saludo
00:05:17al mundo. Podrías ver esto en cualquier marco de interfaz de usuario. Literalmente cualquiera. Tendrá algo
00:05:22que se ve así, está en su sitio web, escribes tu nombre y se actualiza en tiempo real.
00:05:27Pero, por supuesto, lo extraño de este es que el código que lo generó está escrito por completo
00:05:31en Python. Así que espero que sientan lo que yo siento al ver esto, que es una combinación muy extraña
00:05:38de, vaya, eso es genial y esto me asusta bastante. El
00:05:44vaya, eso es genial proviene del hecho de que creo que hay algo en este código, incluso si no puedes verlo de cerca, puedo
00:05:48hacerlo un poco más grande, hay algo en esto que, de alguna manera, tiene sentido. Puedes ver la
00:05:52estructura de la interfaz de usuario en el código, pero también hay algo en él que obviamente es ajeno y un poco
00:05:58extraño. Y llegamos a esta conclusión cuando sientes eso, cuando lo miras, que
00:06:04cuando compones una interfaz en Python, en realidad empieza a sentirse bien siempre y cuando delimitemos el
00:06:09desafío correctamente. No estamos intentando construir una interfaz desde cero. Estamos intentando componer una interfaz
00:06:15a partir de un montón de componentes de primera clase y bien diseñados. Y así es como mantenemos los límites,
00:06:20y así es como tenemos presente al usuario. El usuario aquí no está intentando hacer algo arbitrario.
00:06:24Está intentando tomar una interfaz bien estructurada y ponérsela en frente a quien sea que se la esté entregando.
00:06:29Y aquí hay un pequeño recorrido rápido por ese DSL. Principalmente, estamos usando administradores de contexto. Para
00:06:34aquellos de ustedes que conocen FastMCP, saben que se podría decir, sin duda, que se puede reducir FastMCP y afirmar:
00:06:39la innovación central de FastMCP es que usamos un decorador de Python para construir todo un servidor MCP.
00:06:44Así que si quieres adoptar el mismo enfoque reductivo hacia prefab, podrías decir, usamos un administrador de contexto para
00:06:48construir una interfaz completa. Y al anidar componentes como administradores de contexto, como ven aquí, estamos construyendo
00:06:55exactamente la misma estructura en la interfaz. Se siente muy natural cuando lo lees. Puedes ver cómo están
00:07:01estructuradas las cosas. Cada elemento de la interfaz, cada componente, que es un hermoso componente de shadcn
00:07:06cuando se renderiza, como pueden ver aquí, es una clase que instancias. Puedes parametrizarla. Puedes
00:07:11pasarle cosas como clases CSS y hacer que se vea como quieras. Y luego lo último, que no
00:07:17vamos a tener tiempo suficiente para explorar hoy, son estas variables reactivas. Les mostraré una demostración
00:07:21de ellas en un momento. Pero esencialmente, tenemos una forma completa de crear interactividad del lado del cliente
00:07:26y vincular datos entre componentes que te permite construir estas experiencias tan ricas, de nuevo,
00:07:31sin tener que adentrarte por completo en el mundo de JavaScript y dejar un ecosistema con el que mi base de usuarios,
00:07:36al menos, se siente extremadamente cómoda. Y este es el canal que prefab está exponiendo esencialmente.
00:07:42Usamos un DSL de Python que acabo de compartir con ustedes. Lo usamos para construir una representación
00:07:46declarativa de una interfaz. Eso luego se serializa en un protocolo JSON. Y ese protocolo JSON
00:07:53es renderizado finalmente por una aplicación de React, que se aloja como la aplicación MCP real. Y esto va a abrir
00:07:59un montón de posibilidades para nosotros que, de nuevo, les mostraré en un segundo. Pero la clave
00:08:02de todo esto es el JSON en el medio. El Python es en realidad un accidente que descubrí
00:08:07después de los hechos porque era una cosa extraña e idiosincrásica que quería. El punto de esto era,
00:08:10“¿Podemos crear una representación serializable de una interfaz?” Y ese vuelve a ser el protocolo JSON.
00:08:17Y debido a que es serializable, puedo generarlo desde un agente. Puedo enviarlo a un agente. Puedo generarlo
00:08:22como humano y pedirle a un agente que lo modifique. Hay un montón de cosas geniales que suceden debido a esa
00:08:26representación intermedia en JSON. Y cuando el DSL de Python simplemente surgió de esto y resultó ser hermoso y fácil de usar,
00:08:31sentí que teníamos algo entre manos. Así que tenemos esta documentación. Y para demostrar
00:08:37el punto, esta fue otra restricción que asumimos. Ni siquiera sé qué es esto. Esta es la
00:08:42documentación para el componente de tabla de datos en Prefab. Creo que hay 130 o 140 componentes que ofrecemos y que puedes
00:08:47componer en un formulario arbitrario. La documentación de Prefab está 100% renderizada en Prefab. Así que la tabla de datos
00:08:55que está aquí en el uso básico, se renderiza en vivo en Prefab. El código de Python, puedes verlo colándose en
00:09:01la parte inferior de la pantalla. Ese código de Python está siendo renderizado en vivo por el renderizador para generarla.
00:09:05Si quieres, puedes tomar cualquier ejemplo en la documentación de Prefab, puedes hacer clic en un enlace, llevarlo al
00:09:09entorno de pruebas y puedes editar el código en vivo, el código de Python en vivo, y verás cómo se actualiza la interfaz. Y de nuevo,
00:09:15esto es súper extraño. Si te sientes un poco incómodo con esto, está bien. Tiene mucho
00:09:20tiene mucho más sentido cuando acotamos el problema y recordamos que estamos componiendo una interfaz
00:09:24en lugar de construirla. Así que quiero retomar el tema con el que empecé, que son los servidores MCP
00:09:29y, más específicamente, las aplicaciones MCP. Pueden usar Prefab para cualquier tipo de problema de interfaz.
00:09:34Mi equipo ha empezado a usarlo para pequeñas aplicaciones de datos interactivas y herramientas de exploración.
00:09:39Han estado construyendo presentaciones con él. Incluimos un tema oscuro que honestamente se ve
00:09:43bastante parecido al que les estoy mostrando ahora mismo para hacer diapositivas y presentaciones.
00:09:48Pero la razón por la que lo construimos, el caso de uso que satisface, es para servidores MCP. Y quiero
00:09:54darles un recorrido rápido por tres formas en las que pueden usarlo, tres formas cada vez más
00:09:58sofisticadas de usarlo en su servidor MCP. La primera es construir una herramienta interactiva.
00:10:04Como les mostré al principio de la charla, por lo general una herramienta MCP es algo que su agente llama,
00:10:09el agente obtiene el resultado y ustedes no interactúan con ella en absoluto. Entonces, ¿cuál es la forma
00:10:14más fácil de avanzar en esa funcionalidad interactiva? Se los voy a mostrar aquí. Esta es una herramienta
00:10:20Fast MCP. Ha sido decorada con un decorador de herramientas, como pueden ver, y es simplemente una
00:10:24función de Python que devuelve cierta información. Teniendo en cuenta que esta información irá al
00:10:30agente, no al usuario. Si queremos convertir esto en una herramienta totalmente interactiva con Prefab,
00:10:36vamos a hacer un cambio. En lugar de devolver un diccionario de Python al final, que irá al agente,
00:10:40vamos a devolver un componente Prefab. En este caso, es la tabla de datos. Esto es de lo que acabo de
00:10:46mostrarles la documentación hace un momento. Y cuando devolvemos este componente Prefab, Fast MCP
00:10:51lo detectará automáticamente. Inferirá automáticamente que, de hecho, quieren devolver una
00:10:55aplicación MCP, y pondrá en marcha toda la maquinaria para obtener el HTML, JavaScript, CSS,
00:11:00el renderizador, todo listo para que su usuario vea una tabla de datos. Así es como se ve esto en la
00:11:06práctica. Esto usa el cliente Goose, que es excelente. Le pedí a un servidor que tenía la función que
00:11:10acabo de mostrarles: muéstrame el directorio del equipo, y lo que aparece —esto se vería mejor como un GIF,
00:11:16lo siento—, lo que aparece es un componente de tabla de datos totalmente interactivo. Soporta búsqueda,
00:11:21filtrado, ordenamiento y paginación, y todo eso. Y todo consiste en lo que les mostré hace un momento,
00:11:26simplemente devuelven la clase de la tabla de datos y de todo lo demás nos ocupamos nosotros. Podemos ir
00:11:30un paso más allá. ¿Qué pasa si, además de la tabla de datos, queremos mostrar un gráfico circular
00:11:35justo al lado de la tabla de datos que desglose este directorio del equipo? Como podrán imaginar,
00:11:40es código muy, muy, muy similar. En lugar de solo la tabla de datos, ahora vamos a importar una cuadrícula
00:11:45y un gráfico circular, y si miran abajo, verán que componemos tanto el gráfico circular como la tabla
00:11:51de datos en una cuadrícula de forma muy natural con un administrador de contexto, y este es el resultado.
00:11:55Ahora obtenemos un gráfico circular junto a nuestra tabla de datos. Así que esto sigue un principio
00:11:59que realmente tratamos de mantener en gran parte de nuestro software en Prefect, que es una línea de código,
00:12:05un gran cambio notable. Intentamos mantener esa complejidad de forma incremental, y esto satisface
00:12:09muchas cosas que creo que son muy importantes sobre los frameworks y los DSL. Esto es muy rápido,
00:12:15porque no tendremos tiempo de profundizar en ello, este es solo un ejemplo que armé y grabé de interactividad
00:12:19totalmente del lado del cliente, donde todos estos controles están vinculados, las cosas se actualizan,
00:12:24el texto se actualiza, los valores se actualizan, sin escribir JavaScript. Son solo un par de clases
00:12:28compuestas que tienen el mismo atributo asignado, por lo que todas funcionan juntas automáticamente.
00:12:33Ah, y agregué un ejemplo de código rápido de cómo se ve eso. Tenemos una clase llamada Rx, que,
00:12:38como habrán adivinado, significa reactivo. Si usan estas variables reactivas, pueden simplemente
00:12:43hacer referencia a ellas en cualquier parte de su código, pueden formatearlas, pueden usarlas como
00:12:49el nombre de algo, y se compilarán automáticamente en la implementación de JavaScript correcta. La segunda
00:12:54cosa que podemos hacer es una aplicación FastMCP. Entonces, si una herramienta interactiva es más bien
00:12:59un intento único, aquí hay una interfaz de usuario con la que puedes interactuar en el cliente,
00:13:03una aplicación FastMCP es una aplicación completa con un backend, y en este caso, el servidor MCP
00:13:08dos funciones con app.ui. Ese es el punto de entrada que devolverá los componentes prefabricados que
00:13:14luce el código, solo para darles una idea de la ergonomía. Vamos a escribir una clase, que es nuestra
00:13:20aplicación FastMCP, y luego vamos a decorar al menos dos funciones con app.ui. Ese es el punto de entrada
00:13:27que va a devolver los componentes Prefab que forman la interfaz de usuario base de esa aplicación,
00:13:31y luego al menos uno, supongo que esto es opcional, así que cero o más app.tools, y estos son esencialmente
00:13:38métodos de backend a los que ahora puedes hacer referencia en la interfaz de usuario. Algo que usamos,
00:13:46y que ahora incluimos como un componente integrado en FastMCP, es un componente de carga. Como pueden
00:13:51ver, dado que solo el agente tiene acceso a un servidor MCP, no se puede simplemente subir un archivo
00:13:56a un servidor MCP. Tiene que pasar por el cerebro del agente, y lo que termina pasando es que mucha
00:14:00gente crea básicamente una herramienta de carga en su servidor MCP, olvidando que el agente realmente
00:14:06tiene que llamarla, y lo que terminas haciendo es la operación de copiar y pegar más cara del mundo.
00:14:12Le das al agente un megabyte de texto, el agente lo reescribe carácter por carácter en el MCP, y ahora,
00:14:18sí, de hecho, lo has subido, pero es extrema, extremadamente ineficiente. Así que este es un caso de uso
00:14:23muy bueno para una aplicación MCP, donde le pides al agente que abra la interfaz de la aplicación,
00:14:30arrastras un archivo a ella, y ahora el archivo evita al agente y va directo al servidor, y hemos hecho
00:14:34que eso sea de una sola línea como esta, junto con un puñado de otras herramientas útiles, y ¿es
00:14:38esto un GIF? Esto no es un GIF, o si lo es, no se está renderizando, pero se vería así en su cliente,
00:14:45y cualquier cliente que admita aplicaciones MCP, si le pides al agente que necesito subir algo, ahora
00:14:50puede mostrarte esto, y puedes subir de forma segura y, lo más importante, barata. Ah, sí tengo un GIF.
00:14:55Olvídenlo. Conocer tus propias diapositivas es una buena lección de esta charla. Así que aquí el agente
00:15:00Lo último de lo que quiero hablar, que de alguna manera es posible gracias a esta arquitectura,
00:15:04a su disposición más tarde si les gustaría ver esto, o por supuesto, es una sola línea. Podrían probarlo
00:15:10en sus servidores esta tarde. Lo último de lo que quiero hablar, que es algo facilitado por esta
00:15:15arquitectura, es una interfaz de usuario totalmente generativa. Vamos a omitir esto y dejar que se
00:15:21que acepta el JSON, la serialización de protocolo de una interfaz de usuario en la que se basa Prefab. Y ahora, a medida que el
00:15:29sobre esto. Empieza a transmitir la interfaz de usuario más interesante que se te ocurra”. Y así lo
00:15:35hizo. Y lo que está haciendo aquí es que expusimos una herramienta que acepta el JSON, la serialización
00:15:39de protocolo de una interfaz de usuario en la que se basa Prefab. Y así ahora, mientras el agente
00:15:43transmite esa información a través de la red, nosotros estamos renderizando en tiempo real lo que sea
00:15:48que tengamos, reparando ese JSON y renderizándolo. Y esta fue una demo muy genial, y fue muy efectiva,
00:15:52y a la gente le gusta esto porque ahora ni siquiera tienes que definir la interfaz de usuario tú mismo.
00:15:56Todo lo que tienes que hacer es usar la habilidad que ya incluimos, compartirla con tu agente para que
00:16:01sepa cómo escribir una interfaz, y listo. Puede hacerte lo que quieras. Hay algunos clientes que
00:16:07tienen versiones integradas de esto. Si tienen una versión integrada, pueden preferir usarla, por supuesto.
00:16:13Pero esta puede ser una forma para que construyas tu propio enfoque personalizado o conjunto limitado de
00:16:20componentes que te sean útiles. Ahora bien, algo muy interesante pasó cuando pusimos esto en marcha.
00:16:26Como mencioné, originalmente el plan era que el agente enviara JSON a través de la red y que se renderizara
00:16:32en esta aplicación React completa. Lo que terminamos descubriendo es que la representación en Python de
00:16:39una interfaz de usuario es aproximadamente un 70% más pequeña que la representación en JSON.
00:16:43Por lo tanto, ya no hacemos esto. Cuando grabé esta demo con JSON en streaming, lo que hacemos ahora
00:16:49es que realmente transmitimos el Python a través de la red. Se ejecuta en un entorno aislado (sandbox),
00:16:55se convierte en JSON en el servidor y luego eso se renderiza. Y esto tiene un beneficio dramático,
00:17:00dramático en el costo de eficiencia de tokens y en la latencia. Así que funcionaría exactamente igual
00:17:06que cuando grabé esta demo, pero esto es solo una de esas cosas que hemos aprendido sobre la marcha.
00:17:11Y es realmente fascinante que la representación en Python sea mucho más compacta y ergonómica que
00:17:17la de JSON completo. Así que eso es Prefab. Si quieren echarle un vistazo, si tienen curiosidad,
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기