Agentes en el Lienzo Con TLDraw

Mi nombre es Max Drake. Estoy aquí para hablarles sobre agentes en el lienzo, y estoy realmente emocionado de hacerlo. Pero supongo que esto es algo realmente cargado de demostraciones, así que voy a intentar pasar rápidamente por la introducción y la motivación. Entonces, primero, ¿por qué estoy aquí hablando de esto? He estado trabajando en agentes y LLMs en el lienzo durante tanto tiempo como se podría haber estado haciendo eso. Así que en 2022, antes de Chat GPT, estaba haciendo un montón de agentes en el lienzo o LLMs en el lienzo. Este es algo genial. Esto es como usar las primitivas del lienzo, así que como mover y proximidad y cosas como esas para solicitar a un LLM que haga algún análisis de sentimiento. Genial, como, ya sabes, no el mismo tipo de UX al que estás acostumbrado de escribir algo y solicitarlo. Así que he estado trabajando en esto por un tiempo. Más recientemente, he estado hablando de ello. Muy emocionado de hacerlo aquí. Y en cuanto a las cosas del lienzo, trabajo para una pequeña empresa llamada TLDraw. Estamos basados en Londres. ¿Alguien ha usado TLDraw antes? Bien, genial. Algunas manos. Eso es increíble. Así que sí, básicamente construimos un SDK de lienzo infinito, y lo que eso significa es que si quieres construir una aplicación, y quieres que la aplicación tenga algún tipo de componente de lienzo, ¿verdad? Básicamente, es una aplicación de diseño, una aplicación de dibujo, un diseñador de diapositivas ed tech. El lienzo es realmente difícil de hacer bien. Así que te damos una biblioteca, una biblioteca de JavaScript, un componente de React que es solo el lienzo. Y así puedes centrarte en trabajar en todas las cosas que hacen que tu aplicación funcione. Esta presentación es solo un gran lienzo de TLDraw. Tenemos muchos de, ya sabes, cubrimos todos los casos extremos molestos de mover y agrupar y vincular y rotar todas estas cosas. Así que, ya sabes, es realmente divertido trabajar con ello. Y todo lo que te voy a mostrar ha sido construido usando el TLDraw SDK.

Así que, por un tiempo, esta charla se llama Agentes en el Lienzo, ¿verdad? Y así, por un tiempo, nosotros, ya sabes, como empresa de lienzos, hemos estado averiguando cómo, ya sabes, cómo llevamos agentes al lienzo. Sabes, hay muchas razones por las que queremos hacer eso, ya sabes. Obviamente, razones financieras, ya sabes, la gente quiere usar sus agentes en el lienzo. Pero también como, ya sabes, mucho del lienzo como medio es un lugar realmente colaborativo TLDraw tiene como habilitado multijugador por defecto. Y a medida que usamos agentes más y más, ya sabes, estamos tratando de averiguar como, ya sabes, como sociedad, supongo, cómo colaboramos con agentes. ¿Cómo trabajamos con ellos? Y creo personalmente que, ya sabes, el lienzo es como un lugar realmente bueno para eso porque tienes todos estos tipos de primitivas de colaboración integradas como cursores y proximidad y cosas así. Así que, sí, hemos estado tratando de, ya sabes, voy a llevarte en el viaje de cómo hemos estado trabajando en agentes en el lienzo en TLDraw.

Y así, solo un breve aparte, hablando de agentes no en el lienzo, herramientas como esta, ya sabes, Cloud Code, Codex, son geniales y funcionan muy bien en parte porque la forma en que interactuamos con ellos donde introduces texto y luego obtienes texto es exactamente como fueron diseñados. Sabes, estoy simplificando aquí, pero como fueron entrenados al ingerir texto y escupir texto y eso es como funcionan, ¿verdad?

Entonces, cuando intentas llevar LLMs al lienzo, en realidad es un poco más difícil porque no están realmente construidos para entender el lienzo. Hay un montón de cosas como relaciones espaciales y el hecho de que, ya sabes, es una cosa visual, así que necesitas visualizarlo. Y así, en realidad tienes que hacer mucho trabajo de ingeniería para lograr que los agentes como que entiendan incluso qué es el lienzo.

