In this workshop, we will build our first AI Agent – completely from scratch. We will cover the fundamentals of LLMs, explore Retrieval-Augmented Generation (RAG), and learn how to use function calling to connect AI with external tools.By the end, you will have a working AI agent that can autonomously decide which functions and data sources to use. No prior AI experience is required, but basic knowledge of TypeScript is recommended.After this workshop, you will be able to...Understand how Large Language Models (LLMs) work and how they process and generate text.Leverage LLMs for specific tasks by designing prompts and integrating them into applications.Implement Retrieval-Augmented Generation (RAG) to enhance AI responses with external knowledge.Use function calling in AI systems to interact dynamically with APIs and data sources.Build an AI agent that autonomously selects the right tools and data to complete user tasks efficientlyWho is this workshop for?No prior knowledge of Artificial Intelligence is necessary, as we’ll cover all the essential concepts during the workshop.We’ll build the AI agent in a React app, but the core logic will be framework-agnostic and written in TypeScript.

In this workshop we'll dive into the latest advancements in React and best practices for building modern React apps. We'll take a look at modern NextJS and React Router 7 Framework (aka Remix) along with React's new "React Server Components". We'll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router.

In this workshop we'll dive into the latest advancements in React and best practices for building modern React apps. We'll take a look at modern NextJS and React Router 7 Framework (aka Remix) along with React's new "React Server Components". We'll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router.

Let’s demystify the secrets of modern JavaScript tooling. In this workshop, you will learn how linters, compilers, and code transforms work. You will take your first steps building your own developer tools, writing an ESLint rule, a compiler plugin, and a code transformation. Learn these skills to help your team and deepen your understanding of computer languages.Workshop Plan:A preview of how ASTs can be usedA brief walkthrough of how compilers workAn intro to working with an ASTThe secret to making thousands of changes in secondsHow to apply this skill

In this workshop we'll dive into the latest advancements in React and best practices for building modern React apps. We'll take a look at modern NextJS and React Router 7 Framework (aka Remix) along with React's new "React Server Components". We'll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router.

In this workshop, we will explore React's latest features: Server Components, Server Functions, and forms. Discover how to optimize server-side rendering, build smooth user experiences with React Suspense and Transitions, and enhance application interactivity with Server Functions and new React 19 hooks.
Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

AG Charts is a JavaScript Charting Library, built by AG Grid, that you can use to create beautiful and compelling data visualisations in React, with a simple, intuitive, flexible API.What You'll Learn: In this workshop, you'll learn how to get started with AG Charts to create simple visualisations using AG Charts Community, as well as more complex visualisations using AG Charts Enterprise. We'll be using interesting data sets to create visualisations using different chart types, including maps, gauges, funnels and more. Who this is for: This workshop is perfect for anyone looking to add Data Visualisation to their React applications, without the overhead of libraries such as D3.

Model Context Protocol (MCP) introduces a structured approach to LLM context management that addresses limitations in traditional prompting methods. In this workshop, you'll learn about the Model Context Protocol, its architecture, and how to build and use and MCP with Node.jsTable of Contents:What Is the Model Context Protocol?Types of MCPs (Stdio, SSE, HTTP Streaming)Understanding Tools, Resources, and PromptsBuilding an MCP with the Official TypeScript SDK in Node.jsDeploying the MCP to the Cloud (Heroku)Integrating the MCP with Your Favorite AI Tool (Claude Desktop, Cursor, Windsurf, VS Code Copilot)Security Considerations and Best Practices

As artificial intelligence evolves from simple task automation to autonomous agents capable of independent decision-making and task execution, enterprises face new identity and access management (IAM) challenges. In this interactive workshop, participants will explore and apply strategies to secure AI agents as they consume business services on-behalf-of users or own their own.Through hands-on exercises, real-world scenarios, and a guided technical tutorial, you’ll learn how AI agents can:- Be treated as managed, first-class entities within the business systems- Authenticate and obtain authorisation independently or on behalf of users- Leverage and extend standards such as OAuth 2.0 and OpenID ConnectBy the end of the workshop, attendees will have actionable skills and a framework for securing AI agents while preserving their autonomous capabilities, ensuring enterprise adoption without compromising security or compliance.

