refactor(create): rebuild AI Assistant on @tanstack/ai-react/ui createChatHook

[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 AI Assistant’s chat interface while preserving its existing appearance and behavior.
  • Chat messages, markdown content, input controls, scrolling, and error displays continue to work consistently.
  • Guitar recommendations remain displayed inline as interactive cards.
  • The assistant’s open and close controls remain unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 909f7167-30d5-43b1-bb01-38f54e66c374

📥 Commits

Reviewing files that changed from the base of the PR and between 4f7744c and 234754f.

📒 Files selected for processing (5)

• .changeset/ai-assistant-react-ui.md
• packages/create/src/frameworks/react/add-ons/ai/assets/src/components/ai/demo-ai-ui-context.ts
• packages/create/src/frameworks/react/add-ons/ai/assets/src/components/ai/demo-chat-registry.tsx
• 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: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

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, while chat options remain structurally accessible.

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 the chat layout, message display, input handling, text rendering, fallback behavior, and guitar recommendation tool. It registers these components with createChatHook.
Assistant integration and release metadata packages/create/src/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx, .changeset/ai-assistant-react-ui.md	AIAssistant now renders <chat.AppChat />. The changeset records a patch release for @tanstack/create.

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

Merge Risk: ⚪ Minimal · up to 23475

The floating React AI Assistant now uses the registered chat UI while retaining text streaming, input behavior, error display, and inline guitar recommendations. No current merge-blocking risk remains.

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

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: rebuilding the React AI Assistant with the @tanstack/ai-react/ui createChatHook registry pattern.
Docstring Coverage	✅ Passed	Docstring coverage is 85.71% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 4 files. (1 skipped: 1 u…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ai-assistant-react-ui

---

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

_{Comment @coderabbitai help to get the list of available commands.}