The workshop focuses on theory and practice building production-ready AI agents with Node.js and modern Agent SDKs. We will use a real codebase as an execution environment to explain the core concepts behind agents: the agent loop, tool calling, structured outputs, context management, guardrails, tools, and human approval. We will build a Node.js SDK-based engineering agent that receives a development task, inspects a repository, proposes and applies safe code changes, runs validation checks, and exports execution artifacts to a messenger/storage. We will also cover how this agent fits into a broader production architecture: where MCP, orchestration, multi-agent patterns, CI/CD, security boundaries, observability, and workflow tools such as n8n may be useful. By the end of the workshop, participants will understand not only how to use an Agent SDK, but also what remains their responsibility when designing safe and maintainable agent runtimes.

AI coding assistants are evolving from simple autocomplete to autonomous agents that can interact with external systems. But how do you teach an agent to follow your workflows and use the right tools at the right time?In this hands-on workshop, you'll discover:What MCP (Model Context Protocol) is and how it standardizes tool integration for LLMsHow Agent Skills package domain-specific knowledge and workflows for AI agentsThe key differences between MCP servers and Skills, and when to use eachHow to create a custom Skill that orchestrates multiple MCP tools into a cohesive workflowBy the end of this session, you'll build your own AI Skill that uses MCP tools — a Matrix-themed Neo fighting skill.Who should attend: This workshop is ideal for software developers who use AI coding assistants (Claude Code, Cursor, or similar) and want to extend their capabilities with custom integrations and workflows. No prior MCP or Skills experience required — just bring your curiosity and a laptop.

LLMs are powerful but unpredictable and most tutorials skip the part where you actually have to deal with that in production code. This workshop teaches you to use generative AI as an engineering tool: how to structure prompts around schemas, validate and repair non-deterministic output, and run models locally so you control the cost and the carbon.

We'll generate a world for a roleplaying game as our teaching context it's a fun, low-stakes domain that makes the hard problems visible. The patterns you leave with apply anywhere you want to bring LLMs into a typed system.

No ML background required. Just TypeScript and a laptop.

AI agents are becoming part of the software development process, but most teams treat them like isolated tools rather than participants in a structured workflow. Without coordination, agent-driven development quickly turns into chaos: duplicated work, endless retries, and unpredictable delivery.

I will introduce a practical approach to organizing AI agents using principles from lean manufacturing and Kanban flow systems. By applying concepts such as pull-based work, WIP limits, and bottleneck management, engineering teams can orchestrate multiple AI agents—system analyst, developer, and tester—into a predictable software delivery pipeline.

Through a live demonstration using GitHub Projects and modern AI coding tools, I will show how agents autonomously pull tasks, move work across pipeline stages, and escalate to humans only when necessary. The result is a development workflow that reduces coordination overhead while dramatically improving throughput and visibility.

All it takes is a module and a CLI tool to build and deploy production peer-to-peer applications. In this workshop:Build a realtime peer-to-peer applicationConnect with others on your own application, completely peer-to-peer.Understand how to deploy, including production practices, principles and toolingThis is for anyone who builds with JavaScript and anyone who deploys applications.

Every engineering leader has been told "We don't have budget" - whether for tackling technical debt, modernising legacy systems, or adopting AI tooling. The problem is rarely the idea itself. It is how we present it. We frame platform health as an engineering preference when it should be positioned as business risk.

In this interactive workshop, Viktor Didenchuk shares a battle-tested framework from leading cloud platform delivery at JPMorganChase that translates any technical investment - from incident tooling to AI adoption - into the three languages executives actually speak: Revenue Risk, Regulatory Exposure, and Operational Resilience. Through three real-world scenarios with live audience polling, attendees will practise reframing technical asks into compelling, quantified business cases that survive quarterly financial reviews.

Walk away with a repeatable playbook you can apply on Monday morning to secure budget for the initiatives your organisation needs - including AI.

Every engineering organisation is experimenting with AI coding assistants, but few have built production-grade LLM integrations into their core developer infrastructure. I have such an experience, and I will share real patterns from deploying an AI-powered code review system across a 400+ person engineering organisation (~200 developers) — covering a competitive evaluation of 4 tools across 18 dimensions, building a webhook-based review architecture with slash commands and auto-review, evolving context enrichment from static rules to AI-powered document selection, managing a 4-model fallback chain on Vertex AI, and measuring impact through a feedback dashboard. Attendees will leave with a battle-tested
playbook for integrating LLMs into their own engineering workflows — not as toys but as production infrastructure.

Workshop Structure
1. The Code Review Bottleneck at Scale
2. Tool Evaluation — 4 Candidates, 18 Dimensions
3. Architecture — Webhook Server & Auto-Review
4. Context Enrichment — From Path Rules to AI- Document Selection
5. Model Strategy — Migration & Fallback Chain
6. Measuring Impact — Feedback Dashboard

Discover the power of Server Components in React without the need for a framework. In this workshop, we will explore how to build a server-side rendering solution using "only" vanilla JavaScript and Node.js. We'll dive into the core concepts of Server Components, including how to render components on the server and manage data fetching. By the end of this session, you'll have an understanding of how to implement Server Components in your own projects without relying on a framework.

All it takes is a module and a CLI tool to build and deploy production peer-to-peer applications.In this workshop:Convert an existing React application so that it no longer needs a server to deployPrepare the application and setup deployment flow for production releaseGo to production with multisig - decentralized quorom-based cryptographic signoff gated releasesThis is for anyone who builds with React or JavaScript and anyone who deploys applications.

Over the past year, model intelligence has skyrocketed, and agent tooling has improved significantly. However, there's still a gap: most AI agents don't have the procedural, domain-specific expertise needed to do real work inside real products, especially in React apps, where a small behaviour change turns into user-facing regressions.

In this workshop, I'll show how leveraging Agent Skills changes how you build AI features in React: from prompt tweaking to shipping packaged guides, resources and scripts that turn a general-purpose agent into a product-specific one via the Agent Skills protocol.  I'll be showing a practical way to do this in React apps without changing your current frameworks or LLM, with evals and versioning in place to prevent regressions.

