React Summit US

React Summit US 2023

Jesse Hall

Let AI Be Your Docs

OpenAI in React: Integrating GPT-4 with Your React Application

React Day Berlin

React Day Berlin 2023

JS Nation

JSNation 2024

OpenAI in React: Integrating GPT with Your React Application

React Summit

React Summit 2024

React Advanced

React Advanced 2025

Traditional chat interfaces only return text, but what if your AI assistant could render custom React components directly in the conversation? In this lightning talk, we’ll explore generative UI - where chat applications stream contextually appropriate React components instead of plain text responses. When users ask about sales data, they get interactive charts. When they search for properties, they get rich product cards. Through code examples, you’ll see how to build chat interfaces where AI intelligently selects and renders React components populated with real-time data from semantic search and vector databases. You’ll walk away with practical patterns for implementing this technique and understanding how modern data platforms enable these dynamic, visual conversational experiences that go far beyond simple text responses.

Beyond Chat Bubbles: Building React Apps Where AI Generates Your UI

AI in Frontend

Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery. Key Takeaways: - Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources. Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs

Explore the integration of OpenAI's GPT into React applications to create dynamic, intelligent user interfaces. This session offers practical insights into leveraging GPT's powerful NLP capabilities for chatbots, content generation, and personalized user experiences. Dive into the technical setup with Next.js 14, LangChain, Vercel's AI SDK, and MongoDB's Vector Search to optimize and customize your applications. Join us to transform your React projects with AI.

Unleash the power of AI in your documentation with this hands-on workshop. In this interactive session, I'll guide you through the process of creating a dynamic documentation site, supercharged with the intelligence of AI (ChatGPT). Imagine a world where you don't have to sift through pages of documentation to find that elusive line of code. With this AI-powered solution, you'll get precise answers, succinct summaries, and relevant links for deeper exploration, all at your fingertips. This workshop isn't just about learning; it's about doing. You'll get your hands dirty with some of the most sought-after technologies in the market today: Next.js 13.4 (app router), Tailwind CSS, shadcn-ui (Radix-ui), OpenAI, LangChain, and MongoDB Vector Search.

In this talk, attendees will learn how to integrate OpenAI's GPT-4 language model into their React applications, exploring practical use cases and implementation strategies to enhance user experience and create intelligent, interactive applications.

Unleash the power of AI in your documentation with this hands-on workshop. In this interactive session, I'll guide you through the process of creating a dynamic documentation site, supercharged with the intelligence of AI (ChatGPT).Imagine a world where you don't have to sift through pages of documentation to find that elusive line of code. With this AI-powered solution, you'll get precise answers, succinct summaries, and relevant links for deeper exploration, all at your fingertips.This workshop isn't just about learning; it's about doing. You'll get your hands dirty with some of the most sought-after technologies in the market today: Next.js, shadcn-ui, OpenAI, LangChain, and MongoDB Vector Search.