Agentes en el Canvas Con tldraw

Mi nombre es Max Drake. Estoy aquí para hablarles sobre Agents on the Canvas. Estoy realmente emocionado de hacerlo. Pero supongo que esto es algo realmente cargado de demostraciones, así que voy a tratar de pasar rápidamente por la introducción y la motivación.

Entonces, primero, ¿por qué estoy aquí hablando de esto? He estado trabajando en, como, Agents y LLMs en el Canvas durante tanto tiempo como se podría haber estado haciendo eso. Así que en 2022, antes de ChatGPT, estaba haciendo un montón de Agents en el Canvas, o LLMs en el Canvas. Este es algo genial. Esto es como usar las primitivas del Canvas, 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 es el mismo tipo de UX al que estás acostumbrado de, como, escribir algo y solicitarlo. Así que he estado trabajando en esto por un tiempo. También, más recientemente, he estado hablando de ello. Muy emocionado de hacerlo aquí. Y en cuanto a las cosas del Canvas, 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 Canvas infinito. Y lo que eso significa es que, como, si quieres construir una aplicación y quieres que la aplicación tenga algún tipo de componente de Canvas, ¿verdad? Así que tal vez sea, ya sabes, una aplicación de diseño, una aplicación de dibujo, un diseñador de diapositivas, tecnología educativa. El Canvas es realmente difícil de hacer bien. Así que te damos una, ya sabes, una biblioteca, una biblioteca de JavaScript, un componente de React, que es solo el Canvas. Y así puedes centrarte en, como, trabajar en todas las cosas que hacen que tu aplicación funcione. Esta presentación es solo un gran Canvas de TLDraw. Tenemos muchos, ya sabes, cubrimos todos los casos extremos molestos de mover y parentar y vincular y rotar todas estas cosas. Así que, ya sabes, es realmente divertido trabajar con ello. Y todo lo que voy a mostrarles ha sido construido usando el TLDraw SDK.

Así que por un tiempo, esta charla se llama Agents on the Canvas, ¿verdad? Y así por un tiempo, nosotros, ya sabes, como empresa de Canvas, hemos estado averiguando cómo, ya sabes, cómo llevar agentes al Canvas. Ya 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 Canvas. Pero también, como, ya sabes, gran parte del Canvas como medio es, como, un lugar realmente colaborativo. TLDraw tiene como habilitado el modo 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 Canvas 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 Canvas en TLDraw. Y así, solo un breve aparte hablando de agentes no en el Canvas, 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 tú introduces texto y luego obtienes texto, es, como, exactamente cómo fueron diseñados. Ya sabes, estoy simplificando aquí pero, como, fueron entrenados al ingerir texto y escupir texto. Cómo funcionan, ¿verdad? Así que cuando intentas llevar LLMs al Canvas, en realidad, es un poco más difícil porque no están realmente, como, construidos para entender el Canvas. Hay un montón de cosas como, ya sabes, relaciones espaciales y el hecho de que, ya sabes, es algo visual.

Así que necesitas visualizarlo. Y así, en realidad tienes que hacer mucho trabajo de ingeniería para lograr que los agentes entiendan incluso, como, qué es el Canvas. Y así, cuando comenzamos este, ya sabes, proyecto de investigación hace un par de años, estábamos, como, la primera pregunta era cómo logramos que los agentes entiendan qué es cuando están, entre comillas, mirando el Canvas. Y también cómo logramos que actúen en el Canvas de una manera que no solo funcione y, ya sabes, realmente pueda hacerlo, sino también de una manera que entiendan lo que han hecho.

Porque eso, sí, eso es todo un tema. Sí, así que el primer proyecto, que fue de, creo, 2025, se llama 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. Puede que no puedas verlo, pero estoy diciendo, haz que el ratón apague la vela. Y así Teach es como esto muy, puedes ver en este marco aquí, Teach es básicamente, es como un one-shot. Introduces tu indicación y básicamente manipula el Canvas de una manera que pueda responder mejor.

Oh, yeah, there we go. Así que sí, el ratón está apagando la vela. Y entonces lo que esto está haciendo básicamente es esto, ya sabes, esto está tomando toda la información de forma, que es como, ya sabes, hacemos mucha manipulación para que sea más fácil para el agente entender. Y así enviamos una captura de pantalla y básicamente le enseñamos cómo usar el Canvas y también a actuar en el Canvas. Así que ves que hizo estas pequeñas formas. Y esto es todo como, esto no es como un objeto especial de ratón. Ya sabes, esto es solo formas normales de teal jar, pero entendió desde el, ya sabes, como esto es solo formas. Entendió desde el prompt 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, porque supongo que aún no es un agente el LLM para entender y actuar en el Canvas.

