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.

Most teams are still using AI as a glorified autocomplete, but the future is already here. I'll show you how engineering teams work when coding agents handle implementation while humans focus on guidance and oversight.I have built coding agents that have our team guidelines embedded - no more style guides or coding standards docs. You'll see agents that automatically follow our Next.js 15 patterns, Nx monorepo structure, shadcn/ui conventions, and more of our tech stack, while humans make small corrections that improve all future work.This isn't about replacing engineers - it's about scaling the possibilities of your team through agent multiplication instead of hiring and restructurizations. I'll demonstrate the workflow where the agent implementation is followed by human refinement, creating consistent quality that doesn't depend on human variability.

Overview:        AI adoption brings system complexity, especially when autonomy, orchestration, and cloud-native microservices collide. Based on my published research and enterprise experience, this workshop breaks down the complexity of deploying agentic systems responsibly. This workshop is aimed at senior engineers who are navigating cloud-native architectures while introducing autonomous AI components, without a clear blueprint.Contents:1. The New Complexity Stack    a) Microservices, AI, and third-party code generators    b) Where system chaos starts and why it escalates
2. Understanding Agentic AI Behavior    a) Autonomy, memory, and hallucination risk    b) Real-world examples from financial decision support
3. Design Patterns for Clarity    a) Guardrails for system observability    b) Tradeoffs: orchestration vs code generation
4. Scalability Without Burnout    a) What senior engineers must lead: governance, ethics, reliability     b) Designing systems that scale safely under load
5. Takeaways    a) Agentic adoption roadmap    b) How to test and monitor non-deterministic AI    c) Alignment with team velocity and business outcomes

Workshop Objective:Show how teams can go from AI-generated UI to live production components in under an hour.Workshop Agenda:Part 1: Kickoff & Setup - Quick intro to the Pluggable AI method- Walk through a real example already running in production- Align on the selected AI/visual tool (Claude, Gemini, etc.)- Choose 1–2 UI components to work with- Define what’s needed to make the component pluggable- Select the host app Part 2: Generate the Component - Use the selected AI tool to generate the UI component- Myop team helps ensure it fits integration guidelines (structure, format)Part 3: Integration Preps- Identifying where the component connects (logic hook)-Review generated component and prepare for connectionPart 4: Plug It Live - Plug the component into the live app using Myop's open source- Optional: test versioning, A/B testing, segmentation, gradual rolloutPart 5: Wrap-Up- Recap effort vs. outcome- Q&A  

This workshop introduces Context Engineering - a simple yet structured approach to getting consistent, high-quality results from AI coding assistants. You'll learn how to move beyond basic prompting to create comprehensive workflows to give your AI coding assistants all the architecture, best practices, project rules, code examples, and validation processes it needs to get the job done effectively. Through hands-on exercises with Claude Code, we'll demonstrate how proper Context Engineering unlocks a whole new level of agentic engineering while teaching practical techniques, templates, and best practices that help AI assistants understand your project standards and deliver production-ready code consistently.

In this workshop, I’ll guide participants through a process for building full-stack applications using Cursor. We’ll cover setting up Cursor workflows, including rules, commands, and custom modes, to streamline development. We will use Cursor to draft PRDs, database schema, etc and a simple SOW. We’ll turn notes into actionable checklists to guide the build, connecting the front end, API, and database.Additionally, we’ll create workflows for debugging, testing, reviewing, and fixing the app while reducing hallucinations with precise prompts. The session will also include a security review workflow and techniques for applying prompts to achieve a modern UI design. Attendees will leave with a functioning app on their machine and a reusable development process.

 This workshop will guide you through building a modern full-stack web application using RedwoodSDK and React Server Components. As a frontend developer, you'll learn how to leverage the latest React patterns to approach full-stack development with confidence. The workshop covers building server-rendered components, working with databases, implementing authentication, and deploying a real-world application. RedwoodSDK simplifies the transition from frontend to full-stack development, giving you the tools to create performant, modern web applications.

This hands-on workshop explores how to transform React components into standards-based Web Components, unlocking the ability to share UI elements across Angular, Vue, Svelte, and even vanilla JavaScript applications. While frameworks like Angular and Vue offer native support for this kind of interoperability, React doesn't—at least, not out of the box.We’ll demystify how to achieve similar results in React using supported patterns and tooling. Through live coding and guided exercises, you’ll learn how to bridge the gap between React and the Web Components standard to promote true component reusability, reduce duplication, and simplify integration in micro frontends and design systems. Participants will leave with practical techniques, tooling knowledge, and real-world strategies they can immediately apply to their own projects.

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.

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 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.

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

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

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 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!

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.

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.

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.

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. 

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.