fix(ai-react): sync tools to ChatClient when tools prop changes

[citizen204]

Summary

useChat initialises the ChatClient with the tools option passed at construction time, but never calls client.updateOptions({ tools }) when the tools prop changes during the component lifecycle. This means the client-side tool registry becomes stale when callers swap tools — e.g. a project-management app where updateTaskTool closes over projectId and the user switches projects.

ChatClient.updateOptions() already accepts tools and rebuilds clientToolsRef when it receives them. The fix is to add tools to the existing updateOptions effect that already syncs body, forwardedProps, and context.

Changes

• packages/ai-react/src/use-chat.ts: conditionally spread options.tools into the updateOptions call and add it to the dependency array, matching the existing pattern for forwardedProps.

Fixes #775

Test plan

• Mount useChat with a tools array that closes over a value (e.g. projectId).
• Change projectId while the component stays mounted.
• Confirm the new tool implementation is used on the next LLM response (not the stale closure from mount time).
• Callers should useMemo their tools array (as shown in the issue) to avoid unnecessary re-registrations.

Summary by CodeRabbit

• Bug Fixes
  • Improved chat option handling so updates to tool availability apply reliably and take effect immediately.
  • Refined option update behavior to reduce unintended re-runs when unrelated chat settings change.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c71d0f3a-a294-4502-be65-a8489df79d01

📥 Commits

Reviewing files that changed from the base of the PR and between ec6fd65 and ef3ff0c.

📒 Files selected for processing (1)

• packages/ai-react/src/use-chat.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/ai-react/src/use-chat.ts

---

📝 Walkthrough

Walkthrough

useChat now updates body, forwardedProps, tools, and context through separate client.updateOptions effects, each driven by the corresponding option value.

Changes

useChat option syncing

Layer / File(s)	Summary
Body sync effect packages/ai-react/src/use-chat.ts	body is synced through its own client.updateOptions effect that depends on options.body.
Forwarded props sync effect packages/ai-react/src/use-chat.ts	forwardedProps is synced through a dedicated effect that only updates when options.forwardedProps is defined and depends on options.forwardedProps.
Tools sync effect packages/ai-react/src/use-chat.ts	tools is synced through a dedicated effect that conditionally calls client.updateOptions({ tools: options.tools }) when options.tools is defined and depends on options.tools.
Context sync effect packages/ai-react/src/use-chat.ts	context is synced through its own client.updateOptions effect that depends on options.context.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• TanStack/ai#752: Related use-chat.ts work around client.updateOptions({ tools }) handling and tool-update propagation.

Suggested reviewers

• AlemTuzlak

Poem

A rabbit twitched its nose with glee,
Four tiny effects now dance free.
Body, props, tools, and context align,
Fresh as a carrot, all in fine time.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR explains the bug and fix well, but it omits the template's Checklist and Release Impact sections.	Add the Checklist and Release Impact sections, including whether a changeset is needed and local test confirmation.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly states the main fix: syncing tools to ChatClient when the tools prop changes.
Linked Issues check	✅ Passed	The change matches issue #775 by updating ChatClient when tools changes, which addresses the stale tool registry bug.
Out of Scope Changes check	✅ Passed	The additional effect splits are still directly related to syncing useChat options and are not unrelated scope creep.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[manish-baghel]

@AlemTuzlak
I think other clients will also need this change. I originally didn't create a PR as I realized that pretty much all clients will need this update and I personally don't know anything other than React.

[AlemTuzlak]

@manish-baghel i'll apply this to other frameworks and get it over the finish line, tysm!

[manish-baghel]

Thanks @AlemTuzlak and thanks @citizen204 for raising a PR. Really appreciate it~!

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ef3ff0c

Command	Status	Duration	Result
nx run-many --targets=build --exclude=examples/...	✅ Succeeded	7s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-06-24 08:04:29 UTC

[tombeckenham]

Thanks for this and for the comment. I implemented the suggestion

[pkg-pr-new]

Open in StackBlitz

@tanstack/ai

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

@tanstack/ai-angular

npm i https://pkg.pr.new/@tanstack/ai-angular@776

@tanstack/ai-anthropic

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

@tanstack/ai-client

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

@tanstack/ai-code-mode

npm i https://pkg.pr.new/@tanstack/ai-code-mode@776

@tanstack/ai-code-mode-skills

npm i https://pkg.pr.new/@tanstack/ai-code-mode-skills@776

@tanstack/ai-devtools-core

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

@tanstack/ai-elevenlabs

npm i https://pkg.pr.new/@tanstack/ai-elevenlabs@776

@tanstack/ai-event-client

npm i https://pkg.pr.new/@tanstack/ai-event-client@776

@tanstack/ai-fal

npm i https://pkg.pr.new/@tanstack/ai-fal@776

@tanstack/ai-gemini

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

@tanstack/ai-grok

npm i https://pkg.pr.new/@tanstack/ai-grok@776

@tanstack/ai-groq

npm i https://pkg.pr.new/@tanstack/ai-groq@776

@tanstack/ai-isolate-cloudflare

npm i https://pkg.pr.new/@tanstack/ai-isolate-cloudflare@776

@tanstack/ai-isolate-node

npm i https://pkg.pr.new/@tanstack/ai-isolate-node@776

@tanstack/ai-isolate-quickjs

npm i https://pkg.pr.new/@tanstack/ai-isolate-quickjs@776

@tanstack/ai-mcp

npm i https://pkg.pr.new/@tanstack/ai-mcp@776

@tanstack/ai-ollama

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

@tanstack/ai-openai

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

@tanstack/ai-openrouter

npm i https://pkg.pr.new/@tanstack/ai-openrouter@776

@tanstack/ai-preact

npm i https://pkg.pr.new/@tanstack/ai-preact@776

@tanstack/ai-react

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

@tanstack/ai-react-ui

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

@tanstack/ai-solid

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

@tanstack/ai-solid-ui

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

@tanstack/ai-svelte

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

@tanstack/ai-utils

npm i https://pkg.pr.new/@tanstack/ai-utils@776

@tanstack/ai-vue

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

@tanstack/ai-vue-ui

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

@tanstack/openai-base

npm i https://pkg.pr.new/@tanstack/openai-base@776

@tanstack/preact-ai-devtools

npm i https://pkg.pr.new/@tanstack/preact-ai-devtools@776

@tanstack/react-ai-devtools

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

@tanstack/solid-ai-devtools

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

commit: ef3ff0c