Y nuestro próximo proyecto, como hacia esto, fue que construimos esto como una cosa que llamamos el Agent Starter Kit, que es básicamente esto, lo envolvemos en una especie de arnés que permite al LLM como conducir y moverse por el Canvas para lograr un objetivo. Y así voy a decirle al agente que encuentre un amigo para el gato y lo lleve hacia ella. Su color favorito es rojo. Y haré zoom 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? Básicamente puede establecer objetivos para sí mismo. Se establece tareas para sí mismo. Puede manipular su visión. Puede moverse.

Bueno, este solo hizo una copia, una copia exacta de, oh, está bien. Lo está eliminando por medio de teletransportación, reensamblándolo y eliminándolo en lugar de mover las formas reales. Esa no es la forma en que yo habría resuelto el problema. Pero sí, no lo viste moverse, pero básicamente puede simplemente cambiar su vista para obtener más información sobre el canvas de la misma manera que un agente de codificación podría abrir diferentes archivos o grep o intentar averiguar, para lograr su objetivo. Y puedes imaginar que ese es un proceso bastante diferente al de greping porque necesita realmente navegar espacialmente. Así que esto fue, como tuvimos nuestra opinión sobre agentes en el canvas. Y lo siguiente que construimos fueron fairies. Así que fairies es un proyecto realmente divertido. Hay estos pequeños tipos aquí.

Puedes sostenerlos. Sin embargo, no les gusta cuando los sostienes. Pero puedes lanzarlos. Puedes, obviamente esto es lo primero que hacemos. Puedes configurar sus sombreros, su cabello. Esto es realmente importante. Sí, puedes, y esto es, de nuevo, esto va a ser difícil de ver, pero puedes, añadimos un deslizador de piernas, por supuesto. Así que en el agente, esto fue un poco, mucho de esto fue UX. Así que en el agente, el fairy es ese agente en el canvas, pero existe de alguna manera igual. Así que voy a decirlo, solo haré, siempre le estoy diciendo que dibuje un gato. Pero básicamente, puedes decirle que haga algo y sí, ahí vamos. Y funciona en el canvas para lograr eso. Pero su visión siempre se basa en dónde está en el canvas. Así que tiene, está realmente encarnado. Y también, las animaciones son un poco tontas, pero realmente puedes decir lo que está haciendo. Así que si piensas en ello, hay esto, produjo este historial de chat, que es, de nuevo, estoy seguro de que ustedes han usado Cloud Code y están tratando de leer los comandos que está haciendo. Es realmente difícil de analizar. Incluso esto también, es mucho. Pero es realmente fácil decir lo que está haciendo solo mirando qué, como su animación y su estado en el canvas. Y así también, lo que hicimos con esto es que nos dimos cuenta de que, los agentes no son solo agentes individuales. También, la gente ha estado haciendo muchas cosas de colaboración recientemente. Y así, los fairies tienen amigos básicamente. Y así puedes, lo que puedes hacer es seleccionar un par de diferentes fairies y puedes hacer un chat grupal y puedes decirles qué hacer. Y así voy a decir, haré algo simple. Diré algo como, darle al gato dos amigos y ponerlos en una escena. De nuevo, esto es algo visual. Así que lo que está sucediendo aquí es que, verás en un segundo, uno de estos agentes ha sido elegido para ser el agente orquestador, y verás, ve este texto aquí, creando un plan. Y así, sí, básicamente el agente orquestador está, está creando tareas ahora mismo y está como asignando, está asignando tareas. Y así, sí, 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 hacer formas.

No tiene la capacidad de hacer realmente ningún trabajo en el canvas. Pero lo que puede hacer es, 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 canvas se ve realmente diferente. Porque sabes, si tienes, podría tener toda una, 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.

Bien, sí. Y ves que hay otros, están haciendo algunos amigos para el gato y el orquestador está como sentado allí esperando. Ahora está revisando la primera cosa. Pero sí, entonces cuando una fairy está trabajando en algo, no puede ver nada más que, excepto por en lo que está trabajando. Y eso, ya sabes, hace mucho para, para como, ya sabes, mejorar su, 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 tanto como esquema y llamada de herramientas que no tiene que pensar. Y así sí, estas son las fairies, esto es básicamente, ya sabes, colaboración multi-agente en el canvas.

