Extract devtools theme

[harry-whorlow]

Extract devtool theme

Summary by CodeRabbit

• Bug Fixes
  • Fixed theme mismatch issues in devtools by restructuring how theme context is provided to components.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Devtools component is refactored to accept a theme prop and wrap its content with ThemeContextProvider to manage theme state. A changeset file is added to document this patch release for the ai-devtools-core package.

Changes

Cohort / File(s)	Summary
Changeset Documentation .changeset/moody-wings-type.md	New changeset file documenting a patch release for @tanstack/ai-devtools-core related to theme handling improvements.
Component Theme Support packages/typescript/ai-devtools/src/components/Shell.tsx	Modified Devtools component to accept DevtoolProps with a theme property. Component now wraps content with ThemeContextProvider instead of rendering AIProvider directly, enabling theme propagation through context.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A theme now flows through context bright,
No more mismatches, colors right!
The wrapper dances with the theme,
Making devtools shine and gleam,
One small patch to set things free! 🎨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is minimal and does not follow the required template structure. It lacks the 'Changes' section details, checklist items, and release impact information.	Fill in the 'Changes' section with details about the theme extraction, complete the checklist items, and confirm the changeset was generated.
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 (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Extract devtools theme' directly summarizes the main change: moving the devtools theme into a component to prevent theme mismatches.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch extract-devtools-theme

---

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 and usage tips.}

[github-actions]

🚀 Changeset Version Preview

1 package(s) bumped directly, 3 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
@tanstack/ai-devtools-core	0.3.16 → 0.3.17	Changeset
@tanstack/preact-ai-devtools	0.1.20 → 0.1.21	Dependent
@tanstack/react-ai-devtools	0.2.20 → 0.2.21	Dependent
@tanstack/solid-ai-devtools	0.2.20 → 0.2.21	Dependent

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 233d888

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

---

☁️ Nx Cloud last updated this comment at 2026-04-06 19:55:27 UTC

[pkg-pr-new]

Open in StackBlitz

@tanstack/ai

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

@tanstack/ai-anthropic

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

@tanstack/ai-client

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

@tanstack/ai-code-mode

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

@tanstack/ai-code-mode-skills

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

@tanstack/ai-devtools-core

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

@tanstack/ai-elevenlabs

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

@tanstack/ai-event-client

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

@tanstack/ai-fal

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

@tanstack/ai-gemini

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

@tanstack/ai-grok

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

@tanstack/ai-groq

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

@tanstack/ai-isolate-cloudflare

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

@tanstack/ai-isolate-node

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

@tanstack/ai-isolate-quickjs

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

@tanstack/ai-ollama

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

@tanstack/ai-openai

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

@tanstack/ai-openrouter

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

@tanstack/ai-preact

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

@tanstack/ai-react

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

@tanstack/ai-react-ui

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

@tanstack/ai-solid

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

@tanstack/ai-solid-ui

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

@tanstack/ai-svelte

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

@tanstack/ai-vue

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

@tanstack/ai-vue-ui

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

@tanstack/preact-ai-devtools

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

@tanstack/react-ai-devtools

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

@tanstack/solid-ai-devtools

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

commit: 233d888

[harry-whorlow]

closes #418

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.changeset/moody-wings-type.md:
- Line 5: Update the changeset description by correcting the typo "miss-match"
to "mismatch" in the changeset text (the sentence "Moves devtools theme to the
component to avoid theme miss-match."). Replace only the hyphenated misspelling
so the final sentence reads "Moves devtools theme to the component to avoid
theme mismatch."

🪄 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

Run ID: d2a95bed-a45f-4ef4-9105-8ba14559d38b

📥 Commits

Reviewing files that changed from the base of the PR and between 8b1366e and 233d888.

📒 Files selected for processing (2)

• .changeset/moody-wings-type.md
• packages/typescript/ai-devtools/src/components/Shell.tsx