AI coding assistants are evolving from simple autocomplete to autonomous agents that can interact with external systems. But how do you teach an agent to follow your workflows and use the right tools at the right time?In this hands-on workshop, you'll discover:What MCP (Model Context Protocol) is and how it standardizes tool integration for LLMsHow Agent Skills package domain-specific knowledge and workflows for AI agentsThe key differences between MCP servers and Skills, and when to use eachHow to create a custom Skill that orchestrates multiple MCP tools into a cohesive workflowBy the end of this session, you'll build your own AI Skill that uses MCP tools — a Matrix-themed Neo fighting skill.Who should attend: This workshop is ideal for software developers who use AI coding assistants (Claude Code, Cursor, or similar) and want to extend their capabilities with custom integrations and workflows. No prior MCP or Skills experience required — just bring your curiosity and a laptop.

Most developers using AI coding tools hit the same wall on real projects: the demos look magical, but production work falls apart. This workshop shows why — and what to do about it.The core lesson: execution is fast and cheap only when preparation is deep.What we'll build, liveFrom an empty directory to a deployed production app — a mobile-first Conference Companion App with the event schedule, speaker profiles, search, and favourites. Attendees will open it on their phones before the session ends.
The four stages of shipping with AIYou'll see a complete production workflow, deliberately weighted toward the work that actually determines quality:- Research — Gathering everything the AI will need upfront: official docs, code patterns, real data. By execution time, nothing has to be searched for. This is where quality comes from.- Planning — Breaking the app into clear tasks with acceptance criteria, written live. Skipping this is why most AI builds fail.- Execution — Ten tasks running in parallel via git worktrees, orchestrated by Navigator (a Claude Code plugin) on a React/Next.js stack. Code and docs written together.- Review & Ship — Quality gates (tests, lint, types, build), clean commits, merge, deploy to Vercel. Live URL shared with the room.
Bonus: Human + Claude Code vs. fully autonomous agentWhile the live build runs, Pilot — our autonomous coding agent — builds the same app from the same spec, on its own, in a separate repository. At the end, we open both side by side: two working apps, two pull request histories, two live URLs. One human-driven, one fully autonomous.
You'll leave withA repeatable workflow for shipping real software with Claude Code, plus concrete techniques you can apply to your own projects on Monday morning.

In this React testing workshop, we’ll trade fragile testing strategies for a testing recipe that actually holds up under pressure. If your current strategy feels like reheated leftovers — mocks that prevent you from refactoring, flaky end-to-end tests, or last-minute releases served raw — it’s time to sharpen your knives. We’ll hit the market for fresh ingredients like Vitest, Testronaut, Fakes, and Object Mothers.
Then, back in the kitchen, we’ll prepare low-maintenance, high-confidence tests that stay crisp through refactors and migrations. No dogma, no silver bullets — just practical, battle-tested techniques to help you cook with confidence.

This workshop explores how standalone agents operate at the runtime level and how they differ from traditional AI pipelines. We’ll examine agent architecture, planning loops, memory models, and tool execution. We’ll also cover multi-agent coordination, including state isolation and resource control. A key focus is security and governance — capability-based access, sandboxing, and injection risks. Finally, we’ll address observability and supervision: tracing reasoning, auditing tool usage, and implementing control mechanisms for production systems.

All examples and concepts will be grounded in the Node.js stack and we will explore why Node.js is particularly well-suited for building production-ready agent runtimes — serving as the control plane for supervision, integration, streaming execution, and distributed coordination.

References: OpenClaw, n8n, LangChain.

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.

Ready to go from zero to deployed voice agent?Voice AI is moving fast, but most tutorials end at "hello world" and leave you wondering how to actually ship something to production. This intensive workshop takes you through the entire journey: building a complete voice agent with TypeScript and React, deploying it to production, setting up observability, and creating evaluation frameworks—all the pieces you need for real-world JavaScript applications.What you'll build:A full-stack voice agent using LiveKit's TypeScript SDKReact UI with real-time audio visualization and state managementProduction deployment with proper observabilityAutomated testing and evaluation frameworksTopics covered:Setting up WebRTC audio streams with TypeScriptIntegrating STT, LLM, and TTS models in your JavaScript stackBuilding React UI for voice interactions with real-time stateHandling interruptions and natural turn-takingDeploying to production (Vercel)Setting up observability and session replayBuilding evaluation frameworks for quality assuranceThis isn't a demo – it's a bootcamp. You'll write TypeScript code, debug issues, and deploy to production. By the end, you'll have a working voice agent and the confidence to build more.

A new ecosystem of apps is emerging inside generalist conversational agents like ChatGPT and Claude. These apps serve as a direct digital storefront for brands. They serve as a compelling alternative to traditional mobile and web applications for the billion users who now begin their online journey in a chat.

AI apps are built on standards like Apps SDK, MCP Apps, and MCP UI. They all rely on MCP as the underlying protocol to expose context and tools, while adding a human-facing presentation layer in the form of UI widgets.

Building these React apps introduces a genuinely new set of challenges: you're no longer designing for a user interacting with a UI alone, but for a three-way dynamic between a human, a UI, and a model. Every interaction must account for whether it originates from a click on a widget or a message typed in the chat.

Skybridge is the full-stack TypeScript framework built on React that we created at Alpic to help developers around the world ship these new apps at the speed of light.

Come and learn how to build the next generation of AI apps with me!

