AI for React Developers

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.

Workshop Installation Instructions

Before you attend, it would be good to make sure you have the following:

1. This repo cloned or downloaded.
2. A code editor of some sort.
3. Node.js version 20+
4. Optional: An OpenAI API Key. I'll share one that you can use during the workshop if you'd prefer.

Instructor Info

• Eve Porcello, eve@moonhighway.com, @eveporcello

Topics

• Understanding AI in Node Projects
• Choosing a LLM
• Creating a React Project with Next.js
• Customizing Streaming Interfaces
• Building Routes
• Creating and Generating Components
• Using Hooks (useChat, useCompletion, useActions, etc)

Slides

• Slide Deck

AI In Node Projects

• Generating an API Key
• Available Models
• Example Prompts

Assistants

• Assistants API Docs
• Assistants UI

Next + AI

• Vercel AI Core: Text generation, structured objects, tools with LLMs
• Vercel AI SDK UI: Hooks for building chat interfaces
• Vercel AI RSC: Specific tools for React Server Component Architecture
• AI SDK Providers

Copilot Kit

• Copilot Kit Docs