Skip to content

fix(ai-react): preserve generation devtools identity - #1032

Open
Jonesxq wants to merge 1 commit into
TanStack:mainfrom
Jonesxq:fix/react-generation-devtools-identity
Open

fix(ai-react): preserve generation devtools identity#1032
Jonesxq wants to merge 1 commit into
TanStack:mainfrom
Jonesxq:fix/react-generation-devtools-identity

Conversation

@Jonesxq

@Jonesxq Jonesxq commented Jul 31, 2026

Copy link
Copy Markdown

Changes

Fixes #1002.

Caller-supplied devtools options could override the framework and hook name
reported by React generation hooks, causing generation activity to be
misidentified in Devtools.

  • Keep framework and hook identity authoritative for useGeneration.
  • Preserve each specialized generation hook's own identity and outputKind.
  • Continue forwarding caller-supplied display metadata.
  • Add unit and E2E regression coverage for hostile identity overrides.

Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

Test plan

  • NX_BASE=origin/main pnpm test:pr
  • vitest run tests/devtools-identification.test.ts from packages/ai-react (2 passed)
  • playwright test devtools-generation-hooks.spec.ts --workers=4 from testing/e2e (3 passed)

Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Bug Fixes

    • React generation hooks now consistently report the correct framework, hook name, and output type in Devtools.
    • Custom Devtools metadata is preserved while built-in identity details remain accurate.
    • Standard and specialized generation hooks now provide consistent identity information.
  • Tests

    • Added coverage for standard and specialized generation hooks.
    • Expanded end-to-end validation for custom generation hook registration and metadata handling.

@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 51d94c8d-14a3-47f7-a2a8-ae6a848b616e

📥 Commits

Reviewing files that changed from the base of the PR and between d3aa104 and f1fa46a.

📒 Files selected for processing (10)
  • .changeset/react-generation-devtools-identity.md
  • packages/ai-react/src/use-generate-audio.ts
  • packages/ai-react/src/use-generate-image.ts
  • packages/ai-react/src/use-generate-speech.ts
  • packages/ai-react/src/use-generation.ts
  • packages/ai-react/src/use-summarize.ts
  • packages/ai-react/src/use-transcription.ts
  • packages/ai-react/tests/devtools-identification.test.ts
  • testing/e2e/src/routes/devtools-generation-hooks.tsx
  • testing/e2e/tests/devtools-generation-hooks.spec.ts
🚧 Files skipped from review as they are similar to previous changes (10)
  • testing/e2e/src/routes/devtools-generation-hooks.tsx
  • packages/ai-react/src/use-generate-speech.ts
  • .changeset/react-generation-devtools-identity.md
  • packages/ai-react/src/use-generate-image.ts
  • testing/e2e/tests/devtools-generation-hooks.spec.ts
  • packages/ai-react/tests/devtools-identification.test.ts
  • packages/ai-react/src/use-transcription.ts
  • packages/ai-react/src/use-generate-audio.ts
  • packages/ai-react/src/use-summarize.ts
  • packages/ai-react/src/use-generation.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.


📝 Walkthrough

Walkthrough

@tanstack/ai-react adds a shared DevTools identity helper. Generation hooks now preserve React and hook-name metadata while allowing custom metadata to pass through. Unit and end-to-end tests cover standard and custom generation hooks.

Changes

React DevTools identity

Layer / File(s) Summary
Identity helper and metadata composition
packages/ai-react/src/use-generation.ts
Adds useGenerationWithDevtoolsIdentity and applies caller metadata before authoritative React identity fields.
Specialized generation hook integration
packages/ai-react/src/use-generate-audio.ts, packages/ai-react/src/use-generate-image.ts, packages/ai-react/src/use-generate-speech.ts, packages/ai-react/src/use-summarize.ts, packages/ai-react/src/use-transcription.ts
Updates specialized hooks to pass hookName and outputKind through the shared helper.
Identity validation and release metadata
packages/ai-react/tests/devtools-identification.test.ts, testing/e2e/src/routes/devtools-generation-hooks.tsx, testing/e2e/tests/devtools-generation-hooks.spec.ts, .changeset/react-generation-devtools-identity.md
Tests DevTools metadata overrides, custom generation registration, technical names, and the patch release.

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

Merge Risk: ⚪ Minimal · up to f1fa4