Direct the code. Don't just write it.The development landscape is shifting from manual coding to system orchestration. Whether you are a seasoned React engineer looking to 10x your output or a product-driven creator aiming to turn a prototype into a functional app, this workshop is your gateway to AI-native development.Join us for a hands-on, 4-hour masterclass where we build a feature-rich, fullstack application from scratch using Cursor Composer. We skip the boilerplate and focus on the exact workflows used to ship high-quality features in minutes, not days.What You’ll MasterAI Orchestration: Move beyond simple autocomplete to manage multi-file changes and complex app logic.The .cursorrules Framework: Learn how to enforce project standards and prevent AI "hallucinations" for consistent, professional code.Rapid Fullstack Scaffolding: Generate type-safe database schemas and backend logic instantly.High-Fidelity UI Iteration: Transform prompts into polished, responsive interfaces using modern CSS and component libraries.Hardening & Refactoring: Use AI to hunt bugs, clean up "spaghetti" code, and generate comprehensive test suites.The ProjectWe will build a modern, data-driven web application that demonstrates the power of AI-assisted development. By the end of the session, you will have a functional codebase that showcases complex data relationships, dynamic UI, and optimized state management.
Who Is This For?Developers who want to eliminate repetitive tasks and focus on high-level architecture.Founders & Prototypers who need to bridge the gap between an idea and a working product rapidly.Tech Enthusiasts eager to master the professional AI-native toolkit.Requirement: Bring a laptop with Cursor installed. We provide the roadmap; the AI provides the speed; you provide the vision.
As this is a live online session, we encourage you to sign up ASAP to receive the pre-workshop setup guide and ensure you are ready to build from minute one.

Direct the code. Don't just write it.The development landscape is shifting from manual coding to system orchestration. Whether you are a seasoned React engineer looking to 10x your output or a product-driven creator aiming to turn a prototype into a functional app, this workshop is your gateway to AI-native development.Join us for a hands-on, 4-hour masterclass where we build a feature-rich, fullstack application from scratch using Cursor Composer. We skip the boilerplate and focus on the exact workflows used to ship high-quality features in minutes, not days.What You’ll MasterAI Orchestration: Move beyond simple autocomplete to manage multi-file changes and complex app logic.The .cursorrules Framework: Learn how to enforce project standards and prevent AI "hallucinations" for consistent, professional code.Rapid Fullstack Scaffolding: Generate type-safe database schemas and backend logic instantly.High-Fidelity UI Iteration: Transform prompts into polished, responsive interfaces using modern CSS and component libraries.Hardening & Refactoring: Use AI to hunt bugs, clean up "spaghetti" code, and generate comprehensive test suites.The ProjectWe will build a modern, data-driven web application that demonstrates the power of AI-assisted development. By the end of the session, you will have a functional codebase that showcases complex data relationships, dynamic UI, and optimized state management.
Who Is This For?Developers who want to eliminate repetitive tasks and focus on high-level architecture.Founders & Prototypers who need to bridge the gap between an idea and a working product rapidly.Tech Enthusiasts eager to master the professional AI-native toolkit.Requirement: Bring a laptop with Cursor installed. We provide the roadmap; the AI provides the speed; you provide the vision.
As this is a live online session, we encourage you to sign up ASAP to receive the pre-workshop setup guide and ensure you are ready to build from minute one.

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.

This workshop closes the old and very real gap between Node.js developers and production.Many Node.js developers can build APIs, services, and backends that work locally—but things fall apart when it’s time to containerize, deploy, scale, and operate them in real environments. This workshop fixes that.This is where Node.js stops being “just code” and becomes a reliable production system.What you’ll learn:Dockerize Node.js applications for development and production using battle-tested patternsDesign clean, fast, and secure Docker images for Node.jsBuild scalable CI/CD pipelines with GitHub ActionsOptimize Node.js apps for performance, stability, and observability

In this hands on workshop participants will learn how to create a production‑ready Model Context Protocol (MCP) server on Cloudflare Workers. The session covers defining tool endpoints, integrating external APIs, persisting state with KV storage, and globally deploying the server so AI assistants can invoke custom tools in real time. By the end of the workshop every attendee will have a live MCP server they can extend and secure for their own AI‑agent projects.  

In this hands-on session, we'll dive straight into the practical mechanics of working with Google DeepMind’s latest research and models. We'll explore Google AI Studio, Antigravity, and the Gemini APIs, focusing on how to seamlessly integrate these capabilities into your own projects. If you're looking for the modern developer's equivalent of Python's "import antigravity" (pun intended!), this is it.We'll prioritize a hands-on, hacker-friendly approach so you can walk away with a solid intuition for how these tools work under the hood. You'll leave fully empowered to use these models in your own architecture, with the exact steps needed to get up and running with Gemini for code generation, analysis, and everyday tinkering as quickly as possible.

Join us for an interactive workshop where you'll train your first neural network using the classic MNIST handwritten digit dataset. In this hands-on session, participants will use OpenShift AI 3.x Workbenches to build and train a PyTorch model that recognizes handwritten digits from images.This beginner-friendly workshop provides a practical introduction to machine learning workflows in an enterprise-grade AI platform. Working directly in Jupyter notebooks, attendees will clone a ready-to-use GitHub repository, explore the MNIST dataset, and walk through the complete model training pipeline—from data preprocessing to model evaluation. The session uses CPU-optimized configurations, making it accessible without requiring specialized GPU resources.Whether you're new to AI/ML or curious about how the models you use actually function, this workshop offers practical, immediately applicable experience.Takeaways: Participants will leave with a working neural network, a complete training notebook they can reference, and foundational knowledge of deploying and utilizing ML workloads on OpenShift AI.

Modern AI coding agents don’t just autocomplete. They execute, connect, and automate. With the wrong settings, they can access more of your system than you intended. In this session, I’ll demonstrate how agent autonomy, MCP integrations, and Skills can lead to unexpected security risks. Through examples using Cursor.ai, we’ll see how seemingly harmless configuration choices stack into real exposure and how to set secure defaults for safe, high-velocity “Vibe Coding.” 

