Building an AI Runtime in the Browser with React and Open Models

Vishnudhasan Govindarajan

I built cool stuff from India for the World!

Mentorship available

This talk is confirmed. The time of the talk will be announced soon.

The recording will be published after editing. Multipass and Full ticket holders have early access.

Get Multipass

Bookmark

Sentry

Promoted

Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

What if your React application could run its own AI model, remember context, and perform AI tasks without sending data to a backend?
Modern browsers are gaining the capabilities needed to make this possible. Local model inference, Web Workers, browser storage, and streaming APIs allow us to move parts of the AI runtime directly into the browser.

In this talk, we'll build a small React application powered by a local Gemma / Kimi model and progressively turn it into a browser-native AI runtime.
We'll focus on three building blocks: running inference locally, giving the application persistent memory, and moving AI work into background workers. Along the way, we'll see how this changes the way we think about React architecture and what belongs in the frontend.

The result is an AI application that can work locally, keep its context, and continue processing without depending on a cloud-hosted AI API.

This talk has been presented at React Summit US 2026, check out the latest edition of this React Conference.

architecture

Vishnudhasan Govindarajan

Video transcription, chapters and summary will be available later.

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

Scaling Up with Remix and Micro Frontends

Remix Conf Europe 2022

23 min

Scaling Up with Remix and Micro Frontends

Top Content

Adrien Baron

Creator of Tiny Frontend

This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.

remix javascript micro-frontends architecture

Understanding React’s Fiber Architecture

React Advanced 2022

29 min

Understanding React’s Fiber Architecture

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

react architecture concurrent rendering react 18 beginner friendly react fiber react reconciliation

Thinking Like an Architect

Node Congress 2025

31 min

Thinking Like an Architect

Top Content

Luca Mezzalira

Author of Front-End Reactive Architectures and Building Micro-Frontends

In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.

architecture

Full Stack Components

Remix Conf Europe 2022

37 min

Full Stack Components

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

remix javascript fullstack architecture

The Dark Side of Micro-Frontends

React Advanced 2025

29 min

The Dark Side of Micro-Frontends

Luca Mezzalira

Author of Front-End Reactive Architectures and Building Micro-Frontends

In the Talk, various key points were discussed regarding micro-front-end architecture. These included challenges with micro-intents, common mistakes in system design, the differences between micro-intents and components, granularity in software architecture, optimizing micro-front-end architecture, efficient routing and deployment strategies, edge computing strategies, global state and data sharing optimization, managing data context, governance and fitness functions, architectural testing, adaptive growth, value of micro-frontends, repository selection, repo structures, and web component usage.

architecture

Why Node.js Needs an Application Server

Node Congress 2026

18 min

Why Node.js Needs an Application Server

Matteo Collina

Node.js TSC committee member. Pino & Fastify author.

Matteo Collina discusses Node.js, its single-threaded design, and the introduction of threads in 2018 for parallelism and CPU utilization. Node.js production monitoring focuses on application health, fault tolerance, and event loop efficiency. VAT architecture improves Node.js applications with thread migration and monitoring. Node.js manages threads and failures independently with Prometheus monitoring. Scalability in Node.js involves Kubernetes clusters and in-process scaling. Next.js with React SSR for Node.js applications enables dynamic scaling and performance. Node.js handles CPU blocking and SSR performance by utilizing multiple threads.

node.js architecture

Workshops on related topic

AI on Demand: Serverless AI

DevOps.js Conf 2024

163 min

AI on Demand: Serverless AI

Top Content

Featured WorkshopFree

Nathan Disidore

In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.

serverless architecture artificial intelligence

React and Microfrontends

React Summit US 2024

56 min

React and Microfrontends

Featured Workshop

Harsh Maheshwari

Mentorship available

Leveraging reactjs to create reusable microfrontends addressing challenges and common pitfalls.

architecture

High-performance Next.js

React Summit 2022

50 min

High-performance Next.js

Workshop

Michele Riva

Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.

performance next.js best practices architecture

Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Workshop

AI Coding Summit 2025

86 min

Model Context Protocol (MCP) Deep Dive: 2-Hour Interactive Workshop

Workshop

Stepan Suvorov

Join a focused 2-hour session covering MCP's purpose, architecture, hands-on server implementation, and future directions. Designed for developers and system architects aiming to integrate contextual data with ML models effectively. Agenda:- Introduction & Why MCP? Key challenges MCP solves and core benefits.- Architecture Deep Dive: components, interactions, scalability principles. - Building Your Own MCP Server: guided walkthrough with code snippets and best practices; live demo or code review.- Future of MCP Developments: potential enhancements, emerging trends, real-world scenarios.
Key Takeaways:- Clear understanding of MCP's rationale.- Insight into design patterns and scaling considerations.- Practical steps to implement a prototype server.- Awareness of upcoming trends and how to apply MCP in projects.

architecture

From Async Chaos to Deterministic React: Hands-On State Machine Architecture for Real-Time Systems

React Summit 2026

86 min

From Async Chaos to Deterministic React: Hands-On State Machine Architecture for Real-Time Systems

Workshop

Rajni Gediya

Mentorship available

As React apps move into real-time systems — streaming data, AI workflows, hardware devices — async complexity grows quickly. Reducers and scattered async handlers often work at first, but once concurrency and lifecycle interruptions enter the picture, things start to break in subtle ways.
In this hands-on workshop, we’ll take a fragile async React setup and redesign it into a deterministic, state-machine-driven architecture. The goal isn’t to teach a specific library, but to show how explicit state modeling makes complex systems easier to reason about and more reliable in production.

architecture

Node's Concurrency With the Strength of a Bull With BullMQ

Node Congress 2026

95 min

Node's Concurrency With the Strength of a Bull With BullMQ

Workshop

2 authors

Node's concurrent nature is powerful already, but often we need to push work out of the main server for several reasons. In this work, we will explore a few scenarios in which work is cleverly pushed to another Node process to resolve.
Once we use a queue to distribute workloads, we need to identify the nature of the work to be done. For either I/O- or CPU-intensive work, the first is already perfectly covered by a single Node.js process; we will need to tweak the worker setup to match the available resources and throughput.

architecture patterns