Skip to content

Commit dc71c72

Browse files
denis-shvetsautofix-ci[bot]
denis-shvets
and
autofix-ci[bot]
authored
feat(examples): add AI-powered search example (#114)
* feat(examples): add AI-powered search example - 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 * feat(examples/ts-react-search): add navigation component to hero section - Added a new Navigation component with links to Home, Orders, Disputes, and Settlements pages - Integrated navigation into the hero section for improved user experience * refactor(navigation): simplify route references in Navigation component - Replace imported route objects with hardcoded string paths - Remove unused route imports * refactor(routes): restructure API search route into directory - Moved api.search.ts to api/search.ts for better organization - Updated route tree imports to reflect new file structure - Maintains existing functionality while improving code organization * feat(examples): integrate TanStack DB for client-side data management - Replace server functions with TanStack DB collections and live queries - Add @tanstack/react-db, @tanstack/query-db-collection, and related packages - Implement disputes, orders, and settlements collections with Zod validation - Create useLiveQuery hooks for reactive data filtering and searching - Update components to use client-side collections instead of server functions * feat(examples): update search API to use server-sent events streaming - Migrated from `toStreamResponse` to `toServerSentEventsResponse` for improved streaming - Updated OpenAI adapter to use `openaiText` with model specification - Updated multiple dependencies including React, TanStack Router, and TailwindCSS * refactor(search): migrate search API from streaming to synchronous with structured validation - Replaced Server-Sent Events with React Query mutation for search requests - Added Zod schema validation for structured output in search API - Updated search component to handle JSON responses instead of streaming - Improved error handling and type safety for search parameters * refactor(search): extract search mutation logic into reusable hook - Moved search API mutation logic from Search component into dedicated useSearchMutation hook - Improves code reusability and separation of concerns - Enables search functionality to be used across multiple components - Reduces code duplication and improves maintainability * build(ts-react-search): bump TanStack Router stack and refresh lockfile - Align the ts-react-search example with newer @tanstack/react-router, react-start, router-plugin, and devtools packages so it stays compatible with current TanStack releases - Regenerated route tree types so the layout route reports fullPath as '/' instead of an empty string, matching the updated router codegen - Updated the workspace lockfile so installs resolve consistently with the new dependency graph * feat(ts-react-search): switch AI search adapter from OpenAI to Groq - Example depends on @tanstack/ai-groq and uses groqText with openai/gpt-oss-20b - Server checks GROQ_API_KEY instead of OPENAI_API_KEY - Output schema is wrapped with toGroqCompatibleSchema so Groq accepts JSON Schema unions (additionalProperties on anyOf) * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 54523f5 commit dc71c72

83 files changed

Lines changed: 6063 additions & 399 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/ts-react-search/.cta.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"projectName": "ts-react-search",
3+
"mode": "file-router",
4+
"typescript": true,
5+
"tailwind": true,
6+
"packageManager": "pnpm",
7+
"addOnOptions": {},
8+
"git": true,
9+
"version": 1,
10+
"framework": "react-cra",
11+
"chosenAddOns": ["nitro", "start"]
12+
}

‎examples/ts-react-search/.gitignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
count.txt
7+
.env
8+
.nitro
9+
.tanstack
10+
.wrangler
11+
.output
12+
.vinxi
13+
todos.json