Ready to bring conversational AI to life? In this hands-on workshop, we'll walk through deploying a real-time voice agent using Render's cloud platform. You'll work directly with LiveKit's voice agent template to create an interactive AI assistant that can listen, think, and respond naturally through voice.You'll discover:How to set up and configure a LiveKit voice agent using Render's deployment templateThe architecture behind real-time voice AI systems and how different components work togetherBest practices for managing environment variables, API keys, and cloud service integrationsTechniques for testing and debugging your deployed voice agent in productionStrategies for monitoring performance and scaling your AI application as usage growsBy the end of this workshop, you'll have a fully functional voice agent running in the cloud, ready to handle real conversations. You'll gain practical experience with modern AI deployment tools and understand the complete pipeline from template to production.This workshop is ideal for developers interested in conversational AI, engineers looking to add voice capabilities to their applications, and anyone curious about deploying real-time AI systems without getting lost in infrastructure complexity.

Join this interactive 2-hour workshop to learn how to create your own AI co-worker using the Codex SDK, inspired by Rudrank’s work on a GitHub/Slack bot he created to automate code reviews, bug fixes, and feature additions to overcome the opposite timezone differences at work.

We will explore how to shift from manual "vibe coding" to take a managerial role, where AI handles the heavy lifting while you focus on high-level planning and validation. We will cover iterative prompting, and integration with GitHub and Slack for automation with the rest of the team.By the end, you will deploy a functional bot to your repository, ready to assist in your projects and even free up time for personal goals like finishing that games backlog!This session is ideal for developers who are curious and looking to build an "army" of AI helpers.Table of Contents1. Introduction & Why AI Co-Workers?: - Discuss the motivation behind AI-driven development, going from just AI-assisted a year ago. How to take advantage of the ChatGPT plan and use the Codex SDK to program codex directly to create structured agents.- Overview of Codex SDK's strengths in code generation, audits, and multi-step reasoning, with real examples from building my AI coworker.
2. Architecture:- Explore components like command parsing, session persistence (24-hour TTL), and GitHub integration via Octokit. - Cover agentic patterns: planning with high-precision models (e.g., Codex xHigh), implementation with efficient ones Codex Medium, and error handling for long-running tasks.
3. Building The Bot: - Set up the environment (clone example repo, configure .env with API keys), create a GitHub App, implement core features (e.g., @bot to fix the bugs)- Test with sample commands. Include live demos of code audits, branch/PR creation, and polling for stop commands. Participants will fork and customize their own bot. 
4. Future Directions: - Parallel sub-tasks, MCPs, skills- Q&A

Cole will walk through his agentic coding workflow that allows him to delegate all coding to the agent while still keeping him in the driver's seat (no vibe coding!). The key is to create a structured approach for both the up front planning and the validation - and he'll demonstrate what that looks like. Plus, he'll show the true power of creating a system for AI coding - with a proper system, every coding mistake the LLM makes is an opportunity to not just address the bug manually, but fix the system so the bug doesn't happen again. That's what makes your coding agent more and more reliable over time!

In this interactive workshop, you’ll build a working internal browser extension you and your team can use to share context across apps you use daily. We’ll start with a practical, real-world example: a web clipper that you’ll customize to send content from GitHub to your team’s communication tool (Slack, Discord, or Teams). You’ll learn how to generate extensions with natural language, modify forms and logic, connect to apps like Slack and GitHub, and deploy what you build to your team. By the end, you’ll have a functioning automation running in your browser and the skills to create more.
This workshop is ideal for developers and tech leads who want to quickly build and deploy secure, internal extensions without writing full browser extensions and handling infrastructure.

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, using MCP's latest 2026 features like semantic routing and federated context.Agenda:- Introduction & Why MCP? Key challenges MCP solves and core benefits, including 20x throughput from federated layers.- Architecture Deep Dive: Components, interactions, scalability principles, plus quantum-resilient encryption in MCP 2.1.- Building Your Own MCP Server: Guided walkthrough with code snippets and best practices; live demo of multimodal data fusion.- Future of MCP Developments: Potential enhancements like agentic workflows, emerging trends, and 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.

In this workshop, you’ll learn a repeatable process for building full stack apps in Cursor. We’ll start with an idea and use an agent to shape clear requirements. Next, we’ll generate a database schema and set up the build tools. Then we’ll create the backend and frontend, and wire the layers together. Along the way, you’ll learn how to utilize context loops, catch hallucinations, fix errors, and prompt for modern UI. By the end, you’ll be able to build a working AI generated full stack application on your own.

This workshop introduces Sandboxes as a general computing primitive and uses Cloudflare Sandboxes as the concrete implementation. Participants explore common, real-world use cases for sandboxed execution and learn how to reason about when and why sandboxes are the right tool.

The workshop is intentionally product-adjacent rather than product-specific. Cloudflare Sandboxes are used throughout, but the concepts apply broadly to modern secure execution environments.


Workshop Goals

By the end of this workshop, participants will be able to:

- Explain what a sandbox is and why it exists as a compute primitive
- Identify common problems that sandboxes are well suited to solve
- Safely execute untrusted or dynamic code
- Use sandboxes for development, testing, and automation workflows
- Reason about security, performance, and tradeoffs when choosing sandboxed execution

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

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

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.

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!

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.

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.

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!

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.

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 

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.

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

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.

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.

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

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.

This workshop explores how to leverage Sentry’s AI-driven tools (Seer, MCP and Agent Monitoring) to streamline debugging, error monitoring, and observability in full-stack applications. It guides participants through Setting up Sentry from scratchInstrumenting errors, logs, and tracingUsing Sentry AI features to detect and remediate issues more efficientlyThis workshop is beneficial for software engineers, SREs, DevOps practitioners, and engineering leads who want to level up observability, reduce time to resolution, and explore using AI to assist debugging in production systems.

 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.

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

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  

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

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.

Coding assistants are already changing the way we develop code, and in several years they are expected to completely change how developers interact with code and write it. In this workshop, I'll share tips and best practices on using such tools as we develop the production-ready app with Zencoder.

