AI for React Developers

1h 18mIntermediate2024-09-09

Authors

Eve Porcello

Software Developer and Instructor

Course details

Knowledge of AI tooling is critical for future-proofing the careers of React developers, and understanding the Vercel suite of AI tools is an approachable on-ramp for anyone comfortable with React. This stack makes it easier to incorporate the new paradigms of generative AI and streaming user interfaces in a React app. In this course, take a closer look at the Vercel AI SDK and see how this can help React developers build streaming interfaces with JavaScript and TypeScript. Join Instructor Eve Porcello to find out how to start adding AI-enhanced functionality to your apps as she guides you through creating a React App with Next.js. Learn about working with streams, using generative AI functions, working with components, generating structured data, and much more, and get the knowledge and skills you need to ride this new technological wave.

Skills covered

React.jsMetaFront-End Web DevelopmentArtificial Intelligence FoundationsArtificial Intelligence (AI)Web DevelopmentOne-Off

Concepts

0. Introduction

01 - Creating AI-powered streaming UIs with React
02 - What you should know
03 - Setting up your environment

1. AI and Next.js

04 - Generating a Next.js project
05 - Working with the AI SDK
06 - Configuring an Open AI API key
07 - Creating an API route
08 - Using the useCompletion hook

2. Creating a UI

09 - Working with the useChat hook
10 - Handling loading states
11 - Creating a UI with React state
12 - Building a server action
13 - Streaming data with React

3. Generating Structured Data

14 - Generating static objects
15 - Returning objects on the client
16 - Streaming generated objects
17 - Handling object streams
18 - Streaming components with server actions
19 - Rendering streamed components

4. Other Vercel Tools

20 - Introducing v0
21 - Generating a UI component with v0
22 - Creating a full UI with v0
23 - Challenge - Generating a new UI
24 - Solution - Generating a new UI

Conclusion

25 - Exploring Vercel's AI documentation and next steps