Skip to content

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

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

fix(ai-react): preserve generation devtools identity#1032
Jonesxq wants to merge 2 commits 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

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: bcfb96b4-efb9-4a92-a75d-1c4a6bc9b92f

📥 Commits

Reviewing files that changed from the base of the PR and between 6881d98 and 11d8e08.

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

This change preserves authoritative generation-hook identity while retaining caller display metadata, with regression coverage for hostile overrides; 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: … 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 explains the problem, implementation goals, tests, and release impact. It omits some checklist items, but it is mostly complete and relevant.
Linked Issues check ✅ Passed The changes address issue #1002 by enforcing React framework and hook identity metadata, preserving caller metadata, and adding regression coverage for hostile overrides.
Out of Scope Changes check ✅ Passed The helper refactor, specialized hook updates, changeset, unit tests, and E2E tests all support the linked issue and stated pull request objectives.
Full details: Docstring Coverage

Explanation

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

✨ 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 03ca09a

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

☁️ Nx Cloud last updated this comment at 2026-08-31 21:49:26 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-compaction

npm i https://pkg.pr.new/@tanstack/ai-compaction@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-lovable

npm i https://pkg.pr.new/@tanstack/ai-lovable@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-upstash-box

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

@tanstack/ai-sandbox-vercel

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

@tanstack/ai-skills

npm i https://pkg.pr.new/@tanstack/ai-skills@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

@tanstack/svelte-ai-devtools

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

commit: a49ae63

@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 2 times, most recently 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 waiting-on: author Waiting for the author to respond or update and removed waiting-on: author Waiting for the author to respond or update waiting-on: maintainer The ball is in the maintainers’ court labels Aug 22, 2026
@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch 3 times, most recently from 63a7d96 to 761b969 Compare August 26, 2026 21:28
@autofix-ci
autofix-ci Bot requested a review from a team as a code owner August 26, 2026 21:33
@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 27, 2026
@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch from 5c9b467 to 11d8e08 Compare August 27, 2026 21:25
@coderabbitai

coderabbitai Bot commented Aug 27, 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: author Waiting for the author to respond or update waiting-on: maintainer The ball is in the maintainers’ court and removed waiting-on: maintainer The ball is in the maintainers’ court waiting-on: author Waiting for the author to respond or update labels Aug 28, 2026
@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch from a49ae63 to 03ca09a Compare August 31, 2026 21:28
@github-actions github-actions Bot added waiting-on: author Waiting for the author to respond or update and removed waiting-on: maintainer The ball is in the maintainers’ court labels Sep 1, 2026
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