Unlock the Power of Modern Full-Stack Development in Half a Day!Ready to build lightning-fast, scalable web applications? Join our immersive 4-hour interactive workshop and dive headfirst into the world of Full-Stack Next.js 15!This isn't just another theory session. You'll roll up your sleeves and build a real-world movie comparison application from scratch, guided step-by-step by our expert instructor Maurice. We'll start by setting up your local development environment with a robust PostgreSQL database running in a Docker container. Then, you'll experience the magic of rapid UI generation using v0.dev, allowing you to create stunning interfaces with ease.But we won't stop at the front-end. You'll learn how to seamlessly integrate your UI with a powerful backend using Next.js 15's latest features and the elegant Prisma ORM to interact with your PostgreSQL database. Plus, you'll discover the best practices for handling client-side behavior with a fun, interactive movie comparison feature.Finally, we'll take your application live with continuous deployment to Vercel, showcasing how to effortlessly share your creations with the world. By the end of this workshop, you'll have a fully functional movie comparison app and the confidence to tackle your own full-stack projects using the cutting-edge Next.js 15 ecosystem.

In this workshop, you'll learn how to create a GitHub Copilot Extension. We'll explore GitHub's new AI-powered tool ecosystem and guide you through building your own extension from scratch. By the end of this session, you'll understand how to leverage Copilot Extensions to enhance your development workflow and integrate with third-party services.In This Workshop, You'll Discover:What GitHub Copilot is and its capabilitiesWhat GitHub Copilot Extensions areThe anatomy of a Copilot ExtensionHow to build your own Copilot ExtensionHands-on Development:Clone the template repository: nickytonline/copilot-extension-templateInstall dependenciesExpose your local development serverCreate and configure your GitHub ApplicationUse the Copilot Extensions Preview SDKDebug and test your extensionBy the end of this workshop, you'll have created a working GitHub Copilot Extension that you can use immediately in your development environment. You'll be able to extend this foundation to build more complex integrations and custom AI-powered tools tailored to your specific needs.This workshop is ideal for:Developers looking to enhance their productivity with AI toolsTeams wanting to build custom integrations with GitHub CopilotAnyone interested in creating AI-powered developer tools

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.

The way we write code is fundamentally changing. Instead of getting stuck in nested loops and implementation details, imagine focusing purely on architecture and creative problem-solving while your AI pair programmer handles the execution. In this hands-on workshop, I'll show you how to leverage Cline (an autonomous coding agent that recently hit 1M VS Code downloads) to dramatically accelerate your development workflow through a practice we call "vibe coding" - where humans focus on high-level thinking and AI handles the implementation.You'll discover:The fundamental principles of "vibe coding" and how it differs from traditional developmentHow to architect solutions at a high level and have AI implement them accuratelyLive demo: Building a production-grade caching system in Go that saved us $500/weekTechniques for using AI to understand complex codebases in minutes instead of hoursBest practices for prompting AI agents to get exactly the code you wantCommon pitfalls to avoid when working with AI coding assistantsStrategies for using AI to accelerate learning and reduce dependency on senior engineersHow to effectively combine human creativity with AI implementation capabilitiesWhether you're a junior developer looking to accelerate your learning or a senior engineer wanting to optimize your workflow, you'll leave this workshop with practical experience in AI-assisted development that you can immediately apply to your projects. Through live coding demos and hands-on exercises, you'll learn how to leverage Cline to write better code faster while focusing on what matters - solving real problems.

Node-based user interfaces offer an intuitive and powerful way to represent complex data flows and processes. In this interactive 3-hour workshop, you’ll learn how to create engaging diagram UIs using React and the popular React Flow library. We’ll start by exploring key libraries for creating custom diagram UIs, comparing their strengths, differences, and most effective use cases. Focusing on React Flow, we’ll then build a workflow application together, introducing features such as custom nodes and edges, drag-and-drop functionality, state management, minimap and zoom controls, auto- layout, and property-editing sidebar. You’ll discover how to leverage open-source UI components designed for diagramming to enhance visual appeal and learn how to extend diagrams with custom functionality. We’ll also look at existing tools and products that can streamline your development process – so you can concentrate on implementing your business logic efficiently. By the end of this workshop, you’ll know how to unlock the potential of node-based UIs in React, enabling you to create rich, interactive applications tailored precisely to your project’s needs.Workshop Agenda:Introduction to Diagram LibrariesBuilding a Workflow Application with React FlowImplementing Advanced Interaction and Usability FeaturesEnhancing the User ExperienceExtending and Scaling Your Node-based UIPlease note that this workshop assumes a comfortable working knowledge of React, so we can focus on building advanced features right from the start.

In this workshop I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own AI generated full stack app on your machine!
Please, find the FAQ here

Test and trust your React app by combining Playwright’s powerful browser automation with modern synthetic monitoring. In this hands-on workshop, you’ll learn how to write real user flow tests with Playwright, run them locally, and then scale them into production-ready monitoring with Checkly.We’ll start with a quick tour of synthetic vs. real user monitoring, then dive into testing key interactions in your app, from page loads to forms and navigation. You’ll learn how to use Playwright’s core features to create reliable end-to-end tests.Next, we’ll show you how to turn those local tests into live monitors. You’ll deploy your tests as synthetic monitors, view test runs, and debug failures with rich observability data, like screenshots and traces.Table of contents:Intro: Synthetic vs RUM, Testing vs MonitoringSetup to run app locallyWrite Playwright tests on the appPlaywright core features Run testsConvert Playwright tests into synthetic monitorsConcepts of Monitoring as CodeObservability: debug with Traces, Logs & ScreenshotsClosing the loop with alerts and notification channels considerationsWorkshop level: developers comfortable with React and CLI tools.

AG Grid and AG Charts are enterprise grid and chart libraries that are built for performance. In this workshop, you'll learn the basics of getting started with building feature-rich grids and charts in your React applications.
You'll discover:How quick you can build powerful grid and charting solutions in React:Rendering and editing cells in AG GridBuilding line, bar, and pie charts.In this 3 hours hands-on workshop you'll learn the powerful simplicity of using AG Grid and AG Charts in your apps. Let's be honest, grids and charts can be tough. Thankfully, AG Grid and AG Charts makes it easy. This workshop is helpful for those considering a grid to chart library, for developers, and for team leads.

