Construyamos K.I.T.T. Con JavaScript

This ad is not shown to multipass and full ticket holders
React Summit
React Summit 2026
June 11 - 15, 2026
Amsterdam & Online
The biggest React conference worldwide
Upcoming event
React Summit 2026
React Summit 2026
June 11 - 15, 2026. Amsterdam & Online
Learn more
Bookmark
Rate this content

En la serie de televisión Knight Rider, el concepto de un coche inteligente era pura ciencia ficción. Más de 40 años después, ahora tenemos las herramientas para hacerlo realidad, puramente en el navegador. Esta charla explora la combinación de técnicas de IA como RAG y llamadas a funciones con APIs avanzadas del navegador (por ejemplo, WebBluetooth) para crear un agente de IA basado en el navegador con personalidad, memoria y autonomía, impulsado por WebAssembly y WebGPU, ¡totalmente offline y preservando la privacidad!

This talk has been presented at React Advanced 2025, check out the latest edition of this React Conference.

Nico Martin
Nico Martin
29 min
28 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Nico se presenta a sí mismo y su trabajo en machine learning e IA. Explorando la esencia de Kit y sus características humanas, y el uso de Transform.js para machine learning en el navegador. Comprendiendo la importancia de los parámetros del modelo y la disponibilidad de modelos de código abierto como Apertus y GEMMA3. Creando una versión ajustada de la canalización de IA utilizando ingeniería de prompts con un nuevo prompt del sistema para mejorar el comportamiento y las respuestas. Utilizando Reddit para extraer escenas, transformando guiones en JSON estructurado y creando un resumidor LLM para comparaciones de similitud semántica. Introducción al Agentic Rack System y la finalización de tareas autónomas por AA Agents. Utilizando TensorFlow y Transformer JS para varias tareas y modelos. Ejecutar LLMs en el navegador no es práctico debido al gran tamaño de los modelos. El rendimiento del dispositivo importa en el procesamiento de IA basado en el navegador.

1. Introduction to Kit and Nico

Short description:

Nico presentándose a sí mismo y su trabajo en machine learning e IA.

Hola a todos. Mi nombre es Nico. Y hoy, me gustaría llevarlos en un pequeño viaje de cómo intenté crear uno de los coches más icónicos en la historia de la televisión directamente en JavaScript en el navegador. Pero antes de hacer eso, algunas palabras sobre mí. Como ya han escuchado, mi nombre es Nico. Soy de Suiza. Trabajo como ingeniero de machine learning en Hugging Face, y también soy parte del Programa de Expertos Desarrolladores de Google en tecnologías web y también IA y machine learning. Eso significa que paso mucho tiempo tratando de cerrar la brecha entre el navegador o el ecosistema del navegador y el mundo de la IA.

2. Decoding the Essence of Kit

Short description:

Explorando la esencia de Kit y sus características humanas, y el uso de Transform.js para machine learning en el navegador.

Pero comencemos con una pregunta muy simple. ¿Quién es Kit? Kit es la abreviatura de Knight Industries 2000s. Es este coche avanzado impulsado por IA del programa de los años 80 Knight Rider. Y todo el programa básicamente trata sobre Kit y Michael Knight. Luchan contra los malos, así que es este buenos contra malos. Y al final, Kit es solo esta supercomputadora, sofisticada IA. Así que es muy difícil definir realmente quién es Kit.

Así que reformulemos la pregunta, ¿qué es Kit? Y en los años 80, era bastante simple. En ese entonces, Kit era solo un coche supercomputadora muy avanzado haciendo cosas de supercomputadora muy avanzadas. Pero luego aprendimos sobre redes neuronales artificiales, sobre machine learning. Así que tenemos redes que aprenden cosas ajustando las conexiones entre sus neuronas. Así que tal vez Kit sea solo esta enorme red neuronal artificial. Pero hoy estamos en la era de la IA, y tengo una explicación muy simple. Así que Kit es solo un agente de IA que conecta diferentes servicios con un proceso de toma de decisiones. Bien, eso tiene sentido. Vamos a construirlo.

