← Back to Workshops

AI-Powered Web Applications

This workshop teaches you how to build web applications powered by AI. You'll learn to create a chat application using Next.js and the Vercel AI SDK. By the end, you'll understand how to integrate AI models into your web projects and create engaging user experiences.

15 lessons
AI-Powered Web Applications

Workshop Highlights

Integrate AI language models into React applications
Develop interactive chat interfaces using AI SDK
Construct accessible UIs with Tailwind and shadcn
Deploy AI-powered applications with user interactions
Private Discord community

#What You'll Learn

You'll discover how to connect AI language models to React applications and build interactive chat interfaces. We'll cover creating good-looking interfaces with Tailwind CSS, handling real-time AI responses, and preparing your application for real users. The skills you gain will help you create modern applications that use AI in practical, useful ways.

#Workshop Format

The workshop runs for about 4 hours, divided into four main parts. We follow a simple pattern: first we show you how something works, then we code it together, and finally we review what we learned. You'll build a complete chat application step by step, adding new features as we go. You'll also get access to our Discord community where you can ask questions and share your work.

#Prerequisites

To join this workshop, you should know some React basics and be familiar with JavaScript. You don't need to be an expert, but understanding how components work will help. You'll need Node.js installed on your computer. No AI or machine learning knowledge is required – we'll explain everything you need to know.

#Tech Stack

We'll use Next.js 14 as our React framework, along with the Vercel AI SDK to work with language models. TypeScript will help us avoid errors, and Tailwind CSS with shadcn components will make our application look professional. We'll use modern React features to build a clean, efficient application.

Introduction3
  • 1
  • 2
  • 3
UI Scaffolding4
  • 5
  • 6
  • 7
  • 8
AI SDK Integration2
  • 5
  • 6
Dynamic Chat3
  • 10
  • 11
  • 12
Advanced & Deploy3
  • 13
  • 14
  • 15