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.jsMetaArtificial Intelligence FoundationsFront-End Web DevelopmentArtificial Intelligence (AI)Web DevelopmentOne-Off
Concepts
Introduction
- Creating AI-powered streaming UIs with React
- What you should know
- Setting up your environment
AI and Next.js
- Generating a Next.js project
- Working with the AI SDK
- Configuring an Open AI API key
- Creating an API route
- Using the useCompletion hook
Creating a UI
- Working with the useChat hook
- Handling loading states
- Creating a UI with React state
- Building a server action
- Streaming data with React
Generating Structured Data
- Generating static objects
- Returning objects on the client
- Streaming generated objects
- Handling object streams
- Streaming components with server actions
- Rendering streamed components
Other Vercel Tools
- Introducing v0
- Generating a UI component with v0
- Creating a full UI with v0
- Challenge - Generating a new UI
- Solution - Generating a new UI
Conclusion
- Exploring Vercel's AI documentation and next steps