Y así, cuando comenzamos este proyecto de investigación hace un par de años, estábamos como, la primera pregunta fue, ¿cómo logramos que los agentes simplemente entiendan qué es cuando están entre comillas "mirando" el lienzo? Y también, ¿cómo logramos que actúen en el lienzo de una manera que no solo funcione y, ya sabes, realmente pueda hacerlo, sino también de una manera que entiendan qué han hecho. Lo cual, sí, eso es todo un tema.

El primer proyecto, que fue de creo 2025, se llamó Teach. Y esto fue básicamente, Teach es, esto es Teach. Así que voy a, Teach es un poco lento, así que voy a darle una indicación ahora mismo. Esto podría no ser visible, pero estoy diciendo, haz que el ratón apague la vela. Y así Teach es como este muy, puedes ver en este marco aquí, Teach es básicamente, es como un disparo único, introduces tu indicación y básicamente manipula el lienzo de una manera que puede mejor, oh, sí, ahí vamos. Así que sí, el ratón está apagando la vela y lo que esto está haciendo básicamente es esto, sabes, esto está tomando toda la información de forma, que es como, sabes, hacemos mucho de manipulación para que sea más fácil para el agente entender. Hacemos, enviamos una captura de pantalla y básicamente le enseñamos cómo usar el lienzo y también a actuar en el lienzo. Así que, mira, hizo estas pequeñas formas. Y esto es todo como, esto no es como un objeto de ratón especial. Sabes, esto es solo, esto es solo formas normales de teal jar. Pero entendió desde el, sabes, como esto es solo formas. Entendió desde la indicación que le di y desde los visuales que eso era un ratón. Y así es capaz de interpretarlo de esa manera. Y así ahora tenemos como este motor para el LLM, supongo que aún no es un agente, el LLM para entender y actuar en el lienzo.

Y nuestro próximo proyecto como hacia esto fue que construimos esto que llamamos el kit de inicio de agentes, que es básicamente esto es lo envolvemos en una especie de arnés que permite al LLM como conducir y moverse por el lienzo para lograr un objetivo. Así que voy a decirle al agente que encuentre un amigo para el gato y lo lleve hacia ella. Su color favorito es rojo. Y voy a alejar para que puedas ver que hay algunos otros, hay algunos otros animales aquí. Pero básicamente lo que va a hacer si está funcionando, oh, ha decidido no hacerlo. Tal vez el modelo no esté contento. Intentemos eso de nuevo. Pero básicamente lo que puede hacer es que puede, ¿hizo eso? Bien. Bien. Básicamente puede establecer metas para sí mismo. Se establece tareas para sí mismo. Puede manipular su visión. Puede moverse. Bien, bueno, este solo hizo una copia, una copia exacta de, oh, bien. Lo está eliminando por medio de teletransportación, reensamblándolo y eliminando en lugar de mover las formas reales. No es como yo habría resuelto el problema.

Pero sí, entonces, ya sabes, no lo viste moverse, pero básicamente puedes simplemente cambiar su viewport para obtener más información sobre el lienzo. Es de la misma manera que un coding agent podría, ya sabes, podría abrir diferentes archivos o grep o intentar averiguar, ya sabes, para lograr su objetivo. Y puedes imaginar que eso es como un proceso bastante diferente que, ya sabes, grepping porque necesita navegar espacialmente.

Así que esto fue, nos gustó tener nuestra, ya sabes, nuestra visión sobre agentes en el lienzo y lo siguiente que construimos fueron fairies. Así que fairies es un proyecto realmente divertido. Hay estos pequeños tipos aquí, puedes sostenerlos. No les gusta cuando los sostienes, sin embargo. Pero puedes, ya sabes, puedes lanzarlos. Puedes, obviamente esto es lo primero que hacemos, puedes configurar sus sombreros, su cabello. Esto es realmente importante. Sí, puedes, y esto de nuevo, va a ser difícil de ver, pero puedes, añadimos un deslizador de piernas, por supuesto.