Así que si quieres construir Kit, primero necesitas profundizar en las características. Entonces, ¿cuáles son las características que hacen que Kit sea humano? Primero que todo, escucha, habla, así que podemos hablar con él en lenguaje natural. Es inteligente, por lo que es capaz de procesar información, de actuar sobre esa información. Tiene personalidad, no es solo una máquina sin alma. Tiene humor, tiene sarcasmo, tiene todo eso. Tiene una historia. Así que Michael Knight y Kit, vivieron a través de temporadas y episodios de cosas de las que pueden hablar. Y por último, pero no menos importante, tiene un cuerpo. Realmente vive en el mundo físico. Bien, si queremos resolver esos problemas, esas características, necesitamos trabajar con mucho machine learning. Y lo bueno es que, de hecho, podemos usar machine learning en el navegador. Y la forma más fácil de hacerlo es usar Transform.js. Y para ser completamente honesto, Transform.js es también la biblioteca en la que trabajo a tiempo completo. Fue lanzada en 2021 por mi colega, Joshua Lochner.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
Top Content
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
JSNation US 2024JSNation US 2024
31 min
El Flujo de Trabajo del Desarrollador Asistido por IA: Construye Más Rápido e Inteligente Hoy
Top Content
AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.
El Ascenso del Ingeniero de IA
React Summit US 2023React Summit US 2023
30 min
El Ascenso del Ingeniero de IA
Top Content
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
IA y Desarrollo Web: ¿Exageración o Realidad?
JSNation 2023JSNation 2023
24 min
IA y Desarrollo Web: ¿Exageración o Realidad?
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
Transformers.js: Machine Learning de Última Generación para la Web
JSNation 2025JSNation 2025
27 min
Transformers.js: Machine Learning de Última Generación para la Web
Joshua introduces Transformers JS and Hugging Face, emphasizing community collaboration and pre-trained models. Transformers JS evolution led to 1.4 million monthly users, supporting 155 architectures. The library's browser-based capabilities offer real-time processing, cost-efficiency, and scalability. Integration enhancements include native web GPU execution and React Native implementation. Web ML implementation focuses on Onyx Runtime for device execution and web GPU for resource optimization. Browser-based ML applications cover vision, speech recognition, and text-to-speech. Advanced implementations include multimodal applications and educational tools. Interactive AI demonstrations showcase semantic search and conversational AI scenarios. Model licensing transitions to ECMAScript for efficiency and model redownloading factors are discussed.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.
La Guía del Desarrollador de React para la Ingeniería de AI
React Summit US 2025React Summit US 2025
96 min
La Guía del Desarrollador de React para la Ingeniería de AI
Featured WorkshopFree
Niall Maher
Niall Maher
Una masterclass integral diseñada específicamente para desarrolladores de React listos para convertirse en ingenieros de AI. Aprende cómo tus habilidades existentes de React—pensamiento en componentes, gestión de estado, manejo de efectos y optimización del rendimiento—se traducen directamente en la construcción de aplicaciones de AI sofisticadas. Cubriremos todo el stack: integración de API de AI, respuestas en streaming, manejo de errores, persistencia de estado con Supabase y despliegue con Vercel.Traducción de habilidades:- Ciclo de vida de componentes → Ciclo de vida de conversación de AI- Gestión de estado → Gestión de contexto y memoria de AI- Manejo de efectos → Streaming de respuestas de AI y efectos secundarios- Optimización del rendimiento → Caché de AI y optimización de solicitudes- Patrones de prueba → Estrategias de prueba de interacción de AILo que construirás: Una herramienta completa de gestión de proyectos impulsada por AI que muestra patrones de integración de AI a nivel empresarial.
Construir agentes LLM en TypeScript con Mastra y Vercel AI SDK
React Advanced 2025React Advanced 2025
145 min
Construir agentes LLM en TypeScript con Mastra y Vercel AI SDK
Featured WorkshopFree
Eric Burel
Eric Burel
Los LLMs no son solo motores de búsqueda sofisticados: sientan las bases para construir piezas de software autónomas e inteligentes, también conocidas como agentes.
Las empresas están invirtiendo masivamente en infraestructuras de IA generativa. Para obtener el valor de su inversión, necesitan desarrolladores que puedan sacar el máximo provecho de un LLM, y ese podrías ser tú.
Descubre la pila de TypeScript para el desarrollo basado en LLM en esta masterclass de 3 horas. Conéctate a tu modelo favorito con el Vercel AI SDK y convierte líneas de código en agentes de IA con Mastra.ai.