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: 41cef0df-90ba-479c-87d3-d62d35f2862f

📥 Commits

Reviewing files that changed from the base of the PR and between f7c67a8 and b0f3402.

📒 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)
  • packages/ai-react/src/use-generate-image.ts
  • packages/ai-react/tests/devtools-identification.test.ts
  • packages/ai-react/src/use-generate-audio.ts
  • testing/e2e/src/routes/devtools-generation-hooks.tsx
  • packages/ai-react/src/use-transcription.ts
  • testing/e2e/tests/devtools-generation-hooks.spec.ts
  • .changeset/react-generation-devtools-identity.md
  • packages/ai-react/src/use-summarize.ts
  • packages/ai-react/src/use-generate-speech.ts
  • packages/ai-react/src/use-generation.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 2 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 b0f34

This change keeps React generation activity correctly identified in Devtools while preserving caller-supplied display metadata; no actionable merge-blocking risk remains beyond 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 identifies the ai-react Devtools identity fix, which is the main change.
Description check ✅ Passed The description covers the changes, testing, checklist, release impact, regression coverage, and changeset.
Linked Issues check ✅ Passed The changes enforce authoritative React and hook identities, preserve caller metadata, and add regression tests for issue #1002.
Out of Scope Changes check ✅ Passed All changes support the linked issue through implementation updates, tests, E2E coverage, and the required changeset.
✨ 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

View your CI Pipeline Execution ↗ for commit b0f3402

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

☁️ Nx Cloud last updated this comment at 2026-08-21 04:00:11 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-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-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-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: b0f3402

@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 2 times, most recently from 4fa0a61 to 098a3c2 Compare August 20, 2026 10:40
@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

waiting-on: author Waiting for the author to respond or update

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