Pero así que en Asian, esto fue un poco, mucho de esto fue UX. Así que en Asian, la fairy es ese agente en el lienzo, pero existe de la misma manera. Así que voy a decir, solo haré, siempre le estoy diciendo que dibuje un gato, pero básicamente como puedes, ya sabes, decirle que haga algo y sí, ahí vamos. Y funciona en el lienzo para lograr eso. Pero su visión siempre se basa en como dónde está en el lienzo.

Así que tiene como, en realidad está encarnado. Y también, ya sabes, las animaciones son un poco tontas, pero en realidad puedes decir lo que está haciendo. Así que si piensas en como, ya sabes, hay esto, como que genera este historial de chat, ¿verdad? Lo cual es como, ya sabes, de nuevo, estoy seguro de que ustedes han usado, ya sabes, cloud code y están tratando de leer los comandos que está haciendo. Es realmente difícil de analizar incluso esto también. Es como, es, es mucho, pero en realidad es realmente fácil decir lo que está haciendo solo con mirar su animación y su estado en el lienzo.

Y así también lo que hicimos con esto es que nos dimos cuenta de que, ya sabes, los agentes no son solo, ya sabes, agentes individuales, también, ya sabes, la gente ha estado haciendo muchas cosas de colaboración recientemente. Y así, ya sabes, las fairies tienen amigos básicamente. Y así lo que puedes hacer es seleccionar un par de diferentes fairies y puedes hacer, puedes hacer un chat grupal y puedes decirles qué hacer. Y así voy a decir, haré algo simple como decir, dar al gato dos amigos y ponerlos en una escena. De nuevo, esto es, ya sabes, una cosa visual.

Así que lo que está sucediendo aquí es que verás en un segundo. Así que uno de estos agentes ha sido elegido para ser el agente orquestador. Y verás, ya sabes, ver este texto aquí, creando un plan. Y así, sí, básicamente el agente orquestador ha, ya sabes, está creando tareas ahora mismo y está como asignando, está asignando tareas.

Y así, sí, es básicamente, está bien, ha creado una tarea para dibujar el fondo de la escena. Y ese agente, uno de esos agentes va a comenzar a trabajar en ello. Pero básicamente lo que está sucediendo aquí es que el agente orquestador no tiene, no tiene la capacidad de crear formas. No tiene la capacidad de hacer realmente ningún trabajo en el lienzo. Pero lo que puede hacer es que puede, ya sabes, puede crear tareas y puede asignar tareas y divide el trabajo y luego asigna tareas, asigna tareas a los otros agentes. Y los otros agentes, solo pueden ver lo que está dentro de los límites de su tarea.

Así que esto es algo que nos dimos cuenta a través de mucho ensayo y error es que como tú, y es gestión de contexto, pero la gestión de contexto en un lienzo se ve realmente diferente. Porque ya sabes, si tienes, podría tener toda esta, ya sabes, presentación o todo un wireframe al lado. Las fairies no pueden saber sobre eso porque las va a confundir. Va a llenar su contexto.

Está bien, sí. Y ves que hay otros, están haciendo algunos amigos para el gato y el orquestador está como simplemente sentado allí esperando. Ahora está revisando la primera cosa. Así que cuando una fairy está trabajando en algo, no puede ver nada más excepto en lo que está trabajando.

Y eso hace mucho para, para como, ya sabes, mejorar cómo gestiona su contexto y lo mismo con el orquestador. No puede hacer cosas no porque pensamos que sería divertido, sino porque si eliminas la capacidad de crear formas, eso es mucho como esquema y llamada de herramientas que no tiene que pensar. Y así sí, esto es varios, esto es básicamente, ya sabes, colaboración multi-agente en el lienzo.

Y, está bien, esto es ahora estamos llegando a la parte donde es como en, en mi charla, al menos, esta es la, esta es la, la estamos llegando a la parte aburrida, que en realidad también es la parte genial, pero ya sabes, todo esto ha sido un poco divertido, pero como, no es realmente como útil todavía. Y así hay un par de cosas diferentes. Hay dos cosas diferentes en las que, ya sabes, hemos estado trabajando recientemente que son como tratando de llevar esto, ya sabes, cómo se vería esto realmente en un producto.