Y bien, esto es ahora estamos llegando a la parte donde es como, en mi charla, al menos, esta es la, estamos llegando a la parte aburrida, que es en realidad también 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 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 demos de cómo esto podría funcionar. La primera cosa que quiero demostrar es el árbol tecnológico. Así que cuando hacemos un lanzamiento en Teal Draw, ya sabes, normalmente usamos como nuestro software de seguimiento de problemas. Es, ya sabes, linear o notion o lo que sea. Pero cuando nos acercamos a un lanzamiento, abandonamos todo eso porque realmente necesitamos este tipo de vista de alto nivel de lo que está pasando. 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. Así que, ya sabes, siempre pensé que sería realmente genial si, ya sabes, pudiéramos simplemente asignar como un agente de codificación 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 agente de codificación trabajando en esta tarea. Puedes ver si hago zoom hacia afuera, esto es como un proyecto entero, ya sabes, ha tenido algo de, ya sabes, algo de trabajo en él antes. El proyecto en sí es esta cosa de experimentos. Esto es solo como probar un montón de diferentes entradas para este trabajo. Sí. Así que esto es como todo esto es solo como, ya sabes, pequeñas demos 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 agente ha abierto PR y ahora está esperando. Y así, sí, eso se ve genial. Voy a fusionar eso. Buen trabajo. Y verás, sabes, esto estará, esto estará terminado en un segundo una vez que el, sabes, el sondeo, toma un segundo. Bueno, dejaremos que el sondeo, ¿realmente se fusionó eso? Sí, lo hizo. Bien. Bueno, está bien. Oh, ahí vamos. 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, 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 agentes de codificación aquí.

Y no sé ustedes, pero como, siempre que tengo un proyecto, tengo como cinco pestañas diferentes de Claude abiertas a la vez. Y todas están como, están como dispersas. Están ya sea en, como mi ID de cursor o son solo una ventana de terminal real o algo. Y, sabes, mirándolo, es realmente difícil, sabes, añadieron esa función de resumen recientemente, pero como, porque es tan difícil saber qué representa realmente una cosa de terminal de Claude cuando, sabes, cuando vuelves a ella después de un día. Así que esto es como, obtienes un nivel realmente alto de vista de un proyecto, realmente como lo que está pasando, lo cual realmente me gusta.

También puedes, esto es otra cosa que me gusta del canvas es que, sabes, a veces, sabes, no me gusta, a menudo estoy dibujando un diagrama de lo que quiero que haga un agente y tomando una captura de pantalla y pegándola en Teal draw. No es genial. Así que este te permite simplemente como 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 Claude y puedo ejecutar. Y si voy y lo abro, eso es como, esto es ahora el, sabes, este es el prompt, como, esto no es solo esta cosa es el prompt para el agente de codificación y eso va a estar trabajando.

No sé si terminará. Parece que este tampoco ha terminado. Pero sí, esto es como, ¿cómo podemos usar este tipo de concepto de agentes en el canvas? ¿Cómo podemos usar las primitivas del canvas y, ya sabes, todas las cosas que el canvas te da gratis, que es como la 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 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 como de 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.

Voy a 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 están haciendo todavía. Pero sí, está bien. Así que esto es, esto es como el tipo de cosa del árbol tecnológico. 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 que es bastante interesante. Y algo que puedes hacer es que puedes manejar la aplicación de escritorio con Cloud Code. No necesitas como engancharte a nuestra infraestructura especial ni nada. 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 esto no es un comportamiento incorporado. Pero lo que hice es que simplemente le dije a Cloud Code que le diera gravedad y controles WASD. Y lo hizo. Voy a, voy a decirle que, que haga esto, así que dibujé esto pero aún no hace nada. Voy a decirle que intente hacer esto, este material de sombrero. Espera, tengo dictado. Convierte el selector de sombrero de bola en una UI real que cambie qué sombrero tiene la bola puesta. Genial. Veamos si lo hace. Puede ser, ya sabes, tomará un tiempo. Pero hay muchas cosas realmente geniales que puedes hacer con esto porque esto es como trabajar en, es Cloud Code así que tiene acceso a toda tu computadora.

Así que lo haré con este open code. Oh no, la bola. 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 TLDR que sea de tamaño proporcional a cuán grande es el 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 que es realmente interesante porque puedes hacer este tipo de UIs interactivas y estas experiencias interactivas solo 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í. Y 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 solo como 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 estos son, estos son todos los folders en mi, en mi, en mi escritorio que como que creó.