You probably have faced a situation where you needed to debug something particular in your application. Something in a specific condition. These kinds of situations tend to be poorly handled by us developers.A common approach is adding a bunch of logs, deploying the code, and waiting for the logs to return. This is a very slow process and can be very frustrating.It would be much better if you could just get into the environment, while running, execute some code, and see the results. This is where the node:repl module comes in. It allows you to create a Read-Eval-Print Loop (REPL) in your Node.js application.Inspired by Ruby on Rails, which has a very useful console, I implemented a console in the application I was working on. It was a game changer. Now, we have a way more effective debugging/experimentation process. My team fell in love with it. Now, it's part of the app, as it always has been.Another good thing is that it was not hard to implement. The node:repl module gives everything. We just need to ensure the application is properly bootstrapped to use the REPL module.Table of contentsThe importance of tools and DXThe module node:replHands-on: creating an iterative repl for debugging any applicationConclusionTakeawaysWhy DX matters and how to improve it through the development of custom toolsHow Node.js modules can help with the creation of effective toolsGet to know the node:repl module

This workshop introduces how to use open-source LLMs on-premise for enhanced data control, privacy, and cost efficiency. It highlights Ollama for simplified LLM management (downloading, running models offline) and FastAPI for efficient local hosting, enabling fast API development and seamless integration. This combined approach offers superior security, regulatory compliance, and customization compared to cloud-based solutions.

Craft immersive XR educational experiences through declarative 3D rendering with this advanced workshop. Leverage React Three Fiber's component-based architecture to build a gamified solar system explorer featuring dynamic orbital mechanics, interactive raycasting, and WebGL optimizations. Master performance-critical techniques including InstancedMesh implementation, reactive state management, and WebXR integration while creating engaging STEM visualizations. This workshop bridges theoretical physics concepts with practical front-end development, demonstrating how Three.js can transform educational content through spatial computing paradigms.Agenda:Introduction to React Three Fiber and Three.js: Setting up the project environmentBuilding the Solar System Scene: Creating planets, orbits, and space backgrounds with animations Interactivity and Gamification: Raycasting for object selection and interactionPerformance Optimization: Using InstancedMesh for efficient renderingWebXR Integration: Enabling AR/VR experiences in the browser

In this hands-on workshop, we will build a fully interactive and customizable Scheduler in React using Bryntum Scheduler, a powerful UI component used in enterprise-grade applications for resource planning, project scheduling, and event management.Attendees will learn how to integrate Bryntum Scheduler in a modern React + Vite setup, render custom events using JSX, and use the built-in Scheduler features to control event rendering, resources, and interactivity. By the end of the session, attendees will have a clear understanding of how to build a high-performance Scheduler in React that is both flexible and production ready.Table of ContentIntroductionWhat is Bryntum SchedulerBuilding a Simple Scheduler in ReactUnderstanding Bryntum data structureAdding custom JSX to eventsAdding customization options via Context APIWrap up and Q&A

In this workshop, we will incrementally augment an existing React application with AI. I'm sure most of you probably already maintain a React app, so rather than starting from the ground-up, let's take something that already works, and develop some patterns for adding practical, real-world AI features without making them feel "bolted on" just for the sake of chasing the hype. We'll explore questions such as "which model should I use?", "should the LLM run on-device or on the cloud?", "am I risking vendor lock-in by picking a proprietary model over an open-source one?", and we'll dive into the deeper topics of using AI frameworks, creating agents, and the clients and servers of the Model Context Protocol (MCP). By the end of this workshop, you should have some applicable knowledge and skills which you can bring to your own applications, and hopefully, you'll walk away with a greater understanding of how and when to actually use AI 

LLMs are not just fancy search engines: they lay the ground for building autonomous and intelligent pieces of software, aka agents.
Companies are investing massively in generative AI infrastructures. To get their money's worth, they need developers that can make the best out of an LLM, and that could be you.
Discover the TypeScript stack for LLM-based development in this 3 hours workshop. Connect to your favorite model with the Vercel AI SDK and turn lines of code into AI agents with Mastra.ai.

Have you ever wanted to build a generative UI application like V0 where you simply prompt it and it creates an entire interface for you? Well lets build that with the power of Server Driven UIs and AI. Well walk through just how easy Server Driven UI makes the creation a generative UI application. All the while we'll be leveraging React 19 APIs to make this generative UI application as performant as possible!

A comprehensive workshop designed specifically for React developers ready to become AI engineers. Learn how your existing React skills—component thinking, state management, effect handling, and performance optimization—directly translate to building sophisticated AI applications. We'll cover the full stack: AI API integration, streaming responses, error handling, state persistence with Supabase, and deployment with Vercel.Skills Translation:- Component lifecycle → AI conversation lifecycle- State management → AI context and memory management- Effect handling → AI response streaming and side effects- Performance optimization → AI caching and request optimization- Testing patterns → AI interaction testing strategiesWhat you'll build: A complete AI-powered project management tool showcasing enterprise-level AI integration patterns.