Así que tenemos como algunas demostraciones de cómo esto podría funcionar. La primera cosa que quiero demostrar es el tech tree. Así que cuando hacemos un lanzamiento en TealDraw, ya sabes, normalmente usamos como nuestro software de seguimiento de problemas, es, ya sabes, linear o notion o lo que sea. Pero cuando nos estamos acercando a un lanzamiento, abandonamos todo eso porque realmente necesitamos este tipo de vista de alto nivel de lo que está sucediendo. Así que simplemente hacemos un tablero de teal draw y básicamente tenemos, ya sabes, es, hacemos un gran gráfico con flechas que muestra cómo, ya sabes, qué dependencias, qué tareas, qué dependencias tienen diferentes tareas.

Entonces, ya sabes, siempre pensé que sería realmente genial si, ya sabes, pudiéramos simplemente asignar como un coding agent para llevar a cabo esas tareas, llevar a cabo esas tareas cuando lo hacemos. Así que si asigno esta tarea a Claude aquí, presiono ejecutar. Esto va a iniciar un coding agent trabajando en, en esta tarea. Puedes ver si hago zoom hacia afuera, esto es como un proyecto completo, ya sabes, que tiene, ya sabes, ha tenido algo de, ya sabes, algo de trabajo en él antes. El proyecto en sí es esta cosa de experiments. Esto es solo como probar un montón de diferentes inputs para, esto es donde, sí. Así que esto es, esto es como todo, esto es solo como, ya sabes, pequeñas demostraciones tontas, ¿verdad? Pero todo esto fue creado por los propios agentes. No he mirado este repo en absoluto. No he mirado nada del código.

Puedes ver que este está funcionando. Nosotros, este PR necesita ser revisado. Así que este, este agente ha abierto PR y ahora está esperando. Y así, sí. Eso se ve genial. Voy a fusionar eso. Buen, buen trabajo. Y verás, ya sabes, esto estará, esto estará terminado en un segundo una vez que el, ya sabes, el sondeo tome un segundo. Bueno, dejaremos que el sondeo. ¿Eso realmente se fusionó? Sí, lo hizo. Bueno, está bien. Oh, ahí vamos. Está bien. Sí. Está terminado. Solo tomó un segundo para la actualización de GitHub. Así que ahora que esta tarea está terminada, esta implementación está terminada. Así que solo voy a presionar ejecutar en esto y veremos si termina antes de que, ya sabes, antes de que nos vayamos. Pero, así que esto es como, estás como gestionando un proyecto y también como incitando a tus coding agents aquí. Y no sé ustedes, pero como, siempre que tengo un proyecto, tengo como cinco pestañas de Claude abiertas a la vez.

Y todos están como, están como dispersos. Están ya sea en mi cursor ID o son solo una ventana de terminal real o algo así. Y ya sabes, mirándolo, es realmente difícil, ya sabes, agregaron esa función de recapitulación recientemente, pero como, porque es tan difícil saber qué representa realmente una cosa de terminal clawed cuando, ya sabes, cuando vuelves a ello después de un día.

Así que esto es como, obtienes una vista realmente de alto nivel de un proyecto, obtienes una vista realmente de alto nivel de lo que realmente está pasando, lo cual me gusta mucho. También puedes, esto es otra cosa que me gusta del canvas es que, ya sabes, tú, a veces, ya sabes, no me gusta, a menudo estoy dibujando un diagrama de lo que quiero que un agente haga y tomando una captura de pantalla y pegándola en tail draw. Es realmente, no es genial.

Así que este te permite simplemente como tomar algo, tomar algo, tomar un diagrama o algo, simplemente como dibujar una tarea alrededor de él. Y luego puedo hacer lo mismo. Puedo simplemente asignarlo a clawed y puedo ejecutar. Y si voy y lo abro, eso es como, esto es ahora el, ya sabes, este es el prompt. Como esto no es, como, solo esta cosa es el prompt para el coding agent y eso va a estar trabajando. No sé si terminará. Parece que este tampoco ha terminado, pero sí, así que esto es como, ¿cómo podemos usar este tipo de concepto de agentes en el canvas? ¿Cómo podemos usar los elementos básicos del canvas y como, ya sabes, todas las cosas que el canvas te da gratis, que es como colaboración.