Esto es donde en la parte no planificada de la demostración. No sé qué están haciendo los agentes ahora mismo, pero sí, así que esto es como de nuevo, esto es donde estamos en TL Draw. Esto es como agentes en el canvas. Básicamente estamos tratando de lograr que, ya sabes, 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 agente starter, no tienes que conectarte a nuestro material de agentes. Puedes simplemente traer el tuyo propio. Y así, 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 tal vez contarme más sobre el TL Draw SDK? Así que supongo que estabas mostrando demos en la aplicación TL Draw y luego en la aplicación de escritorio, pero estoy viendo todo este material visual que realmente, estoy como, mi, mi mente está corriendo. Es como, ¿cómo puedo hacer esto? Y lo que 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 de esto, el SDK de children, básicamente, como tu punto de entrada es solo un único componente de React, que es el componente Teal draw. Y básicamente te permitimos como sobrescribir o personalizar cualquiera de los comportamientos que desees. Así que como tenías formas personalizadas, herramientas personalizadas. Y tenemos como un, ya sabes, replet lanzó recientemente su nuevo tipo de UI de canvas de agente que está completamente construido sobre TL 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 renderizado de aplicaciones. Pero sí, son como la versión más simple de hacer tu propio, como Teal drop es solo importar el componente y poner el componente en él. Y desde allí, sí, tenemos, así es como comienzas. Y de nuevo, todo además de la presentación de diapositivas está solo en la aplicación Teal drop, pero cada demo además de eso fue todo construido solo en el SDK mismo.

Entiendo. Así que tienes una aplicación personalizada, incorporaste el SDK, y ahora tienes tu propio canvas 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 open code a eso? Entonces, ¿cómo están obteniendo acceso directo a ese canvas? Así que hicimos mucho experimento 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 de localhost con un montón de endpoints que, y solo, el sub agente en sí mismo tiene como todas estas, tiene instrucciones y solo estamos como, oye, solo haz curl, ¿sabes? Como no- Es una API. Exactamente. Sí. Así que, como, puedes simplemente, oye, hay un servidor que está corriendo, ya sabes, está corriendo en este puerto. Haz curl y 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 tener el punto de entrada del sub agente es mucho más agradable a veces que la aplicación MCP o el MCP. Claro. Así que podemos como precargar todas las herramientas. No, eso tiene mucho sentido.

Entonces, el canvas agentic, no es parte del SDK en sí. Sin embargo, tenemos el código. Así que tldraw es todo código disponible. Así que ya sabes, puedes ir a nuestro GitHub y ver todo el código para ello. El, el agente inicial en sí es parte del, del repositorio.

Sin embargo, no es parte del SDK actual. Así que puedes ir y tomarlo como licencia MIT. Puedes copiar tanto como quieras. Y y sí, así que está, está disponible para que lo mires y uses y tomes inspiración de. Hay un montón de subsistemas realmente geniales allí.

Como tenemos un sistema de linting.

Sé que esta no es la pregunta formulada. 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 ser como, 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 están como superpuestas entre sí, le pedimos al agente nuevamente. Estamos como, Oye, como, ¿fue eso a propósito? Si no, o si lo fue ignóralo, pero si no, podrías querer como arreglarlo y esas cosas. Así que hay un montón de trucos realmente geniales y cosas así que hicimos que usamos para hacer que el canvas del agente funcione. Así que sí, eso está en TLDraw.dev o en el repositorio de TLDraw en GitHub. Eso tiene sentido. Así que es más como 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 fueron, ya sabes, fairies, las lanzamos en la aplicación TLDraw.com como una cosa limitada por tiempo en diciembre, pero hay algunas de las cosas que hicimos allí que ya son como que no haríamos de nuevo si tuviéramos que construirlo de nuevo. Y así que estamos como, realmente no queremos poner ninguna de estas cosas en el SDK todavía porque realmente queremos asegurarnos de que es la solución correcta. Y es mucho de como, todavía hay mucha experimentación en este momento y estamos tratando de concretar eso. Eso tiene todo el sentido.

Uno divertido aquí. ¿Puedes hacer que los agentes se saboteen entre sí? De hecho, puedes. Algo que hice, que fue realmente divertido es que estás jugando como juegos por turnos con eso. Así que hice como, hice un laberinto una vez y estaba como, 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 yo estaría haciendo trampa y estaría como saltando sobre paredes o algo. Y sería como, no entiendo cómo el otro está. Otra cosa divertida que puedes hacer es decirle a dos agentes que ambos intenten dibujar algo en el mismo lugar. Y para las fairies, saben que hay otras fairies en el canvas y no se confunden. Lo cual es nuevamente, parte del trabajo que hicimos para la colaboración es que saben dónde cada una de las otras fairies están trabajando. Pero para los agentes, si tenemos dos de ellos, 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 sería como, espera, alguien borró todo mi trabajo. Así que lo harían de nuevo.

