[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[AI SDK](/c/ai-sdk/62)

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

25 views · 0 likes · 1 post


Ndk6879 (@ndk6879) · 2026-03-13

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](https://github.com/vercel/ai/issues/1650)), 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.