JSNation 2026

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.

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 hands-on workshop, you’ll learn how to integrate AI directly into your application using TanStack AI. We’ll build a working AI chat feature end-to-end, starting from server setup and finishing with a streaming client, tool calling, human-in-the-loop workflows, and real debugging using TanStack DevTools.

Through guided exercises, you’ll learn how to set up TanStack AI on the server, connect a client application to a streaming AI backend, build a functional chat interface, create your first AI tools, and implement approval flows so humans can stay in control when tools are invoked.

By the end of the session, you’ll understand the core building blocks of AI-powered applications and walk away with a solid foundation for adding intelligent chat and tool capabilities to your own apps.

Workshop outcomesWhen you're finished with this workshop you will:Understand how to set up TanStack AI on the server and wire it to a provider (like OpenAI)Know how to connect a client app to a streaming AI endpoint and handle incremental updates cleanlyBuild a functional chat UI with a solid state model for messages, streaming tokens, and tool resultsCreate and use your first AI tools with clear inputs, outputs, and predictable behaviorBuild human-in-the-loop workflows with tool approvals so your app can ask for confirmation before executing sensitive actionsDebug and inspect your AI app using TanStack DevTools, including tool calls, responses, and streaming behaviorWhat you'll learn

TanStack AI gives you the primitives to build real AI features, not just a demo prompt box. This workshop focuses on wiring everything together properly, from server-side streaming to client UX, then layering in tools, approvals, and debugging so the final result is something you can confidently evolve into production features.

You’ll learn the following through these exercises:Server setup - Configure TanStack AI on the server, connect to your model provider, and expose endpoints that support streaming chatStreaming and SSE - Implement and consume streaming responses, understand the lifecycle of a stream, and build UI that stays responsive while tokens arriveChat UI and state - Build a chat interface that handles message history, partial responses, loading states, and tool outputs in a clean wayTools - Define tools, validate inputs, return structured outputs, and integrate tool results back into the conversation flowHuman in the loop - Add approval steps for tool execution, implement “approve/deny” flows, and keep users in control when actions matterDebugging with TanStack DevTools - Inspect requests, responses, tool calls, timing, and streaming behavior so you can troubleshoot fast and iterate safelyPrerequisites

This workshop assumes you can build and run a React + TypeScript app locally and you are comfortable working with a basic server setup.Basic understanding of SSE and streaming is required (we’ll use streaming heavily throughout the workshop)Experience with React is required (components, state, props, rendering lists)Basic TypeScript knowledge is required (we’ll rely on types for tools and structured outputs)You will need an OpenAI API key with available credits to use during the workshop exercises

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.

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.

Many front-end developers build modern applications with confidence, but struggle when it comes to shipping those applications to production. Docker, CI/CD, environment configuration, performance tuning, and deployment often remain “someone else’s job” — until something breaks and becomes your responsibility. This workshop closes that gap.
It’s a practical, production-focused workshop designed for front-end developers who want to take full ownership of their front-end applications — from local development to stable, production-ready deployments.

You’ll learn how to:
Dockerize front-end applications for both development and productionCreate optimized, production-ready Docker images for modern front-end frameworksOptimize front-end applications for performance, stability, and reliabilityAvoid common production mistakes seen in real-world front-end projectsDocker for Front-end Developers is a practical book designed specifically for front-end engineers who want to truly understand and confidently use Docker in real-world projects — written by Docker Captain and author of the official Docker React.js sample documentation Kristiyan Velkov — with 30% off using code DOCKER30.

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.

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.

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.

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.