‎examples/ts-react-search/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/ts-react-search/README.md‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
Welcome to your new TanStack app!
2+
3+
# Getting Started
4+
5+
To run this application:
6+
7+
```bash
8+
pnpm install
9+
pnpm start
10+
```
11+
12+
# Building For Production
13+
14+
To build this application for production:
15+
16+
```bash
17+
pnpm build
18+
```
19+
20+
## Testing
21+
22+
This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
23+
24+
```bash
25+
pnpm test
26+
```
27+
28+
## Styling
29+
30+
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
31+
32+
## Routing
33+
34+
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
35+
36+
### Adding A Route
37+
38+
To add a new route to your application just add another a new file in the `./src/routes` directory.
39+
40+
TanStack will automatically generate the content of the route file for you.
41+
42+
Now that you have two routes you can use a `Link` component to navigate between them.
43+
44+
### Adding Links
45+
46+
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
47+
48+
```tsx
49+
import { Link } from '@tanstack/react-router'
50+
```
51+
52+
Then anywhere in your JSX you can use it like so:
53+
54+
```tsx
55+
<Link to="/about">About</Link>
56+
```
57+
58+
This will create a link that will navigate to the `/about` route.
59+
60+
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
61+
62+
### Using A Layout
63+
64+
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
65+
66+
Here is an example layout that includes a header:
67+
68+
```tsx
69+
import { Outlet, createRootRoute } from '@tanstack/react-router'
70+
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
71+
72+
import { Link } from '@tanstack/react-router'
73+
74+
export const Route = createRootRoute({
75+
component: () => (
76+
<>
77+
<header>
78+
<nav>
79+
<Link to="/">Home</Link>
80+
<Link to="/about">About</Link>
81+
</nav>
82+
</header>
83+
<Outlet />
84+
<TanStackRouterDevtools />
85+
</>
86+
),
87+
})
88+
```
89+
90+
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
91+
92+
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
93+
94+
## Data Fetching
95+
96+
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
97+
98+
For example:
99+
100+
```tsx
101+
const peopleRoute = createRoute({
102+
getParentRoute: () => rootRoute,
103+
path: '/people',
104+
loader: async () => {
105+
const response = await fetch('https://swapi.dev/api/people')
106+
return response.json() as Promise<{
107+
results: {
108+
name: string
109+
}[]
110+
}>
111+
},
112+
component: () => {
113+
const data = peopleRoute.useLoaderData()
114+
return (
115+
<ul>
116+
{data.results.map((person) => (
117+
<li key={person.name}>{person.name}</li>
118+
))}
119+
</ul>
120+
)
121+
},
122+
})
123+
```
124+
125+
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
126+
127+
### React-Query
128+
129+
React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
130+
131+
First add your dependencies:
132+
133+
```bash
134+
pnpm add @tanstack/react-query @tanstack/react-query-devtools
135+
```
136+
137+
Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
138+
139+
```tsx
140+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
141+
142+
// ...
143+
144+
const queryClient = new QueryClient()
145+
146+
// ...
147+
148+
if (!rootElement.innerHTML) {
149+
const root = ReactDOM.createRoot(rootElement)
150+
151+
root.render(
152+
<QueryClientProvider client={queryClient}>
153+
<RouterProvider router={router} />
154+
</QueryClientProvider>,
155+
)
156+
}
157+
```
158+
159+
You can also add TanStack Query Devtools to the root route (optional).
160+
161+
```tsx
162+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
163+
164+
const rootRoute = createRootRoute({
165+
component: () => (
166+
<>
167+
<Outlet />
168+
<ReactQueryDevtools buttonPosition="top-right" />
169+
<TanStackRouterDevtools />
170+
</>
171+
),
172+
})
173+
```
174+
175+
Now you can use `useQuery` to fetch your data.
176+
177+
```tsx
178+
import { useQuery } from '@tanstack/react-query'
179+
180+
import './App.css'
181+
182+
function App() {
183+
const { data } = useQuery({
184+
queryKey: ['people'],
185+
queryFn: () =>
186+
fetch('https://swapi.dev/api/people')
187+
.then((res) => res.json())
188+
.then((data) => data.results as { name: string }[]),
189+
initialData: [],
190+
})
191+
192+
return (
193+
<div>
194+
<ul>
195+
{data.map((person) => (
196+
<li key={person.name}>{person.name}</li>
197+
))}
198+
</ul>
199+
</div>
200+
)
201+
}
202+
203+
export default App
204+
```
205+
206+
You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
207+
208+
## State Management
209+
210+
Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
211+
212+
First you need to add TanStack Store as a dependency:
213+
214+
```bash
215+
pnpm add @tanstack/store
216+
```
217+
218+
Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
219+
220+
```tsx
221+
import { useStore } from '@tanstack/react-store'
222+
import { Store } from '@tanstack/store'
223+
import './App.css'
224+
225+
const countStore = new Store(0)
226+
227+
function App() {
228+
const count = useStore(countStore)
229+
return (
230+
<div>
231+
<button onClick={() => countStore.setState((n) => n + 1)}>
232+
Increment - {count}
233+
</button>
234+
</div>
235+
)
236+
}
237+
238+
export default App
239+
```
240+
241+
One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
242+
243+
Let's check this out by doubling the count using derived state.
244+
245+
```tsx
246+
import { useStore } from '@tanstack/react-store'
247+
import { Store, Derived } from '@tanstack/store'
248+
import './App.css'
249+
250+
const countStore = new Store(0)
251+
252+
const doubledStore = new Derived({
253+
fn: () => countStore.state * 2,
254+
deps: [countStore],
255+
})
256+
doubledStore.mount()
257+
258+
function App() {
259+
const count = useStore(countStore)
260+
const doubledCount = useStore(doubledStore)
261+
262+
return (
263+
<div>
264+
<button onClick={() => countStore.setState((n) => n + 1)}>
265+
Increment - {count}
266+
</button>
267+
<div>Doubled - {doubledCount}</div>
268+
</div>
269+
)
270+
}
271+
272+
export default App
273+
```
274+
275+
We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
276+
277+
Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
278+
279+
You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
280+
281+
# Demo files
282+
283+
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
284+
285+
# Learn More
286+
287+
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

