[jherr]

What

Migrates the React AI add-on's floating "AI Assistant" widget from the older useChat / createChatClientOptions API (with hand-rolled message rendering) to the newer @tanstack/ai-react/ui createChatHook registry pattern, matching the ts-react-ui-chatbot reference example.

Changes

• New components/ai/demo-ai-ui-context.ts — createChatHookContexts() (scoped chat/part/interrupt contexts).
• New components/ai/demo-chat-registry.tsx — createChatHook({...}) registering layout/message/input chrome plus a text part and the recommendGuitar tool component. Styled with the existing demo-* / --sea-ink design tokens (no new dependencies; reuses Streamdown).
• components/demo-AIAssistant.tsx — renders the panel via <chat.AppChat /> instead of a bespoke Messages list + textarea form. Keeps the showAIAssistant store used by the guitar card.
• lib/demo-ai-hook.ts — exports a plain options object instead of wrapping in createChatClientOptions, so the @tanstack/ai-react/ui type helpers can structurally infer the named tools (the wrapper hid tools, resolving the tool part type to never). The existing ai-chat.tsx route + InferChatMessages still compile.

Scope

• Only the floating AI Assistant surface is migrated. The full-page ai-chat.tsx route is intentionally left on the current hook.
• Guitar-recommendation domain, behaviour, and styling are unchanged.

Verification

• Scaffolded an app with --add-ons ai against the published @tanstack/ai-react@0.24.0: my files typecheck clean.
• Live-tested in the browser end-to-end: the assistant panel mounts, streams a response, and renders the recommendGuitar guitar card through the new tool component.
• Full pre-commit suite (pnpm build && pnpm test, incl. e2e add-on smoke tests) passes.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Refactor
  • Updated the floating AI Assistant’s chat interface while preserving its existing appearance and behavior.
  • Chat messages, formatted text, input controls, scrolling, and error displays continue to work consistently.
  • Guitar recommendations remain displayed inline as cards, and the assistant’s open and close controls are unchanged.
• Tests
  • Verified that chat replies and guitar recommendations appear in both the app and the floating assistant.

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The React AI Assistant now uses createChatHook with shared contexts and registered layout, message, input, text, fallback, and guitar recommendation components. The assistant renders the registered chat UI. The end-to-end test checks assistant replies, thread IDs, and guitar recommendation output.

Changes: AI Assistant registry migration

Layer / File(s)	Summary
Chat options and shared contexts packages/create/src/frameworks/react/add-ons/ai/assets/src/lib/demo-ai-hook.ts, packages/create/src/frameworks/react/add-ons/ai/assets/src/components/ai/demo-ai-ui-context.ts	The demo exports plain chatOptions and creates shared chat, part, and interrupt contexts.
Registered chat components packages/create/src/frameworks/react/add-ons/ai/assets/src/components/ai/demo-chat-registry.tsx	The registry defines and registers the layout, message, input, text, fallback, and guitar recommendation components with createChatHook.
Assistant integration and validation packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx, packages/cli/tests-e2e/ai-smoke.spec.ts, .changeset/ai-assistant-react-ui.md	The assistant renders <chat.AppChat />. The end-to-end test checks the assistant reply, shared thread ID, and guitar recommendation. The changeset records a patch release for @tanstack/create.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Refactor

Sequence Diagram(s)

sequenceDiagram
  participant AIAssistant
  participant useAppChat
  participant ChatLayout
  participant ChatMessage
  participant TextPart
  participant RecommendGuitarTool
  AIAssistant->>useAppChat: obtain chat registry
  useAppChat->>ChatLayout: render AppChat
  ChatLayout->>ChatMessage: dispatch messages
  ChatMessage->>TextPart: dispatch text parts
  ChatMessage->>RecommendGuitarTool: dispatch recommendGuitar output

Loading

Possibly related PRs

• TanStack/cli#525: Updates the same generated AI chat hook and its thread and message type contract.
• TanStack/cli#535: Updates the same generated AI chat hook and its thread and message type contract.
• TanStack/cli#521: Updates the same generated AI chat hook and its integration with the floating Assistant.

Suggested reviewers: alemtuzlak

Merge Risk: Minimal · up to 658a1

No merge-blocking issue was established. The recommendation smoke test does not fully exercise client-tool execution.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: rebuilding the AI Assistant with the @tanstack/ai-react/ui createChatHook registry pattern.
Docstring Coverage		Docstring coverage is inconclusive: files from earlier reviews still need to be rechecked within the check's analysis limits. Not blocking.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Finishing Touches

Generate docstrings

• Commit to this branch
• Create a new PR

Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/cli/tests-e2e/ai-smoke.spec.ts

Parsing error: "parserOptions.project" has been provided for @typescript-eslint/parser.
The file was not found in any of the provided project(s): packages/cli/tests-e2e/ai-smoke.spec.ts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 8c6ee213-3d60-4960-a2ab-f3612356193a

Commits

Reviewing files that changed from the base of the PR and between 234754f and 658a1cc.

Files selected for processing: 3

• packages/cli/tests-e2e/ai-smoke.spec.ts
• packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx
• packages/create/src/frameworks/react/add-ons/ai/assets/src/lib/demo-ai-hook.ts

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 2 remain after this review.

[changeset-bot]

🦋 Changeset detected

Latest commit: 658a1cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@tanstack/create	Patch
create-start-app	Patch
create-tanstack-app	Patch
create-tanstack	Patch
create-tsrouter-app	Patch
@tanstack/create-start	Patch
@tanstack/cli	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[tannerlinsley]

The AI Assistant PR branch now includes current main. Both chat surfaces keep the same thread ID, and the floating panel still displays the guitar recommendation.

AI review notes:
The current React AI package requires the thread ID when the floating chat instance is created and exposes a read-only message list. The update supplies the existing ID and derives the message type from the actual hook result.
The generated app built and typechecked. The blocking browser suite passed with a local mock for both chat surfaces and the inline guitar card. The generated AI app’s browser JavaScript increased by 2,691 gzip bytes with the same dependency lock.