Tests first, code last!How to develop your frontend that the code isn't falling apart? How to make it scary free to deliver your work results? How to battle bugs that are chasing you at every step you make?I am going to answer these questions during the workshop and show how to follow TDD at React applications.To showcase the approach I am going to use Cypress, React, MobX, and even Dev Containers. These tools can be replaced by others that are in use in your projects today. Here and now tooling is not so important.In spite of the title the workshop is going to be useful not only for frontend developers. You can benefit from it even working in a different area of development because the key here is a mindset of how to make reliable applications through testing.

You just shipped a new feature. Tests passed. CI’s green. Everything’s deployed. Life’s good… until the alerts start rolling in. Users reporting “weird stuff happening”, UI glitches, vague “it seems slow” reports, and that dreaded “can’t login” message. Well, this is shaping up to be a bad day. But… maybe not.Watch this hands-on session to learn how to build it, break it, debug it, and go from “no idea what’s wrong” to fixing issues—all in one go. Since we’re serious developers (obviously), we’ll use Next.js and:Setup Sentry from the ground up - including Errors, Session Replay, and TracingLearn ways to use Replays to understand the real user experience, and how to use Tracing to debug application issuesLeverage Sentry AI and the context of your application to understand what’s actually broken, and use Autofix to generate a fix - from root cause all the way to PR.Use this workshop guide to follow along: Quickstart Guide.

In this workshop, we’ll explore how to manage application configurations directly in your Git repository and integrate them into the TypeScript type system. The goal is to make your code aware of the actual configuration at compile-time, reducing the need for runtime validation and unit tests.You'll discover:How to create lossless types for static dataTechniques to eliminate unnecessary code paths and reduce runtime validationHow to leverage utility types to extract specific information from configurationsKey TypeScript operators and how to handle common pitfalls when working with generic typesBest practices for improving type safety and developer experienceBy the end of this workshop, you'll have a solid understanding of how to implement Config as Code in your TypeScript projects, enhancing maintainability, type safety, and autocomplete support. This workshop is ideal for TypeScript developers looking to optimize their code and streamline configuration management.

Large Language Models (LLMs) are powerful, but they often lack real-time knowledge. Retrieval-Augmented Generation (RAG) bridges this gap by fetching relevant information from external sources before generating responses. In this workshop, we’ll explore how to build an efficient RAG pipeline in Node.js using RSS feeds as a data source. We’ll compare different vector databases (FAISS, pgvector, Elasticsearch), embedding methods, and testing strategies. We’ll also cover the crucial role of chunking—splitting and structuring data effectively for better retrieval performance.Prerequisites- Good understanding of JavaScript or TypeScript- Experience with Node.js and API development- Basic knowledge of databases and LLMs is helpful but not required
Agenda📢 Introduction to RAG💻 Demo - Example Application (RAG with RSS Feeds)📕 Vector Databases (FAISS, pgvector, Elasticsearch) & Embeddings🛠️ Chunking Strategies for Better Retrieval🔬 Testing & Evaluating RAG Pipelines (Precision, Recall, Performance)🏊‍♀️ Performance & Optimization Considerations🥟 Summary & Q&A

SQLite is having its Renaissance. It's being used in many projects and companies. Bun runtime has its implementation of sqlite, Turso is a product on top of SQLite, and the Ruby on Rails framework dropped all its dependency on Redis in favor o SQLite for things like Caching and Queues.Node.js version 22.5.0 introduced the `node:sqlite` module. It's an experimental module that allows you to use SQLite in a very Node.js way, without any external dependency.In this workshop, you will learn how to use SQLite in Node.js. We will explore the current `node:sqlite` features and how to use them. We will also explore the future of SQLite in Node.js.

In this workshop we'll dive deep into integrating vector search into your applications. Over the course of this workshop, you'll not only grasp the core principles behind vector search but also cut through the buzzwords to understand its practical applications. We'll explore when vector search is the right tool for the job—and when it's not—so you can make informed decisions in your projects.By the end of the workshop, you'll have hands-on experience as we build a fully functioning application together, leveraging vector search to elevate the user experience. We'll also cover how to effectively test and optimize your implementation to ensure it meets real-world demands. Whether you're new to the concept or looking to refine your skills, this workshop will equip you with the knowledge and tools to integrate vector search confidently into your development workflow.Key takeaways:- Cut through the buzz and understand vector search's real-world applications to make informed choices in your projects.- Gain hands-on experience building an application with vector search to enhance user experience practically.- Learn best practices for testing and optimizing vector search implementations for robust, real-world performance.

"Test, Code, Repeat: Master AI-Assisted Development" introduces developers to a transformative way of coding with AI as a collaborative partner. This workshop focuses on how iterative workflows, such as the ping pong pairing technique, enable an enhanced interaction between human creativity and AI efficiency. 

In today's fast-paced development environment, a developer's attention is constantly in high demand. To achieve peak productivity, developers need to maintain a state of flow, seamlessly accessing the knowledge and tools required to solve complex problems. However, the reality often involves juggling multiple tools, leading to frequent context switching and reduced efficiency.This session will explore how AI-enabled tools can revolutionize your development workflow, helping you become a 10x developer. We will look into the three primary pillars of development: coding in your IDE, using collaboration tools, and researching in your browser. By integrating AI tools, you can streamline these activities, minimizing context switching and maximizing focus.Through practical demos and real-world examples, this session will show you how to harness the power of AI to handle the range of context you encounter daily, ultimately boosting your productivity and allowing you to focus on what you do best—coding. Moreover if your company has concerns regarding data security while using the typical AI tools, you don't need to worry. This workshop will specifically focus on using AI tools that run on the user's device and all of the processing happens locally, thus for large enterprises, this solves the biggest information/security challenge. Date and time: TBD. Remote via Zoom.