The change keeps generation hook identity authoritative while preserving caller display metadata, with unit and E2E regression coverage; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 70.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 10 functions across 9 files. (1 skipped: 1 unsupported.) Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the primary fix to preserve React generation Devtools identity.
Description check ✅ Passed The description explains the problem, solution, testing, and release impact, with only the non-critical Docs checklist item omitted.
Linked Issues check ✅ Passed The changes enforce authoritative React framework and hook identity, preserve metadata, and add regression tests for issue #1002.
Out of Scope Changes check ✅ Passed The implementation, tests, E2E coverage, and changeset directly support the linked issue objectives without unrelated changes.
✨ 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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ai-react/tests/devtools-identification.test.ts`:
- Around line 1-4: Split devtools-identification.test.ts into colocated
*.test.ts files beside use-generation.ts and use-generate-image.ts, assigning
each test to the hook it covers. Remove the tests from the
packages/ai-react/tests directory while preserving their existing assertions and
setup.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b3dd1031-217a-407a-83e6-bdff1b789017

📥 Commits

Reviewing files that changed from the base of the PR and between 1cb04d5 and 76fa812.

📒 Files selected for processing (10)
  • .changeset/react-generation-devtools-identity.md
  • packages/ai-react/src/use-generate-audio.ts
  • packages/ai-react/src/use-generate-image.ts
  • packages/ai-react/src/use-generate-speech.ts
  • packages/ai-react/src/use-generation.ts
  • packages/ai-react/src/use-summarize.ts
  • packages/ai-react/src/use-transcription.ts
  • packages/ai-react/tests/devtools-identification.test.ts
  • testing/e2e/src/routes/devtools-generation-hooks.tsx
  • testing/e2e/tests/devtools-generation-hooks.spec.ts

Comment on lines +1 to +4
import { renderHook } from '@testing-library/react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { useGenerateImage } from '../src/use-generate-image'
import { useGeneration } from '../src/use-generation'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Place each unit test beside its covered hook.

Split this file into tests alongside packages/ai-react/src/use-generation.ts and packages/ai-react/src/use-generate-image.ts. The current packages/ai-react/tests/ location does not follow the required colocated test layout.

As per coding guidelines, “Place unit tests in *.test.ts files alongside the source they cover.”

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ai-react/tests/devtools-identification.test.ts` around lines 1 - 4,
Split devtools-identification.test.ts into colocated *.test.ts files beside
use-generation.ts and use-generate-image.ts, assigning each test to the hook it
covers. Remove the tests from the packages/ai-react/tests directory while
preserving their existing assertions and setup.

Source: Coding guidelines

@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch from 76fa812 to 576b549 Compare August 10, 2026 09:06
@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@nx-cloud

nx-cloud Bot commented Aug 10, 2026

Copy link
Copy Markdown

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

To disable these notifications, a workspace admin can disable them in workspace settings.


View your CI Pipeline Execution ↗ for commit f1fa46a

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

☁️ Nx Cloud last updated this comment at 2026-08-22 21:44:40 UTC

@pkg-pr-new

pkg-pr-new Bot commented Aug 10, 2026

Copy link
Copy Markdown

Open in StackBlitz

@tanstack/ai

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

@tanstack/ai-acp

npm i https://pkg.pr.new/@tanstack/ai-acp@1032

@tanstack/ai-angular

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

@tanstack/ai-anthropic

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

@tanstack/ai-bedrock

npm i https://pkg.pr.new/@tanstack/ai-bedrock@1032

@tanstack/ai-byteplus

npm i https://pkg.pr.new/@tanstack/ai-byteplus@1032

@tanstack/ai-claude-code

npm i https://pkg.pr.new/@tanstack/ai-claude-code@1032

@tanstack/ai-client

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

@tanstack/ai-code-mode

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

@tanstack/ai-code-mode-snippets

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

@tanstack/ai-codex

npm i https://pkg.pr.new/@tanstack/ai-codex@1032

@tanstack/ai-cohere

npm i https://pkg.pr.new/@tanstack/ai-cohere@1032

@tanstack/ai-devtools-core

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

@tanstack/ai-durable-stream

npm i https://pkg.pr.new/@tanstack/ai-durable-stream@1032

@tanstack/ai-elevenlabs

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