Esto también es colaborativo, lo cual es realmente genial. Así que si yo, ya sabes, cierro esta ventana, mi colega se une. Ellos pueden simplemente inspeccionar qué, porque estos, estos agentes no están ejecutándose en mi computadora. Estos son agentes alojados. Y así mi colega puede inspeccionar, como, ya sabes, qué está pasando también. Y todos podemos estar colaborando en un proyecto. Y esto es un poco como lo que estaba hablando antes con, ya sabes, agentes como los humanos pueden colaborar en un canvas muy fácilmente. Y pensamos que como agentes es una gran, es una gran como, no sé, manera para que lo hagan.

Así que estoy tratando de ver si este ha terminado o si está colgado. Parece, está bien, está haciendo muchas cosas, pero sí, no lo hicimos muy, no lo hicimos muy fácil de entender lo que estaban haciendo todavía. Sí, está bien. Así que esto es, esto es como el tipo de cosa del tech tree. Otra cosa que es realmente genial. Así que Tealdraw, hemos estado desarrollando una aplicación de escritorio que funciona con archivos reales, lo cual creo es bastante interesante. Y algo que puedes hacer es que puedes manejar la aplicación de escritorio con código en la nube.

Así que no necesitas, no necesitas como engancharte a nuestra infraestructura especial o algo así. Así que lo que ya hice fue que di, hice esto, le di esto como un simulador de física. Si alguna vez has usado Tealdraw, sabes que este no es un comportamiento incorporado. Pero lo que hice es que simplemente le dije al código en la nube que le diera gravedad y controles WASD. Y lo hizo. Voy a, voy a decirle que haga esto. Dibujé esto, pero aún no hace nada. Voy a decirle que intente hacer esto, estas cosas del sombrero. Espera, tengo dictado. Convierte el selector de sombrero de bola en una interfaz de usuario real que cambie lo que la bola, lo que el sombrero, la bola tiene puesto. Genial. Veamos si lo hace. Puede ser, ya sabes, eso tomará un tiempo. Pero hay muchas cosas realmente geniales que puedes hacer con esto. Porque esto es como trabajar en, es código en la nube, por lo que tiene acceso a toda tu computadora.

Así que haré con este open code, oh, no, la bola, está bien, bueno, la bola cayó. Pero voy a decirle a open code, voy a decir, mira mi carpeta de documentos y para todos los directorios, haz un rectángulo en el canvas de Tealdraw que sea proporcional al tamaño de la carpeta en gigabytes. Sí, claro. Así que esto es como, ya sabes, verás que, en algún momento un agente aparecerá en el canvas una vez que haga esto. Pero esto es como, esto es algo realmente interesante porque puedes hacer este tipo de UIs interactivas y estas experiencias interactivas directamente desde el canvas.

Parece que ninguno de ellos ha terminado todavía. Y estamos, oh, ahí vamos. Bien. Así que este es básicamente el agente de cloud code aquí. Este es el agente de open code, este es el agente de cloud code aquí. Y ambos están como, están conectándose, están usando como el tipo de funciones de estilo de vida de sub-agente para realmente renderizar esta UI en el canvas. Así que esto es como, esto es simplemente cloud code listo para usar con, sí, permitir siempre. Esto es cloud code o open code listo para usar con solo un sub-agente instalado y, bien, aquí vamos.