Fascinante. Así que no sabían, como no sabían quién lo escribió o quién puso ese objeto allí y se estaban confundiendo. Sí. Sí. Aprender de eso es en realidad, también, enviamos todas las acciones de usuario que el usuario ha realizado en el canvas desde el último aviso que enviamos a los agentes. Así que puedes decir, oh, espera, ¿puedes traer de vuelta esa forma que acabo de borrar? Sabe qué forma acabas de borrar, por ejemplo. Eso es bueno. Es como un deshacer incorporado casi. Sí.

Veamos. Esta es, ¿cómo gestionas el uso de tokens cuando trabajas con el canvas? Parece que podría requerir mucho contexto para funcionar. 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? Es mucho. No, son muchos tokens. Sí. Quiero decir, una de las cosas, las imágenes, siento que no, no son tan malas ahora. En la, algunas de las primeras experimentaciones que estábamos haciendo, las imágenes requerían muchos tokens y eran mucho más caras de procesar. Ahora, no tanto. Bien.

Pero sí, algo que hemos estado haciendo para gestionar eso, es que hemos estado adoptando este, en lugar de simplemente, tenemos este enorme aviso del sistema para fairies, como puedes imaginar, todos 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. Es un poco como un tipo RLM donde decimos, oye, haz un cuadrado o lo que sea, y básicamente puede consultar los documentos para el esquema de un cuadrado. Y así solo está obteniendo, y luego consulta los documentos para preguntar, ¿cómo creo una forma? Y así solo, le permitimos obtener solo la información que necesita y añade algo de latencia, por supuesto. Pero en cuanto al uso de tokens, es una gran ayuda. Eso es bueno.

Esta siguiente pregunta está relacionada en términos de uso de datos. Entonces, ¿los LLMs están usando esquemas JSON o una salida similar a XML div? Lo último podría ser eficiente debido a la gran cantidad de HTML en la que los LLMs han sido entrenados. Sí, HTML es realmente interesante. No hemos probado eso. De hecho, hemos pasado por un montón de cosas. Así que enseñar, lo primero que mostré, que fue el disparo único, eso usa una cosa similar a HTML para las acciones que produce. Para el agente starter y para fairies, eso está usando JSON. Y luego, para las cosas de la aplicación de escritorio, lo que realmente está haciendo es escribir JavaScript contra el editor y simplemente ejecutarlo localmente en la instancia del editor. Así que si alguien ha usado el modo de código o herramientas similares, básicamente, en lugar de darle al agente un conjunto de acciones de las que permitimos elegir, básicamente decimos, oye, aquí está todo el SDK del editor TL draw, y aquí están los documentos. Y puedes simplemente escribir JavaScript que evaluaremos allí. Y todo se ejecuta localmente, así que en términos de seguridad, está bien, al menos para la aplicación de escritorio. Pero sí, así que eso es otra cosa que es, si quisieras hacer mil formas, antes serían mil llamadas de herramientas o lo que sea. Pero este es solo un bucle for. Así que puedes, en cuanto al uso de tokens y cosas así, también puedes obtener muchas ganancias de eso. Me gusta eso.

Esa es una buena estrategia. Solo hay tiempo para un par de preguntas más. Aquí hay una divertida. Bueno, la perdí, pero aquí está esta. Entonces, ¿qué biblioteca de IA, si alguna, estás usando para gráficos en TL draw? Entonces, ¿hay alguna biblioteca de gráficos o todo está construido en formas? Todo son formas. Todo son formas. Está bien. Sí, sí, sí. No hay, quiero decir, eso sería algo interesante. Si quisieras que los agentes hicieran visualización de datos, podrías traer tu propia biblioteca de gráficos y hacer que las llenen. Pero sí, estos son solo formas. Creo que lo leí mal. Son chats, no formas. Entonces, ¿estás usando como AISDK o TanStack AI para como... Oh sí. Así que para fairies y el agente starter, estamos usando el AI, el Vercel AISDK. Pero no estamos conectándonos mucho a eso. El componente de chat y todo, eso es todo personalizado debido a cómo queríamos representar la UX para los agentes. Y para el agente starter, es... O para la aplicación de escritorio, creo que estamos usando, no, no estamos usando nada para eso. Simplemente lo estamos haciendo nosotros mismos. Está bien. Eso es todo el tiempo que tenemos para preguntas, pero muchas gracias, Max. Gracias.