feat(examples): add AI-powered search example

[denis-shvets]

🎯 Changes

Quote from my article

Let your users speak: Seamless app interaction through Natural Language

Crafting effective search interfaces often presents a significant challenge. You rely on obligatory calendars for date selection and an abundance of dropdowns to manage parameters like status or region. Despite these efforts, users frequently encounter difficulties in efficiently locating information or navigating to the desired section.

What if we could offer a mechanism to bypass the friction and allow users to communicate their needs directly?

🔹 SV: "Visa mig alla utgångna ordrar från förra sommaren" (Show me all expired orders from last summer.)
🔹 EN: "Delayed air shipments to BR over 5kg this week"
🔹 EN: "I'm looking for red waterproof Nike shoes, size 44, under 100"

Introducing Natural Language Search as a solution to this challenge.

Commit message

• Introduces a comprehensive React example demonstrating natural language search capabilities
• Users can query merchant data (orders, disputes, settlements) using conversational language like "show me orders from last week"
• AI converts natural language prompts into structured search parameters with proper filtering and date ranges
• Includes full UI with data tables, filters, and responsive design using Tailwind CSS
• Leverages TanStack Start, TanStack Router, TanStack AI

Preview

Next steps

• At the moment, the filters and tables rely on the original implementation. The next phase will be migrating them to TanStack Form, TanStack Table, and TanStack Virtual(maybe?).
• The data is also hardcoded for now. The plan is to transition to TanStack Query or TanStack DB.
• Clean up the leftover TanStack Start artifacts.

✅ Checklist

• 🤷 I have followed the steps in the Contributing guide. - The file does not exist. 🚨
• I have tested this code locally with pnpm run test:pr

🚀 Release Impact

This change introduces only the new example.

[denis-shvets]

Added navigation between pages:

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 54621f2

Command	Status	Duration	Result
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	35s	View ↗
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	2m 18s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-12-09 23:32:11 UTC

[pkg-pr-new]

Open in StackBlitz

@tanstack/ai

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai@114

@tanstack/ai-anthropic

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-anthropic@114

@tanstack/ai-client

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-client@114

@tanstack/ai-devtools-core

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-devtools-core@114

@tanstack/ai-gemini

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-gemini@114

@tanstack/ai-ollama

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-ollama@114

@tanstack/ai-openai

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-openai@114

@tanstack/ai-react

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-react@114

@tanstack/ai-react-ui

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-react-ui@114

@tanstack/ai-solid

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-solid@114

@tanstack/ai-solid-ui

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-solid-ui@114

@tanstack/ai-svelte

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-svelte@114

@tanstack/ai-vue

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-vue@114

@tanstack/ai-vue-ui

npm i https://pkg.pr.new/TanStack/ai/@tanstack/ai-vue-ui@114

@tanstack/react-ai-devtools

npm i https://pkg.pr.new/TanStack/ai/@tanstack/react-ai-devtools@114

@tanstack/solid-ai-devtools

npm i https://pkg.pr.new/TanStack/ai/@tanstack/solid-ai-devtools@114

commit: 54621f2

[jherr]

We should hold on this example until we have a structured output generation function.