Así que sí, tenemos todos estos, bien, hice muchos de estos realmente pequeños porque creo que hay texto. Pero sí, así que estas son todas las carpetas en mi escritorio que como que, creó. Esto es, estamos en la parte no planificada de la demo. No sé qué están haciendo los agentes en este momento. Pero sí, así que esto es como, de nuevo, aquí es donde estamos en TL draw. Esto es como agentes en el canvas. Básicamente estamos tratando de lograr que la gente pueda traer sus propios agentes. Y eso es lo que este tipo de trabajo con la aplicación de escritorio es, es de nuevo, no tienes que conectarte como para fairies o el agent starter, no tienes que conectarte a nuestro propio material de agentes. Puedes simplemente traer el tuyo propio. Y así que sí, estamos tratando de hacerlo realmente fácil para trabajar con agentes en el canvas. Me encantaría hablar más sobre esto. Si alguien tiene alguna pregunta, creo que tal vez es hora de preguntas y respuestas. Gracias.

Pero, ¿puedes contarme más sobre el Teal Draw SDK? Supongo que estabas mostrando demos en la aplicación Teal Draw y luego en la aplicación de escritorio, pero estoy viendo todo esto visualmente y realmente mi mente está corriendo. Es como, ¿cómo puedo hacer esto y qué estoy haciendo cuando estoy implementando? Entonces, ¿el SDK nos permite agregarlo a nuestras propias aplicaciones? ¿Cómo, cómo funciona eso? Sí. Así que en el corazón mismo, el SDK de Teal Draw básicamente, como tu punto de entrada es solo un componente de React, que es el componente de Teal Draw. Y básicamente te permitimos como sobrescribir o personalizar cualquier comportamiento que desees. Así que como tenías formas personalizadas, herramientas personalizadas. Y tenemos como un, ya sabes, Replica lanzó recientemente su nuevo tipo de UI de lienzo de agente que está completamente construido en Teal Draw. Así que ellos han personalizado eso realmente para sus propias necesidades. Sabes, tienen formas personalizadas para sus propios, como, ya sabes, prompts y sus propios sistemas de representación de aplicaciones. Pero sí, como la versión más simple de hacer tu propio Teal Draw es simplemente importar el componente y poner el componente en él. Y desde allí, sí, tenemos un, así es como comienzas. Y de nuevo, todo además de la presentación de diapositivas está solo en el Teal Draw, pero cada demo además de eso fue todo construido en el propio SDK.

Entiendo. Así que tienes una aplicación personalizada, integraste el SDK y ahora tienes un lienzo propio que no es Teal Draw, pero tienes toda la misma funcionalidad. Sí, sí, exactamente. Y había, y podría haberlo perdido, pero ¿hay un servidor MCP que está dando acceso a la nube o al código abierto? Entonces, ¿cómo están obteniendo acceso directo a ese lienzo? Hicimos muchos experimentos con eso. En realidad, no es realmente un servidor MCP. Lo que es, es solo el sub-agente. Así que la aplicación de escritorio en sí misma expone solo como un servidor local con un montón de endpoints que y simplemente, el sub-agente en sí mismo tiene todas estas instrucciones y simplemente decimos, Hey, simplemente haz curl, ya sabes, como no. Exactamente. Sí. Así que como, puedes simplemente, Hey, hay este servidor que está ejecutándose en, ya sabes, comenzando en este puerto, haz curl y puedes obtener el, puedes obtener todo el, ya sabes, y tenemos instrucciones en eso también. Así que como, ya sabes, si quisiéramos estandarizarlo, podríamos hacerlo, pero es agradable simplemente tener el punto de entrada del sub-agente es mucho más agradable a veces en la aplicación MCP o el MCP. Claro. Porque no tienes que precargar todas las herramientas. No, eso tiene mucho sentido.

Así que tenemos algunas más preguntas llegando. Hagamos esta. Esta es de Sam que dice, ¿está disponible el lienzo agentic en el SDK? Así que el lienzo agentic, no es parte del SDK en sí. Sin embargo, tenemos el código, así que TLDraw es todo código fuente disponible. Así que ya sabes, puedes ir a nuestro GitHub y ver todo el código para ello.