Imagine replacing yourself with a multi-agent AI programmer to develop your production web application. That's exactly what we did at my startup takzyli.pl. To achieve this, we designed and used the Clean Coder - AI agent framework for autonomous code writing (https://github.com/GregorD1A1/Clean-Coder-AI), which is hopefully open-source project. If it worked for us, why shouldn't it work for you?In this workshop, I'll show you how to create an entire web application in an (almost) autonomous way and drastically reduce the time you or your employees spend on writing code.

In this webinar I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own ai generated full stack app on your machine!

How to supercharge your no-code automation building and reduce build time with Zapier's latest AI features and functionality. I'll also cover AI tools that natively integrate with Zapier to bring a whole new level to productivity.

In Soft Skills Lab we're using prompts in our consulting cases a lot. This might be an interesting experience for the users since we'll share our proprietary framework for negotiation preparation as well as some hacks on how to use ChatGPT in this scenario. Negotiations they can prepare for can be a case very familiar to them, like negotiating their salary/bonus or making changes in their department and asking funding for that; negotiating with a client on a scope of a project (not necessarily the price) or persuading a team member to take on some new responsibilities.
At the workshop, you will: 
- learn a systematic approach on how to use ChatGPT with different kinds of frameworks- try out a new way to prepare for negotiation preparation with our proprietary framework

We’re all here because we love React, and we love it because it’s a simple and intuitive system for creating beautiful, interactive websites. What if building full-stack apps could be just as simple and intuitive? Managing data and resources in your web applications doesn't have to be complex and time-consuming! Learn how to connect databases, APIs, and other services to your apps in minutes to make real-time interactive experiences for your users. In this session, you'll start with a blank page and end with a portfolio-worthy app and the skills you need to build your next app.

Learn widely used React patterns, including HOCs, Compound Components, Provider Patterns, Functions as Child, and Portals, to write cleaner, more efficient code and create scalable, maintainable applications.Overview In this workshop, viewers will learn about key React patterns that can make their code more efficient, readable, and maintainable. We'll introduce each pattern, explain how it works, and demonstrate practical examples. By the end of the session, participants will have a solid understanding of how to use these patterns in their projects.Learning GoalsHOCs Compound Components Provider Patterns Functions as Child Portals Modularity Maintainability Real-world Application.

The web is capable of way more than we might think. During this workshop, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

Code Less, Create More: AI-Driven App Development for React Devs.Join us for a workshop designed for React developers eager to harness the power of AI to streamline their app development process. In "Code Less, Create More," you'll learn how to build applications using the Cursor IDE with the power of AI and minimal manual coding.Explore how Cursor, an AI-enhanced code editor, revolutionizes your coding experience by seamlessly integrating with your existing workflow. Uncover its advanced capabilities: predicting your next edits, offering real-time code suggestions, and comprehending your project's architecture. This allows you to channel your energy into creativity and innovation rather than grappling with syntax and repetitive tasks.We'll guide you through initializing a Next.js project, demonstrating how to utilize AI tools to efficiently craft dynamic, responsive applications. By the workshop's conclusion, you'll possess the skills to construct sophisticated software with reduced coding effort, empowering you to become a more productive and innovative developer.Whether you're a seasoned React developer or new to AI-assisted coding, this workshop will equip you with the knowledge and tools to elevate your development projects to the next level.

Learn how to handle forms in React using the latest features, such as startTransition, useTransition, useOptimistic, and useActionState, with and without React 19 server actions, alongside proper validation, error handling, and best practices.The workshop will begin by demonstrating traditional form handling using useState and useEffect for client-side rendering. Gradually, we'll transition to using the latest React 19 features, including server-side forms and the newest hooks for managing form states and errors. By the end of the workshop, participants will understand how to create robust forms with proper validation and error handling.Learning GoalsLatest React 19 Hooks — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValueServer ActionsRevalidationsServer-side ValidationError handlingSecurity practices

Today, most of the AI applications send data to LLM cloud providers like OpenAI, raising privacy concerns. This workshop an alternative and privacy focused way to build AI applications by running LLMs locally with Ollama that keep everything local on your computer. This approach allows to avoid sending sensitive information to external servers. The workshop also highlights LangChain's ability to create versatile AI agents capable of handling tasks autonomously by creating embeddings for the data. So come learn how can you build the next gen, privacy focused React application powered by Local LLMs.

The workshop covers the following topics:

1.Overview of cloud-based LLMs privacy issues and the importance of running Local LLM inferencing.

2.Detailed insights into generating embeddings with tools like Ollama and demonstrating how LangChain agents can perform tasks such as document summarisation and API interactions, all while maintaining data privacy in a NextJS / React application.

3.Discovering practical use-cases for this approach.

Join Nathan and Alexa in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a feel for key skills for working with LLMs in your own applications such as prompt engineering and exposure to OpenAI's API.

After this session you will have insights around what LLMs are and how they can practically be used to improve your own applications.

Get ready to take your front-end development skills to the next level with our hands-on workshop. In this four-hour session, you will learn the ins and outs of test-driven development using Playwright, a powerful tool that will revolutionize your web development workflow.Are you tired of spending endless hours debugging issues in your web applications? Dive deep into writing tests before writing code, ensuring top-notch quality and functionality in your web applications. Say goodbye to manual testing and hello to automated tests that catch bugs early in the development process.Join us for an interactive and fun workshop where you'll gain the confidence to elevate your front-end development game and build web applications like a pro. Don't let common pain points like inconsistent UI behavior or regression issues slow you down - learn how to effectively use Playwright to avoid these pitfalls and streamline your development process.Don't miss this opportunity to unlock the full potential of test-driven development with Playwright – sign up now and get ready to uplevel your skills!

