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 their correct framework, hook name, and output type in Devtools.
    • Custom Devtools metadata is preserved while built-in hook 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

Warning

Review limit reached

@tombeckenham, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 19 minutes

Limit details: You’ve used all 8 included reviews currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

Wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a2ff263e-c560-4fd7-bea1-d8cff97a5bb8

📥 Commits

Reviewing files that changed from the base of the PR and between c092231 and 098a3c2.

📒 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
📝 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

Possibly related PRs

  • TanStack/ai#1000: Applies the same DevTools identity ordering fix to the ai-octane generation hooks.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 40.00% which is insufficient. The required threshold is 80.00%. 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 fix to preserve React generation Devtools identity.
Description check ✅ Passed The description includes the required changes, checklist, testing details, and release impact sections with relevant information.
Linked Issues check ✅ Passed The changes enforce authoritative React Devtools identity, preserve caller metadata, and add regression coverage for issue #1002.
Out of Scope Changes check ✅ Passed The changeset, implementation updates, and unit and E2E tests directly support the linked issue and PR objectives.
✨ 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.

@tombeckenham

Copy link
Copy Markdown
Contributor

Maintainer sweep: rebased onto main (force-with-lease). CI approval handled if it was waiting.

@nx-cloud

nx-cloud Bot commented Aug 10, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 098a3c2

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

☁️ Nx Cloud last updated this comment at 2026-08-20 10:56:56 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: 098a3c2

@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 from 576b549 to 4fa0a61 Compare August 20, 2026 10:20
@tombeckenham

Copy link
Copy Markdown
Contributor

Maintainer sweep: rebased onto main (force-with-lease). CI approval handled if it was waiting.

@tombeckenham
tombeckenham force-pushed the fix/react-generation-devtools-identity branch from 4fa0a61 to 098a3c2 Compare August 20, 2026 10:40
@tombeckenham

Copy link
Copy Markdown
Contributor

Maintainer sweep: rebased onto main (force-with-lease). CI approval handled if it was waiting.

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

3 participants