El kit de inicio de agentes es parte del, del repositorio, sin embargo, no es parte del SDK real. Así que puedes ir y tomarlo con licencia MIT. Puedes copiar tanto como quieras. Y sí, está disponible para que lo mires, uses y tomes inspiración. Hay un montón de subsistemas realmente geniales allí. Como tenemos un sistema de linting. Sé que esto no es lo que la pregunta pedía. Tenemos como un sistema de linting. Así que si el, ya sabes, de la misma manera que harías lint a una base de código o como lint a un archivo, si el agente, porque el diseño es una de las preguntas realmente difíciles para esto. Nuevamente, como estaba diciendo, el espacial, ya sabes, ¿cómo entiende, como si, si el texto hace que algo se desborde, es difícil hacerle entender que no va a haber superposición. Así que tenemos este sistema que, una vez que termina de generar, miramos todas las cosas que generó. Y si hay dos formas de texto que se están superponiendo, le preguntamos al agente nuevamente. Le decimos, oye, ¿fue eso a propósito? Si no, o si lo fue ignóralo, pero si no, podrías querer arreglarlo y cosas así. Así que hay un montón de trucos realmente geniales allí que usamos para hacer que el lienzo de agentes funcione. Pero sí, eso está en tldraw.dev o en el repositorio de GitHub de tldraw. Eso tiene sentido. Y también hay patrones que podrías adoptar en tu propia base de código en lugar de un SDK.

Sí. Y la cosa es que esto se está moviendo tan rápido. Como nuevamente, las fairies fue, um, ya sabes, las fairies que lanzamos, uh, en la aplicación tldraw.com es como una cosa de tiempo limitado gratuita en diciembre, pero hay algunas de las cosas que hicimos allí que ya, como que no haríamos de nuevo si tuviéramos que construirlo de nuevo. Y así que estamos como, realmente no queremos poner todo esto en el SDK todavía porque realmente queremos asegurarnos de que es la solución correcta. Y sé que es, es mucho de, todavía hay muchos experimentos en este momento y estamos tratando de concretarlo.

Eso tiene mucho sentido. Uno divertido aquí. ¿Puedes hacer que los agentes se saboteen entre sí? Puedes decir algo que, um, que, uh, hice, lo cual fue realmente divertido es que estás jugando como juegos por turnos con él. Así que hice como, hice un laberinto una vez y estaba como, um, estaba como, está bien, tú y yo vamos a turnarnos para completar este laberinto. Hay como dos personajes o lo que sea. Uno para mí, uno para el agente. Y um, y yo estaría haciendo trampa y estaría como saltando sobre paredes o algo así.

Otra cosa divertida que puedes hacer es decir, uh, decirle a dos agentes que intenten dibujar algo en el mismo lugar. Y um, para las fairies, saben que hay otras fairies en el lienzo y ellos, ellos, no se confunden, lo cual es nuevamente, parte del, el trabajo que hicimos para la colaboración es que saben dónde está trabajando cada una de las otras fairies. Pero para los agentes, si tenemos dos de ellos, um, harían algo y luego revisarían su trabajo y se confundirían mucho por qué había dos cosas allí y luego borrarían todo eso. Y luego el otro agente revisaría su trabajo y diría, espera, alguien borró todo mi trabajo. Así que lo harían de nuevo. Así que sí. Así que no sabían, como que no sabían quién lo escribió o quién puso ese objeto allí y se estaban confundiendo. Sí. Sí. Un aprendizaje de eso es que, de hecho, también enviamos todas las acciones del usuario que el usuario ha hecho en el lienzo desde el último aviso que enviamos a los agentes. Um, así que puedes decir, Oh espera, ¿puedes traer de vuelta esa forma? Acabo de borrarla. Nota qué forma acabas de borrar, por ejemplo. Es como un deshacer incorporado casi.

Uh, veamos, este es, uh, ¿cómo gestionas el uso de tokens cuando trabajas con el lienzo? Parece que podría requerir mucho contexto para trabajar. Entonces, ¿qué tipo de datos estamos pasando de un lado a otro? ¿Son objetos JSON? ¿Es, sí. ¿Cómo estamos, cómo es el uso de tokens? Uh, es mucho. Um, no, son muchos tokens. Es, um, quiero decir, una de las cosas, las imágenes siento que no, no son tan malas ahora. Um, en algunos de los experimentos anteriores que estábamos haciendo, las imágenes requerían como muchos tokens y eran mucho más costosas de procesar ahora. No tanto.