Learn the full potential of TypeScript by using advanced features like Type Inference, Type Guards, Generics, Transformers, and Utility Types with asynchronous programming in both Node.js (using Express.js) and Bun.js (using Hono.js), all while understanding best practices for building strongly typed APIs with different databases.OverviewIn this workshop, we’ll kick off with a discussion on the recent updates in Node.js and Bun.js, focusing on their built-in TypeScript support. You'll learn how to set up TypeScript in both runtimes and create strictly typed APIs using Express.js and Hono.js. Through hands-on demos, we'll explore integration with various databases like MongoDB and Postgres, leveraging advanced TypeScript features to build robust applications. By the end of the workshop, you'll be equipped with the knowledge to optimize TypeScript code for performance and design patterns, ensuring your APIs are both efficient and maintainable.Learning Goals- Introduction to Node.js’s and Bun.js’s TypeScript support- Advanced TypeScript Features: Generics, Type Guards, Mapped Types, etc.- Middleware and Dependency Injection with Express.js and Hono.js- Design Pattern and Performance Enhancements in TypeScript- Unit and Integration Testing with TypeScript- Database Integration: MongoDB, Postgres, Prisma, and others- Best Practices for Robust API Development in both Node.js and Bun.js

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

Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications.

Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints.

Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic.

Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!

In this hands-on workshop, you will be equipped with the tools to effectively test the security of web applications. This course is designed for beginners as well as those already familiar with web application security testing who wish to expand their knowledge. In a world where websites play an increasingly central role, ensuring the security of these technologies is crucial. Understanding the attacker's perspective and knowing the appropriate defense mechanisms have become essential skills for IT professionals.This workshop, led by the renowned trainer Gregor Biswanger, will guide you through the use of industry-standard pentesting tools such as Burp Suite, OWASP ZAP, and the professional pentesting framework Metasploit. You will learn how to identify and exploit common vulnerabilities in web applications. Through practical exercises and challenges, you will be able to put your theoretical knowledge into practice and expand it. In this course, you will acquire the fundamental skills necessary to protect your websites from attacks and enhance the security of your systems.

Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session.
You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing
This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.

This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Developer Platform.The workshop assumes basic knowledge of TypeScript and React — not much beyond what’s needed to build a hello world app in React using TypeScript! Knowledge of the Developer Platform is also not required as everything Cloudflare related will be introduced as part of the workshop.So if you’re interested in application development on the (fast and inexpensive!) Cloudflare platform then this workshop is for you. By the end of it you will know how to build a fully-fledged, fully-tested, full-stack web application (using React or any framework of your choice) with a comprehensive testing structure that gives you full confidence and peace of mind.
AgendaThe workshop will include live coding, Q&A, and interactive coding sections. The starting code, alongside instructions will be also made available for participants to revisit and dig deeper afterthe workshop.As part of the initial setup we’ll see how to use the C3 tool to easily deploy applications to Cloudflare in a matter of minutes.Afterwards, we will see how to write code that interacts with the Developer Platform specific resources and APIs, specifically, we’ll use KVs, R2 buckets and Workers AI. We’ll also make sure to test all the code to make sure that it correctly interacts with the aforementioned APIs via the official Workers Vitest integration.We will then integrate the Workers code with our React app to build a complete full-stack application ready to be deployed to the Cloudflare edge network. We will use playwright to implement an end-to-end (e2e) suite of tests to make sure that the application integrates perfectly with the Cloudflare platform.
Takeaways- How to develop on the Cloudflare Workers runtime and interact with various Cloudflare resources- How to develop, comprehensively test and deploy a full-stack application on the Cloudflare Platform

Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid & Charts libraries that are packed with features and provide unbeatable performance whilst being fully customisable. In this workshop, you'll learn how to get started with both AG Grid and AG Charts, learn how to use their key features. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid & AG Charts into your React application.

GenAI agents are one of the most promising directions for complex GenAI based applications. These agents can search the web, code, and carry complex tasks completely autonomously for the user. In this workshop we will learn the basics of GenAI agents. Define the basic terms and frameworks and understand how they differ from traditional use of LLMs.We will understand prompting techniques for LLM agents and specifically the React prompting technique for AI agents (not to be confused with React the programming language). We will build, from scratch, our own GenAI agent that can interact with the user, perform web searches and code and execute in Javascript.Table of contents:- Introduction to GenAI agents- Understanding the React framework- Hands-on Building of simple GenAI agent- Deployment of the Agent with streamlit- Tips, and frameworks for developing GenAI agents

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
- Introduction: discovering Next.js and its server-centric philosophy- Crafting a perfectly optimized multi-page website- Making sense of Next.js server-side rendering capabilities- Conclusion: how Next.js empowers you as a React developer

Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)

Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a feel for key skills for working with LLMs in your own applications such as prompt engineering and exposure to OpenAI's API.
After this session you will have insights around what LLMs are and how they can practically be used to improve your own applications.
Table of contents: - Interactive demo implementing basic LLM powered features in a demo app- Discuss how to decide where to leverage LLMs in a product- Lessons learned around integrating with OpenAI / overview of OpenAI API- Best practices for prompt engineering- Common challenges specific to React (state management :D / good UX practices)

Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs

Onboarding to a new project can be difficult, no matter your background and experience. But it can be especially challenging for new developers straight out of school or a coding bootcamp. Drawing on personal experience as a bootcamp grad and JavaScript consultant, this talk will discuss tips and strategies for managers to help the new developers on their teams get their bearings in an unfamiliar codebase, so they can make more of an impact, faster!

Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.

Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana!
Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into:
- Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.

A Developer’s Guide to Communicating, Convincing, and Collaborating Effectively With Stakeholders
It’s a tale as old as time - collaboration between developers and business stakeholders has long been a challenge, with a lack of clear communication often leaving both sides frustrated. The best developers can deeply understand their business counterparts’ needs, effectively communicate technical strategy without losing the non-technical crowd, and convince the business to make the right decisions. Working at a consultancy, I’ve both failed and succeeded in architecting and “selling” technical visions, learning many lessons along the way.Whether you work at a product company, are a consultant/freelancer, or want to venture beyond just being a developer, the ability to convince and clearly communicate with stakeholders can set you apart in the tech industry. This becomes even more important with the rise of GenAI and the increasingly competitive developer market, as problem-solving and effective communication are key to positioning yourself.In this workshop, I’ll share real-world examples, both good and bad, and guide you through putting the theory into practice through dojos.