React example — AI recipe assistant with useChat, streamText, tool(), and Generative UI

AI SDK
, ,
1

Hi Vercel!

Summary

I built a recipe search platform where users can find recipes based on ingredients they have.
This also includes an AI-powered recipe assistant where users can ask in chat and get recipe suggestions.
I’d love to contribute this as an example.

What the Example Would Cover

  • useChat: Chat UI for ingredient-based queries
  • streamText: Real-time streaming responses
  • tool(): Searches a local recipe database and returns structured results
  • Generative UI: Dynamically renders recipe cards, ingredient checklists, and step-by-step guides based on tool call results

Workflow

  1. User asks a question in the chat.
  2. LLM calls the searchRecipes tool.
  3. Results stream back to the users.
  4. UI components render inline in the chat interface.

Why

Under the examples folder, there’s great coverage across frameworks, but I didn’t see a standalone React example.
Since many developers use React and I saw some people who wanted Vercel AI in React (Link), I thought this could be a useful addition.

Would this be a good fit for the examples directory?
Happy to adjust scope or structure based on your feedback.