Um, pero sí, algo que hemos estado haciendo para gestionar eso, es que hemos estado adoptando esto, como, uh, en lugar de simplemente, tenemos este tipo de prompt masivo del sistema para fairies, como puedes imaginar, todo eso, como los esquemas para las formas y todo, algo que hemos estado haciendo con las cosas más recientes es que simplemente dejamos que lea los documentos. Y así es como un, ya sabes, tipo RLM donde nosotros, um, decimos, Hey, haznos un cuadrado o lo que sea. Y básicamente puede como consultar los documentos para el esquema de un cuadrado. Y así es solo que alguna vez está obteniendo, ya sabes, y luego consulta los documentos para preguntar, ¿cómo creo una forma? Y así es solo que le permitimos obtener solo la información que necesita y añadir algo de latencia, por supuesto. Pero en cuanto al uso de tokens, es una gran ayuda. Eso es bueno.

Creo que esta, esta siguiente pregunta está relacionada, um, en términos de, de datos que deberías. Entonces, ¿los LLMs están usando esquemas JSON o salida tipo XML div? Lo último podría ser eficiente. Dada la gran cantidad de HTML, LLMs, la gran cantidad de HTML con la que los LLMs han sido entrenados. Sí, HTML es realmente interesante. No hemos probado eso. El, um, el, hemos pasado por un montón de cosas. Así que teach lo primero que mostré, que fue el disparo único que usa una cosa tipo HTML para las acciones que produce, um, para el agente starter y para fairies eso está usando JSON.

Um, y luego para las cosas de la aplicación de escritorio, um, lo que eso realmente está haciendo es que está escribiendo, uh, uh, como JavaScript contra el editor y simplemente ejecutándolo localmente en la instancia del editor. Así que si alguien ha usado code mode, uh, o herramientas similares, es básicamente, en lugar de darle al agente un conjunto de acciones que, ya sabes, le permitimos elegir, básicamente estamos como, Hey, aquí está todo el SDK del editor TL draw. Um, y aquí están los documentos y puedes simplemente como escribir, escribir JavaScript que evaluaremos allí. Y ya sabes, eso, todo está ejecutándose localmente. Así que en cuanto a seguridad, está bien para la aplicación de escritorio al menos. Pero, pero sí, así que eso es otra cosa que es, ya sabes, si quieres que haga mil formas antes serían mil llamadas de herramientas o lo que sea, pero este es solo, ya sabes, un bucle for. Así que puedes, en cuanto al uso de tokens y cosas, puedes obtener muchas ganancias de eso también. Me gusta eso. Esa es una buena estrategia.

Muy bien. Solo hay tiempo para un par de preguntas más. Uh, aquí hay una divertida. Um, uh, bueno, la perdí, uh, pero aquí está esta. Entonces, ¿qué biblioteca de IA, si es que hay alguna, estás usando para gráficos y TL draw? Entonces, ¿hay alguna biblioteca de gráficos o todo está construido en formas? Así que tenemos, son todas formas, son todas formas. Bien. Sí. Sí. Sí. No hay, um, quiero decir, eso sería algo interesante, ya sabes, podrías, si quisieras que los agentes hicieran visualización de datos, podrías traer tu propia biblioteca de gráficos y hacer que las completaran. Sí. Um, pero sí, estos son solo formas. Creo que lo leí mal. Son chats, no, no formas.

Entonces, ¿estás usando como AI SDK o Tan Stack AI para, Oh sí. En el, así que para fairies y el agente starter, estamos usando el AI, el Vercel AI SDK. Um, y, pero no estamos, no estamos como conectándonos mucho a eso, como el componente de chat y todo. Eso es todo personalizado, um, debido a cómo queríamos, uh, representar el, el UX para los agentes y para el agente starter es, o, o para la aplicación de escritorio, creo que estamos usando, no, no estamos usando nada para eso. Simplemente lo estamos desarrollando nosotros mismos.

Bien. Eso es todo el tiempo que tenemos para preguntas, pero muchas gracias, Max. Gracias. Sí. Gracias. Adiós.