‎examples/ts-react-search/package.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "ts-react-search",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite dev --port 3000",
7+
"build": "vite build",
8+
"serve": "vite preview",
9+
"test": "exit 0"
10+
},
11+
"dependencies": {
12+
"@radix-ui/react-slot": "^1.2.4",
13+
"@tailwindcss/vite": "^4.1.18",
14+
"@tanstack/ai": "workspace:*",
15+
"@tanstack/ai-groq": "workspace:*",
16+
"@tanstack/ai-react": "workspace:*",
17+
"@tanstack/query-db-collection": "^1.0.6",
18+
"@tanstack/react-db": "^0.1.55",
19+
"@tanstack/react-devtools": "^0.9.10",
20+
"@tanstack/react-query": "^5.90.12",
21+
"@tanstack/react-router": "^1.158.4",
22+
"@tanstack/react-router-devtools": "^1.158.4",
23+
"@tanstack/react-router-ssr-query": "^1.158.4",
24+
"@tanstack/react-start": "^1.159.0",
25+
"@tanstack/router-plugin": "^1.158.4",
26+
"@tanstack/zod-adapter": "^1.140.1",
27+
"class-variance-authority": "^0.7.1",
28+
"clsx": "^2.1.1",
29+
"lucide-react": "^0.561.0",
30+
"nitro": "latest",
31+
"radix-ui": "^1.4.3",
32+
"react": "^19.2.3",
33+
"react-day-picker": "^9.12.0",
34+
"react-dom": "^19.2.3",
35+
"tailwind-merge": "^3.4.0",
36+
"tailwindcss": "^4.1.18",
37+
"tw-animate-css": "^1.4.0",
38+
"vite-tsconfig-paths": "^5.1.4",
39+
"zod": "^4.2.0"
40+
},
41+
"devDependencies": {
42+
"@tanstack/devtools-vite": "^0.5.3",
43+
"@testing-library/dom": "^10.4.1",
44+
"@testing-library/react": "^16.3.0",
45+
"@types/node": "^24.10.1",
46+
"@types/react": "^19.2.7",
47+
"@types/react-dom": "^19.2.3",
48+
"@vitejs/plugin-react": "^5.1.2",
49+
"jsdom": "^27.2.0",
50+
"typescript": "5.9.3",
51+
"vite": "^7.2.7",
52+
"vitest": "^4.0.14",
53+
"web-vitals": "^5.1.0"
54+
}
55+
}

‎examples/ts-react-search/public/favicon.ico‎

Whitespace-only changes.

‎examples/ts-react-search/public/logo192.png‎

Loading

‎examples/ts-react-search/public/logo512.png‎

Loading

0 commit comments

Comments
 (0)