This workshop bridges the long-standing gap between React developers and production-ready delivery. Many front-end developers know how to build great interfaces but they stumble when it comes to building, testing, deploying, and monitoring those apps in real-world environments.This workshop gives React developers the DevOps superpowers they need.You’ll learn how to:Dockerize your React application for development and production following best practices from Docker Captain Leader.Build scalable CI/CD pipelines using GitHub ActionsOptimize your apps for performance and reliabilityThis is not theory. It’s not a shallow overview. This is a production-focused, real-world workshop by a front-end developer who lives and breathes this every day.

In this workshop, we'll go beyond the fundamentals and explore some of the more powerful features React Query has to offer. You'll gain a deeper understanding of how it works under the hood and learn how to write scalable, maintainable React Query code.Together, we'll build a simple example app and incrementally enhance it with one core objective in mind: delivering the best possible user experience. That means snappy interactions, minimal layout shifts, and avoiding unnecessary loading spinners wherever we can.To achieve this, we'll dive into advanced techniques like various forms of prefetching (including integration with route loaders), seeding the query cache, crafting smooth paginated experiences, and even persisting query state through full page reloads using persistence plugins.Note: You should have prior knowledge about React Query if you attend this workshop.

In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Gain insights into optimizing server-side rendering, enhancing application interactivity through Server Actions and React 19 hooks, and mastering form creation for robust data handling and validation.

Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Join us to learn how to build your own Zapier-like interface in days, not months. Discover how to save 1,000+ hours of design and coding upfront, building a complex workflow editor UI from scratch. Customize it for AI orchestration, automations, business processes visualization and other real-world workflow needs. Workflow Builder SDK is designed to quickly deploy node flow interfaces that let you tailor properties, layouts, and interactions to suit unique business workflows. Connect it with any backend and reduce the dependency on N8N, Make or Zapier for your own automation needs.Agenda and key takeaways:Explore diagramming tools: Understand and compare libraries for building diagram UIs in React. We analyze the strengths, trade-offs, and best use cases (Web/Canvas/SVG/DOM).Hands-on: Workflow Builder SDK: Build a real-world AI workflow editor interface using our SDK and the React Flow foundation.Plug & play architecture: Implement the core features of a modern editor:Custom nodes and edgesState management and drag-and-drop supportAuto-layout, minimap, and zoom controlsProperty-editing sidebarPolishing user experience (UX): Learn how to enhance usability and visual appeal. We'll use Overflow - Open Source UI components to streamline development and keep the focus purely on business logic.

Learn how to build a production-ready Model Context Protocol (MCP) server running on Cloudflare Workers. This hands-on workshop walks attendees through creating an MCP server, exposing tools, integrating external APIs, and deploying globally so AI assistants can call your tools in real time.Workshop outcome: By the end of the session, attendees will have a deployed MCP server and the knowledge to extend it so AI assistants can call their tools securely and efficiently.

Much like the promise of cake in Portal, login forms are everywhere in web development. While they may seem functional at first glance, many users with disabilities encounter a maze of invisible walls, from keyboard traps to inaccessible CAPTCHAs. It's as if GLaDOS designed these forms herself to test us!In this practical walkthrough, we will debug the accessibility issues of a real React login component live, similar to traversing those test chambers: Using an actual screen reader, we'll show how minor improvements, such as proper ARIA implementation and effective focus management, can transform a complex test chamber into a smooth user experience. Additionally, we will address the common pitfalls that GLaDOS might throw at us in both the Portal universe and the real world of accessibility, especially concerning authentication processes and its special needs. So grab your portal gun—let's work together to break down these barriers and ensure that authentication truly works for everyone. The cake might be a lie, but accessibility doesn't have to be!

This hands-on workshop teaches developers how to build privacy-first, on-device AI applications using React Native and Apple’s Foundation Models. Participants will implement real-world LLM features like text generation, streaming responses, and structured outputs with type-safe schemas.Goals:Understand on-device LLM fundamentals and trade-offsSet up React Native with Apple’s new Foundation ModelsBuild a sample app using text generation and streaming responsesIntegrate structured outputs and experiment with schema validation (Zod)Explore advanced topics like adapters, privacy, and Vercel AI integration

Server-side rendering (SSR) is back in the spotlight – and React is evolving fast. In this workshop, we’ll go deep into the mechanics, performance trade-offs, and modern techniques of SSR with React.js. You'll start by building an SSR app from scratch – no frameworks, just raw renderToString and hydrateRoot—to truly understand how React renders on the server and hydrates on the client. From there, we'll upgrade to React 18’s streaming capabilities using renderToPipeableStream, implement selective hydration using Suspense, and integrate data fetching directly into the server render cycle. We’ll look at React Server Components (RSC), showing how they complement SSR. We'll also cover hydration strategies, how to prevent mismatches, and how to cache or stream HTML effectively for real-world performance. Finally, we’ll bridge our manual SSR work into production frameworks like Next.js.