@tanstack/ai-event-client

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

@tanstack/ai-fal

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

@tanstack/ai-gemini

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

@tanstack/ai-grok

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

@tanstack/ai-grok-build

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

@tanstack/ai-groq

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

@tanstack/ai-isolate-cloudflare

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

@tanstack/ai-isolate-daytona

npm i https://pkg.pr.new/@tanstack/ai-isolate-daytona@1032

@tanstack/ai-isolate-node

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

@tanstack/ai-isolate-quickjs

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

@tanstack/ai-isolate-quickjs-bun

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

@tanstack/ai-llmgateway

npm i https://pkg.pr.new/@tanstack/ai-llmgateway@1032

@tanstack/ai-mcp

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

@tanstack/ai-memory

npm i https://pkg.pr.new/@tanstack/ai-memory@1032

@tanstack/ai-mistral

npm i https://pkg.pr.new/@tanstack/ai-mistral@1032

@tanstack/ai-octane

npm i https://pkg.pr.new/@tanstack/ai-octane@1032

@tanstack/ai-ollama

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

@tanstack/ai-openai

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

@tanstack/ai-opencode

npm i https://pkg.pr.new/@tanstack/ai-opencode@1032

@tanstack/ai-openrouter

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

@tanstack/ai-perplexity

npm i https://pkg.pr.new/@tanstack/ai-perplexity@1032

@tanstack/ai-persistence

npm i https://pkg.pr.new/@tanstack/ai-persistence@1032

@tanstack/ai-preact

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

@tanstack/ai-react

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

@tanstack/ai-react-ui

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

@tanstack/ai-sandbox

npm i https://pkg.pr.new/@tanstack/ai-sandbox@1032

@tanstack/ai-sandbox-cloudflare

npm i https://pkg.pr.new/@tanstack/ai-sandbox-cloudflare@1032

@tanstack/ai-sandbox-daytona

npm i https://pkg.pr.new/@tanstack/ai-sandbox-daytona@1032

@tanstack/ai-sandbox-docker

npm i https://pkg.pr.new/@tanstack/ai-sandbox-docker@1032

@tanstack/ai-sandbox-local-process

npm i https://pkg.pr.new/@tanstack/ai-sandbox-local-process@1032

@tanstack/ai-sandbox-sprites

npm i https://pkg.pr.new/@tanstack/ai-sandbox-sprites@1032

@tanstack/ai-sandbox-vercel

npm i https://pkg.pr.new/@tanstack/ai-sandbox-vercel@1032

@tanstack/ai-solid

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

@tanstack/ai-solid-ui

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

@tanstack/ai-svelte

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

@tanstack/ai-utils

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

@tanstack/ai-vercel-gateway

npm i https://pkg.pr.new/@tanstack/ai-vercel-gateway@1032

@tanstack/ai-vertex

npm i https://pkg.pr.new/@tanstack/ai-vertex@1032

@tanstack/ai-vue

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

@tanstack/ai-vue-ui

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

@tanstack/openai-base

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

@tanstack/preact-ai-devtools

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

@tanstack/react-ai-devtools

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

@tanstack/solid-ai-devtools

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

commit: f1fa46a

@github-actions

Copy link
Copy Markdown
Contributor

Thanks for the PR, @Jonesxq! 🙌 @AlemTuzlak will take a look.

Automated pre-review checks

  • ✅ CI passing
  • ✅ No merge conflicts
  • ✅ Changeset present
  • ✅ E2E test changes included

Automated triage — a human review follows.

@github-actions github-actions Bot added the waiting-on: author Waiting for the author to respond or update label Aug 13, 2026
@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch 3 times, most recently from 098a3c2 to b0f3402 Compare August 21, 2026 03:29
@coderabbitai

coderabbitai Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch from b0f3402 to 4653fda Compare August 21, 2026 21:08
@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch from 4653fda to f1fa46a Compare August 22, 2026 21:25
@coderabbitai

coderabbitai Bot commented Aug 22, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@github-actions github-actions Bot added waiting-on: maintainer The ball is in the maintainers’ court and removed waiting-on: author Waiting for the author to respond or update labels Aug 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

waiting-on: maintainer The ball is in the maintainers’ court

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useGeneration (ai-react): caller-supplied devtools can override the framework identification

2 participants