Add preact devtools #204
Add preact devtools #204
Conversation
📝 WalkthroughWalkthroughAdds a new Changes
Sequence Diagram(s)sequenceDiagram
participant Host as Devtools Host
participant Index as preact-ai-devtools/index
participant Panel as AiDevtoolsPanel
participant Core as AiDevtoolsCore
participant Plugin as aiDevtoolsPlugin
Host->>Index: require/import package
Index->>Index: if NODE_ENV==="production" select production exports else select dev exports
Index->>Panel: provide selected Panel component
Host->>Plugin: register plugin (aiDevtoolsPlugin or no-op)
Panel->>Core: render and interact with AiDevtoolsCore
Core-->>Panel: provide UI/state for devtools
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
JoviDeCroock
force-pushed
the
preact-devtools
branch
from
3d9bd38 to
57440b4
Compare
|
View your CI Pipeline Execution ↗ for commit 9bc04b0
☁️ Nx Cloud last updated this comment at |
@tanstack/ai
@tanstack/ai-anthropic
@tanstack/ai-client
@tanstack/ai-devtools-core
@tanstack/ai-gemini
@tanstack/ai-grok
@tanstack/ai-ollama
@tanstack/ai-openai
@tanstack/ai-preact
@tanstack/ai-react
@tanstack/ai-react-ui
@tanstack/ai-solid
@tanstack/ai-solid-ui
@tanstack/ai-svelte
@tanstack/ai-vue
@tanstack/ai-vue-ui
@tanstack/preact-ai-devtools
@tanstack/react-ai-devtools
@tanstack/solid-ai-devtools
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Fix all issues with AI Agents 🤖
In @packages/typescript/preact-ai-devtools/package.json:
- Around line 8-12: The repository.directory value is pointing to the wrong
package; update the "repository.directory" field in package.json (in the package
for preact-ai-devtools) to the correct package path
"packages/typescript/preact-ai-devtools" so monorepo tooling and repo links
resolve to this package instead of "packages/typescript/ai".
In @packages/typescript/preact-ai-devtools/README.md:
- Line 12: Replace hard tab characters with spaces in the README markdown where
the badge/image and following lines are indented; specifically remove any '\t'
characters around the HTML img tag line containing the shields.io badge (the
line with
src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star")
and the subsequent indented lines (previously lines 23-25) and re-indent them
using consistent spaces (e.g., two spaces) so the file contains only space
characters for indentation.
- Line 2: The header image tag (<img src="./media/header_ai.png">) is missing
alt text; update the <img> element to include an appropriate alt attribute (for
example alt="preact-ai-devtools header" or alt="AI DevTools header image") so
the README image is accessible to screen readers and improves accessibility.
- Around line 8-16: Replace the incorrect package/repo identifiers in the README
badges: change any occurrence of "@tanstack/ai" in the npm and bundlephobia
badge URLs to "@tanstack/preact-ai-devtools" and update the GitHub badge target
from "TanStack/ai" to the correct repo "TanStack/preact-ai-devtools" so the npm
download, bundlephobia size, and GitHub star badges reflect this package.
In @packages/typescript/preact-ai-devtools/src/index.ts:
- Around line 4-12: Add documentation noting the explicit production subpath
export as an alternative to NODE_ENV checks: explain that instead of relying on
the conditional exports (AiDevtoolsPanel and aiDevtoolsPlugin) which use
process.env.NODE_ENV, users can import from the provided './production' subpath
(e.g., @tanstack/preact-ai-devtools/production) to always get production
implementations and reduce bundle size; update README/examples to show both
import patterns and recommend the './production' path for bundler-safe builds.
In @packages/typescript/preact-ai-devtools/vitest.config.ts:
- Around line 1-7: The vitest.config.ts file currently exports a defineConfig
with a test block containing only watch: false which unintentionally overrides
the full test setup in vite.config.ts; either delete this vitest.config.ts
entirely or replace its contents by copying the full test configuration from
vite.config.ts into vitest.config.ts (preserving defineConfig and the test
object) so that globals, environment, include patterns and coverage settings are
present and no longer hidden by the minimal test: { watch: false } override.
🧹 Nitpick comments (1)
packages/typescript/preact-ai-devtools/src/plugin.tsx (1)
4-9: Consider makingdefaultOpenconfigurable.The devtools panel is set to
defaultOpen: true, which means it will be open by default when the app loads. While this may be convenient for active debugging, some developers might prefer it closed initially to reduce visual clutter. Consider making this configurable via an options parameter.🔎 Example implementation
-const [aiDevtoolsPlugin, aiDevtoolsNoOpPlugin] = createPreactPlugin({ +export const createAiDevtoolsPlugin = (options?: { defaultOpen?: boolean }) => { + const [plugin, noOpPlugin] = createPreactPlugin({ Component: AiDevtoolsPanel, name: 'TanStack AI', id: 'tanstack-ai', - defaultOpen: true, + defaultOpen: options?.defaultOpen ?? false, }) + return plugin +} + +// Convenience export with default behavior +const [aiDevtoolsPlugin, aiDevtoolsNoOpPlugin] = createPreactPlugin({ + Component: AiDevtoolsPanel, + name: 'TanStack AI', + id: 'tanstack-ai', + defaultOpen: false, +})
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
.changeset/slow-falcons-leave.mddocs/getting-started/devtools.mdpackages/typescript/preact-ai-devtools/CHANGELOG.mdpackages/typescript/preact-ai-devtools/README.mdpackages/typescript/preact-ai-devtools/package.jsonpackages/typescript/preact-ai-devtools/src/AiDevtools.tsxpackages/typescript/preact-ai-devtools/src/index.tspackages/typescript/preact-ai-devtools/src/plugin.tsxpackages/typescript/preact-ai-devtools/src/production.tspackages/typescript/preact-ai-devtools/tsconfig.jsonpackages/typescript/preact-ai-devtools/vite.config.tspackages/typescript/preact-ai-devtools/vitest.config.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from/adapterssubpath rather than monolithic adapters
Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions withtoolDefinition()and Zod schema inference
Implement isomorphic tool system usingtoolDefinition()with.server()and.client()implementations for dual-environment execution
Use type-safe per-model configuration with provider options typed based on selected model to ensure compile-time safety
Implement stream processing with StreamProcessor for handling chunked responses and support partial JSON parsing for streaming AI responses
Files:
packages/typescript/preact-ai-devtools/src/plugin.tsxpackages/typescript/preact-ai-devtools/src/production.tspackages/typescript/preact-ai-devtools/src/index.tspackages/typescript/preact-ai-devtools/src/AiDevtools.tsxpackages/typescript/preact-ai-devtools/vite.config.tspackages/typescript/preact-ai-devtools/vitest.config.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for function and variable names throughout the codebase
Files:
packages/typescript/preact-ai-devtools/src/plugin.tsxpackages/typescript/preact-ai-devtools/src/production.tspackages/typescript/preact-ai-devtools/src/index.tspackages/typescript/preact-ai-devtools/src/AiDevtools.tsxpackages/typescript/preact-ai-devtools/vite.config.tspackages/typescript/preact-ai-devtools/vitest.config.ts
packages/typescript/*/src/index.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Export tree-shakeable adapters with clear subpath exports in package.json (e.g.,
@tanstack/ai/adapters,@tanstack/ai-openai/adapters) to minimize bundle size
Files:
packages/typescript/preact-ai-devtools/src/index.ts
🧠 Learnings (12)
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
packages/typescript/preact-ai-devtools/src/plugin.tsxpackages/typescript/preact-ai-devtools/src/production.tspackages/typescript/preact-ai-devtools/src/index.tspackages/typescript/preact-ai-devtools/README.mdpackages/typescript/preact-ai-devtools/CHANGELOG.mdpackages/typescript/preact-ai-devtools/src/AiDevtools.tsxpackages/typescript/preact-ai-devtools/package.jsonpackages/typescript/preact-ai-devtools/tsconfig.jsonpackages/typescript/preact-ai-devtools/vite.config.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/adapters/*.ts : Create individual adapter implementations for each provider capability (text, embed, summarize, image) with separate exports to enable tree-shaking
Applied to files:
packages/typescript/preact-ai-devtools/src/production.tspackages/typescript/preact-ai-devtools/src/index.tspackages/typescript/preact-ai-devtools/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from `/adapters` subpath rather than monolithic adapters
Applied to files:
packages/typescript/preact-ai-devtools/src/production.tspackages/typescript/preact-ai-devtools/src/index.tspackages/typescript/preact-ai-devtools/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Implement isomorphic tool system using `toolDefinition()` with `.server()` and `.client()` implementations for dual-environment execution
Applied to files:
packages/typescript/preact-ai-devtools/src/index.tspackages/typescript/preact-ai-devtools/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
Applied to files:
packages/typescript/preact-ai-devtools/README.mdpackages/typescript/preact-ai-devtools/CHANGELOG.mddocs/getting-started/devtools.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/*/package.json : Use `workspace:*` protocol for internal package dependencies in package.json (e.g., `"tanstack/ai": "workspace:*"`)
Applied to files:
packages/typescript/preact-ai-devtools/package.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/model-meta.ts : Maintain model metadata files that define provider options and capabilities per model for per-model type safety
Applied to files:
packages/typescript/preact-ai-devtools/package.jsonpackages/typescript/preact-ai-devtools/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions with `toolDefinition()` and Zod schema inference
Applied to files:
packages/typescript/preact-ai-devtools/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to .eslintrc* : Use ESLint with custom TanStack config for linting all TypeScript and JavaScript files
Applied to files:
packages/typescript/preact-ai-devtools/tsconfig.jsonpackages/typescript/preact-ai-devtools/vite.config.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to .prettierrc* : Use Prettier for code formatting with project-configured rules
Applied to files:
packages/typescript/preact-ai-devtools/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.test.ts : Write unit tests using Vitest alongside source files with `.test.ts` naming convention
Applied to files:
packages/typescript/preact-ai-devtools/vite.config.tspackages/typescript/preact-ai-devtools/vitest.config.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Create changesets with `pnpm changeset` before making changes to prepare for release version bumping and publishing
Applied to files:
.changeset/slow-falcons-leave.md
🪛 markdownlint-cli2 (0.18.1)
packages/typescript/preact-ai-devtools/README.md
2-2: Images should have alternate text (alt text)
(MD045, no-alt-text)
12-12: Hard tabs
Column: 1
(MD010, no-hard-tabs)
23-23: Hard tabs
Column: 1
(MD010, no-hard-tabs)
24-24: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 1
(MD010, no-hard-tabs)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (9)
packages/typescript/preact-ai-devtools/CHANGELOG.md (1)
1-1: Initial changelog structure is appropriate for changeset-based releases.The minimal header is the expected format for a new package in a changeset-based monorepo. The changeset entry (in
.changeset/slow-falcons-leave.md) will populate this on release.docs/getting-started/devtools.md (1)
27-30: Documentation addition is consistent and clear.The Preact installation instructions follow the established pattern used for React and SolidJS, maintaining documentation consistency and providing users with a straightforward setup path.
.changeset/slow-falcons-leave.md (1)
1-5: Changeset entry is correctly formatted.The changeset follows the proper format with correct package name, minor version bump, and clear description for the initial release. This aligns with the changeset-based release workflow.
packages/typescript/preact-ai-devtools/tsconfig.json (1)
1-11: LGTM!The TypeScript configuration is correctly set up for a Preact project with appropriate JSX settings (
jsx: preserve,jsxFactory: h,jsxFragmentFactory: Fragment) and modern module resolution. The strict null checks enhance type safety.packages/typescript/preact-ai-devtools/src/production.ts (1)
1-5: LGTM!The production entry point cleanly re-exports the essential public API (panel component, initialization type, and plugin). This follows the tree-shakeable export pattern and allows users to explicitly opt into production builds via the
/productionsubpath as documented in the README.packages/typescript/preact-ai-devtools/vite.config.ts (1)
1-36: LGTM!The Vite configuration is well-structured with appropriate test settings and entry points that align with the package.json exports.
packages/typescript/preact-ai-devtools/package.json (2)
30-45: LGTM!The exports configuration properly defines both the default entry point and a dedicated production export path, enabling consumers to explicitly import production-safe implementations when needed.
50-61: LGTM!Dependencies are properly configured with
workspace:*for internal packages and appropriate peer dependency on Preact.packages/typescript/preact-ai-devtools/src/AiDevtools.tsx (1)
1-9: LGTM!The implementation cleanly leverages the
createPreactPanelutility to generate both the active and no-op panel variants, with proper TypeScript typing through interface extension.
| export const AiDevtoolsPanel = | ||
| process.env.NODE_ENV !== 'development' | ||
| ? Devtools.AiDevtoolsPanelNoOp | ||
| : Devtools.AiDevtoolsPanel | ||
|
|
||
| export const aiDevtoolsPlugin = | ||
| process.env.NODE_ENV !== 'development' | ||
| ? plugin.aiDevtoolsNoOpPlugin | ||
| : plugin.aiDevtoolsPlugin |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, verify the file exists and check its contents
ls -la packages/typescript/preact-ai-devtools/src/
cat -n packages/typescript/preact-ai-devtools/src/index.tsRepository: TanStack/ai
Length of output: 914
🏁 Script executed:
# Check the package.json for build configuration and exports
cat packages/typescript/preact-ai-devtools/package.jsonRepository: TanStack/ai
Length of output: 1588
🏁 Script executed:
# Check if dist directory exists and what's in it
ls -la packages/typescript/preact-ai-devtools/dist/ 2>/dev/null || echo "dist/ does not exist yet"Repository: TanStack/ai
Length of output: 79
🏁 Script executed:
# Look for the Nx/build configuration files
fd -e "tsconfig.json" -e "vite.config.ts" -e "vite.config.js" packages/typescript/preact-ai-devtools/ 2>/dev/null | head -20Repository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Check production.ts which appears to be an alternative export
cat -n packages/typescript/preact-ai-devtools/src/production.tsRepository: TanStack/ai
Length of output: 239
🏁 Script executed:
# Check AiDevtools.tsx to see the NoOp implementation
cat -n packages/typescript/preact-ai-devtools/src/AiDevtools.tsxRepository: TanStack/ai
Length of output: 519
🏁 Script executed:
# Check plugin.tsx to see the NoOp implementation
cat -n packages/typescript/preact-ai-devtools/src/plugin.tsxRepository: TanStack/ai
Length of output: 467
🏁 Script executed:
# Look for Vite configuration
find packages/typescript/preact-ai-devtools -name "vite.config.*" -o -name "tsconfig.json" | xargs cat -n 2>/dev/nullRepository: TanStack/ai
Length of output: 1461
🏁 Script executed:
# Check if there's a shared Vite config at the workspace root
find . -maxdepth 3 -name "vite.config.*" | head -10Repository: TanStack/ai
Length of output: 324
🏁 Script executed:
# Find the vite-config package to understand how NODE_ENV is handled
fd -e "vite-config" -type d | head -5Repository: TanStack/ai
Length of output: 225
🏁 Script executed:
# Search for documentation or configuration about NODE_ENV handling
rg "NODE_ENV" packages/typescript/preact-ai-devtools/ -C 3Repository: TanStack/ai
Length of output: 991
🏁 Script executed:
# Check if there's a shared vite config explanation
rg "define:" . --type ts --type js -C 2 | head -30Repository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Look at how other devtools packages handle this
find packages/typescript -name "*devtools*" -type d | head -10Repository: TanStack/ai
Length of output: 201
🏁 Script executed:
# Check the ai-devtools-core to see if there's a similar pattern
cat packages/typescript/ai-devtools-core/src/index.ts 2>/dev/null | head -20Repository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Look at how tanstackViteConfig is configured - might be in a shared package
rg "tanstackViteConfig" . --type-list | head -5Repository: TanStack/ai
Length of output: 444
🏁 Script executed:
# Check the vite-config package contents
find . -path "*/vite-config/*" -name "*.ts" | head -10Repository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Search for packages that contain vite-config
ls -la packages/ | grep -i viteRepository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Check if tanstackViteConfig is exported from a package
rg "export.*tanstackViteConfig" --type ts --type jsRepository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Search for tanstackViteConfig definition or import
rg "tanstackViteConfig" --include="*.ts" --include="*.js"Repository: TanStack/ai
Length of output: 496
🏁 Script executed:
# Check node_modules or look for the package
find . -name "@tanstack" -type d | grep viteRepository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Look at package.json files to find where tanstackViteConfig comes from
rg "@tanstack/vite-config" --include="package.json"Repository: TanStack/ai
Length of output: 496
🏁 Script executed:
# Check the vite config more carefully - look at what tanstackViteConfig does
# It might be handling NODE_ENV automatically
cat -n packages/typescript/react-ai-devtools/vite.config.ts 2>/dev/null | head -50Repository: TanStack/ai
Length of output: 1102
🏁 Script executed:
# Search for how other packages handle NODE_ENV
rg "NODE_ENV" packages/typescript/ -l | head -10Repository: TanStack/ai
Length of output: 253
🏁 Script executed:
# Check the structure of another devtools package to compare
cat packages/typescript/react-ai-devtools/src/index.ts 2>/dev/nullRepository: TanStack/ai
Length of output: 478
🏁 Script executed:
# Look at the learnings to understand the recommended pattern
# Check if there are any adapter patterns mentioned
rg "adapter" packages/typescript/preact-ai-devtools/ -iRepository: TanStack/ai
Length of output: 37
🏁 Script executed:
# Verify the package exports are correctly defined
cat packages/typescript/preact-ai-devtools/package.json | jq '.exports'Repository: TanStack/ai
Length of output: 346
The environment-based export pattern is correct, but consider documenting the explicit ./production subpath export as the more reliable alternative for users prioritizing bundle size.
The conditional process.env.NODE_ENV checks are used consistently across all devtools packages (react-ai-devtools, solid-ai-devtools) and work correctly with Vite's configuration. However, the package already provides ./production.ts as an alternative entry point that directly exports production implementations without relying on NODE_ENV detection. This explicit export (@tanstack/preact-ai-devtools/production) is more reliable for users who want to guarantee their bundler eliminates development code, as it bypasses the NODE_ENV pattern entirely. Consider documenting this option in your package README or examples.
🤖 Prompt for AI Agents
In @packages/typescript/preact-ai-devtools/src/index.ts around lines 4-12, Add
documentation noting the explicit production subpath export as an alternative to
NODE_ENV checks: explain that instead of relying on the conditional exports
(AiDevtoolsPanel and aiDevtoolsPlugin) which use process.env.NODE_ENV, users can
import from the provided './production' subpath (e.g.,
@tanstack/preact-ai-devtools/production) to always get production
implementations and reduce bundle size; update README/examples to show both
import patterns and recommend the './production' path for bundler-safe builds.
| import { defineConfig } from 'vitest/config' | ||
|
|
||
| export default defineConfig({ | ||
| test: { | ||
| watch: false, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Compare Vitest configurations in both files
echo "=== vite.config.ts ==="
cat packages/typescript/preact-ai-devtools/vite.config.ts
echo -e "\n=== vitest.config.ts ==="
cat packages/typescript/preact-ai-devtools/vitest.config.ts
echo -e "\n=== Check for other TanStack packages with similar pattern ==="
fd -t f "vitest.config.ts" packages/typescript/Repository: TanStack/ai
Length of output: 1567
🏁 Script executed:
#!/bin/bash
# Sample vitest.config.ts files from other packages
echo "=== ai-devtools vitest.config.ts ==="
cat packages/typescript/ai-devtools/vitest.config.ts
echo -e "\n=== ai-openai vitest.config.ts ==="
cat packages/typescript/ai-openai/vitest.config.ts
echo -e "\n=== ai-react vitest.config.ts ==="
cat packages/typescript/ai-react/vitest.config.ts
echo -e "\n=== Check corresponding vite.config.ts for ai-openai ==="
cat packages/typescript/ai-openai/vite.config.ts | head -20Repository: TanStack/ai
Length of output: 2174
Remove redundant vitest.config.ts that overrides test configuration.
When both vite.config.ts and vitest.config.ts exist, Vitest uses the .vitest.config.ts file with precedence. The current vitest.config.ts with only watch: false would override the comprehensive test configuration in vite.config.ts (globals, environment, include patterns, coverage settings), causing the test setup to break when running vitest commands.
This pattern differs from other TanStack packages (ai-devtools, ai-openai, ai-react, etc.) which consolidate full test configuration into vitest.config.ts. Either move the test configuration from vite.config.ts to vitest.config.ts to match the pattern across packages, or remove vitest.config.ts entirely if keeping configuration in vite.config.ts.
🤖 Prompt for AI Agents
In @packages/typescript/preact-ai-devtools/vitest.config.ts around lines 1-7,
The vitest.config.ts file currently exports a defineConfig with a test block
containing only watch: false which unintentionally overrides the full test setup
in vite.config.ts; either delete this vitest.config.ts entirely or replace its
contents by copying the full test configuration from vite.config.ts into
vitest.config.ts (preserving defineConfig and the test object) so that globals,
environment, include patterns and coverage settings are present and no longer
hidden by the minimal test: { watch: false } override.
|
@JoviDeCroock on a scale of 1 to 10 how easy was it to add devtools? |
|
@AlemTuzlak It was pretty convenient in the code itself, however the coderabbit flow is very noisy and the current CI failure is mysterious EDIT: ah I had to click the nx link |
JoviDeCroock
force-pushed
the
preact-devtools
branch
from
ef92a60 to
611228e
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @packages/typescript/preact-ai-devtools/package.json:
- Around line 8-12: The package.json for preact-ai-devtools has an incorrect
repository.directory value; update the "repository.directory" field in this
package.json to the correct package directory
("packages/typescript/preact-ai-devtools") so monorepo tooling and repo links
point to the right package.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (1)
packages/typescript/preact-ai-devtools/package.json
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
packages/typescript/preact-ai-devtools/package.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/*/package.json : Use `workspace:*` protocol for internal package dependencies in package.json (e.g., `"tanstack/ai": "workspace:*"`)
Applied to files:
packages/typescript/preact-ai-devtools/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test
🔇 Additional comments (2)
packages/typescript/preact-ai-devtools/package.json (2)
30-44: Well-structured exports with production subpath.The exports configuration properly supports tree-shaking with a dedicated production entry point, aligning with TanStack's patterns for optimized bundle sizes.
54-57: vitest is correctly available from the workspace root devDependencies. Since this package includes @vitest/coverage-v8, the reliance on the workspace-level vitest is intentional and follows standard monorepo practices.
|
@JoviDeCroock hopefully I tagged the correct person this time, you can run pnpm run test locally on the root of the repo and it will run the same tests as in CI, you ahve 1 failing one which you can fix by running: other than that please bump the @tanstack/devtools-utils to 0.2.3 as I've added some bug fixes yesterday! |
|
@AlemTuzlak Added the bump, the test suite disliked having 2 versions in the package.json so I bumped solid, core and react as well with the accompanying changeset |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @.changeset/every-keys-beg.md:
- Around line 1-7: The changeset is missing an entry for the new package
@tanstack/preact-ai-devtools; update the changeset by adding a line for
'@tanstack/preact-ai-devtools': minor alongside the other packages and adjust
the human-readable message to clarify that package versions are being bumped
(and that the dependency @tanstack/devtools-utils is being upgraded to ^0.2.3)
so the changeset accurately reflects the new package and the dependency bump.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
.changeset/every-keys-beg.mdpackages/typescript/ai-devtools/package.jsonpackages/typescript/preact-ai-devtools/package.jsonpackages/typescript/react-ai-devtools/package.jsonpackages/typescript/solid-ai-devtools/package.json
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/typescript/preact-ai-devtools/package.json
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
packages/typescript/react-ai-devtools/package.jsonpackages/typescript/solid-ai-devtools/package.jsonpackages/typescript/ai-devtools/package.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/*/package.json : Use `workspace:*` protocol for internal package dependencies in package.json (e.g., `"tanstack/ai": "workspace:*"`)
Applied to files:
packages/typescript/react-ai-devtools/package.jsonpackages/typescript/solid-ai-devtools/package.jsonpackages/typescript/ai-devtools/package.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Create changesets with `pnpm changeset` before making changes to prepare for release version bumping and publishing
Applied to files:
.changeset/every-keys-beg.md
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (3)
packages/typescript/react-ai-devtools/package.json (1)
52-52: LGTM!The dependency bump is consistent with the coordinated upgrade across all AI Devtools packages in this PR.
packages/typescript/solid-ai-devtools/package.json (1)
51-51: LGTM!The dependency bump is consistent with the coordinated upgrade across all AI Devtools packages in this PR.
packages/typescript/ai-devtools/package.json (1)
51-51: Version 0.2.3 does not exist on NPM.The package
@tanstack/devtools-utils@^0.2.3is not available in the npm registry. The latest published version is approximately 0.1.0. This dependency will fail to install.Verify the correct version to use and update the dependency accordingly.
⛔ Skipped due to learnings
Learnt from: CR Repo: TanStack/ai PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-12-13T17:09:09.794Z Learning: Applies to .eslintrc* : Use ESLint with custom TanStack config for linting all TypeScript and JavaScript files
| const ai = useAIProvider({ | ||
| // your config | ||
| plugins: [aiDevtoolsPlugin()], | ||
| }) |
There was a problem hiding this comment.
this seems to be completely hallucinated
AlemTuzlak
left a comment
AlemTuzlak
left a comment
There was a problem hiding this comment.
just requires a small docs change as it hallucinated some random hooks
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In @packages/typescript/preact-ai-devtools/README.md:
- Line 12: Replace the hard tab characters on the affected lines (12 and 23–25)
with spaces to match the rest of the README's indentation style; edit the lines
containing the image badge and the subsequent lines to remove tabs and use the
file's existing space-based indentation (e.g., two spaces per indent level) so
whitespace is consistent throughout.
- Line 2: The header image tag lacks an alt attribute which hurts accessibility;
update the <img src="./media/header_ai.png" > element in README.md to include a
meaningful alt text (for example alt="AI DevTools header" or another concise
description of the image content) so screen readers can convey its purpose;
ensure the tag becomes <img src="./media/header_ai.png" alt="..."> and keep the
alt text brief and descriptive.
- Line 49: The "Read the docs →" heading is using an h3 ("###") which skips from
the existing h1; update that heading to h2 ("##") to restore proper hierarchy
and remove the stray closing </b> tag inside the anchor so the markup is valid;
target the line containing the anchor text "Read the docs →" to make these
changes.
- Around line 36-48: README currently contains generic TanStack AI SDK content
rather than docs for the preact-ai-devtools package; replace it with
package-specific documentation for @tanstack/preact-ai-devtools that includes: a
short installation section showing the npm/yarn/pnpm install command for
@tanstack/preact-ai-devtools, a minimal usage example demonstrating how to
import and mount the devtools component in a Preact app (showing import of the
devtools component and where to place it in the app tree), a concise list of
configuration options and props the devtools accepts (reference the devtools
component name used in the repo), and a “Further reading” section linking to the
full TanStack AI docs; keep content concise and focused on preact-ai-devtools so
users can quickly install and integrate the component.
- Around line 8-16: The README badges currently reference the wrong package
(@tanstack/ai); update all occurrences in the badge links and image sources to
use @tanstack/preact-ai-devtools instead so the npm, GitHub and bundlephobia
badges show correct stats for this package (replace the hrefs and the img src
URLs that include "@tanstack/ai" with "@tanstack/preact-ai-devtools" and ensure
the npm/bundlephobia URLs and badge labels reflect the preact-ai-devtools
package).
🧹 Nitpick comments (1)
package.json (1)
36-36: The script change is correct.The addition of
preact-ai-devtoolsto thecopy:readmescript is functionally correct and consistent with the pattern used for other packages.For better organization, consider grouping all framework-specific devtools packages together at the end of the script:
📋 Suggested reordering
- "copy:readme": "cp README.md packages/typescript/ai/README.md && cp README.md packages/typescript/ai-devtools/README.md && cp README.md packages/typescript/preact-ai-devtools/README.md && cp README.md packages/typescript/ai-client/README.md && cp README.md packages/typescript/ai-gemini/README.md && cp README.md packages/typescript/ai-ollama/README.md && cp README.md packages/typescript/ai-openai/README.md && cp README.md packages/typescript/ai-react/README.md && cp README.md packages/typescript/ai-react-ui/README.md && cp README.md packages/typescript/react-ai-devtools/README.md && cp README.md packages/typescript/solid-ai-devtools/README.md", + "copy:readme": "cp README.md packages/typescript/ai/README.md && cp README.md packages/typescript/ai-devtools/README.md && cp README.md packages/typescript/ai-client/README.md && cp README.md packages/typescript/ai-gemini/README.md && cp README.md packages/typescript/ai-ollama/README.md && cp README.md packages/typescript/ai-openai/README.md && cp README.md packages/typescript/ai-react/README.md && cp README.md packages/typescript/ai-react-ui/README.md && cp README.md packages/typescript/react-ai-devtools/README.md && cp README.md packages/typescript/preact-ai-devtools/README.md && cp README.md packages/typescript/solid-ai-devtools/README.md",This groups
react-ai-devtools,preact-ai-devtools, andsolid-ai-devtoolstogether for easier maintenance.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
package.jsonpackages/typescript/preact-ai-devtools/README.md
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
packages/typescript/preact-ai-devtools/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/adapters/*.ts : Create individual adapter implementations for each provider capability (text, embed, summarize, image) with separate exports to enable tree-shaking
Applied to files:
packages/typescript/preact-ai-devtools/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from `/adapters` subpath rather than monolithic adapters
Applied to files:
packages/typescript/preact-ai-devtools/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/*/package.json : Use `workspace:*` protocol for internal package dependencies in package.json (e.g., `"tanstack/ai": "workspace:*"`)
Applied to files:
packages/typescript/preact-ai-devtools/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
Applied to files:
packages/typescript/preact-ai-devtools/README.md
🪛 markdownlint-cli2 (0.18.1)
packages/typescript/preact-ai-devtools/README.md
2-2: Images should have alternate text (alt text)
(MD045, no-alt-text)
12-12: Hard tabs
Column: 1
(MD010, no-hard-tabs)
23-23: Hard tabs
Column: 1
(MD010, no-hard-tabs)
24-24: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 1
(MD010, no-hard-tabs)
49-49: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
| @@ -0,0 +1,132 @@ | |||
| <div align="center"> | |||
| <img src="./media/header_ai.png" > | |||
There was a problem hiding this comment.
Add alt text to the header image.
The header image is missing alt text, which impacts accessibility for screen reader users.
♿ Proposed fix
- <img src="./media/header_ai.png" >
+ <img src="./media/header_ai.png" alt="TanStack AI Header">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <img src="./media/header_ai.png" > | |
| <img src="./media/header_ai.png" alt="TanStack AI Header"> |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
2-2: Images should have alternate text (alt text)
(MD045, no-alt-text)
🤖 Prompt for AI Agents
In @packages/typescript/preact-ai-devtools/README.md at line 2, The header image
tag lacks an alt attribute which hurts accessibility; update the <img
src="./media/header_ai.png" > element in README.md to include a meaningful alt
text (for example alt="AI DevTools header" or another concise description of the
image content) so screen readers can convey its purpose; ensure the tag becomes
<img src="./media/header_ai.png" alt="..."> and keep the alt text brief and
descriptive.
| <a href="https://npmjs.com/package/@tanstack/ai" target="\_parent"> | ||
| <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" /> | ||
| </a> | ||
| <a href="https://github.com/TanStack/ai" target="\_parent"> | ||
| <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" /> | ||
| </a> | ||
| <a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent"> | ||
| <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" /> | ||
| </a> |
There was a problem hiding this comment.
Package references are incorrect for preact-ai-devtools.
The badges reference @tanstack/ai instead of @tanstack/preact-ai-devtools. Users viewing this README on npm will see incorrect download stats and bundle size information for the devtools package.
📦 Proposed fix
-<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
- <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
+<a href="https://npmjs.com/package/@tanstack/preact-ai-devtools" target="\_parent">
+ <img alt="" src="https://img.shields.io/npm/dm/@tanstack/preact-ai-devtools.svg" />
</a>
<a href="https://github.com/TanStack/ai" target="\_parent">
<img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
</a>
-<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
- <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
+<a href="https://bundlephobia.com/result?p=@tanstack/preact-ai-devtools@latest" target="\_parent">
+ <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/preact-ai-devtools@latest" />
</a>🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
12-12: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🤖 Prompt for AI Agents
In @packages/typescript/preact-ai-devtools/README.md around lines 8 - 16, The
README badges currently reference the wrong package (@tanstack/ai); update all
occurrences in the badge links and image sources to use
@tanstack/preact-ai-devtools instead so the npm, GitHub and bundlephobia badges
show correct stats for this package (replace the hrefs and the img src URLs that
include "@tanstack/ai" with "@tanstack/preact-ai-devtools" and ensure the
npm/bundlephobia URLs and badge labels reflect the preact-ai-devtools package).
| <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" /> | ||
| </a> | ||
| <a href="https://github.com/TanStack/ai" target="\_parent"> | ||
| <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" /> |
There was a problem hiding this comment.
Replace hard tabs with spaces.
Lines 12, 23-25 contain hard tabs instead of spaces, which should be corrected for consistency with the rest of the file.
🔧 Proposed fix
<a href="https://github.com/TanStack/ai" target="\_parent">
- <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
+ <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
</a>- <a href="#badge">
- <img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
- </a>
+<a href="#badge">
+ <img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
+</a>Also applies to: 23-25
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
12-12: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🤖 Prompt for AI Agents
In @packages/typescript/preact-ai-devtools/README.md at line 12, Replace the
hard tab characters on the affected lines (12 and 23–25) with spaces to match
the rest of the README's indentation style; edit the lines containing the image
badge and the subsequent lines to remove tabs and use the file's existing
space-based indentation (e.g., two spaces per indent level) so whitespace is
consistent throughout.
| # TanStack AI | ||
|
|
||
| A powerful, type-safe AI SDK for building AI-powered applications. | ||
|
|
||
| - Provider-agnostic adapters (OpenAI, Anthropic, Gemini, Ollama, etc.) | ||
| - **Tree-shakeable adapters** - Import only what you need for smaller bundles | ||
| - **Multimodal content support** - Send images, audio, video, and documents | ||
| - **Image generation** - Generate images with OpenAI DALL-E/GPT-Image and Gemini Imagen | ||
| - Chat completion, streaming, and agent loop strategies | ||
| - Headless chat state management with adapters (SSE, HTTP stream, custom) | ||
| - Isomorphic type-safe tools with server/client execution | ||
| - **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions | ||
|
|
There was a problem hiding this comment.
README content is not specific to preact-ai-devtools.
This README contains generic TanStack AI SDK documentation instead of preact-ai-devtools specific content. Users looking for information on how to install and use the Preact devtools will not find it here.
Consider creating devtools-specific documentation that includes:
- Installation instructions for
@tanstack/preact-ai-devtools - Basic usage example showing how to integrate the devtools component in a Preact app
- Configuration options
- Link to full documentation
🤖 Prompt for AI Agents
In @packages/typescript/preact-ai-devtools/README.md around lines 36 - 48,
README currently contains generic TanStack AI SDK content rather than docs for
the preact-ai-devtools package; replace it with package-specific documentation
for @tanstack/preact-ai-devtools that includes: a short installation section
showing the npm/yarn/pnpm install command for @tanstack/preact-ai-devtools, a
minimal usage example demonstrating how to import and mount the devtools
component in a Preact app (showing import of the devtools component and where to
place it in the app tree), a concise list of configuration options and props the
devtools accepts (reference the devtools component name used in the repo), and a
“Further reading” section linking to the full TanStack AI docs; keep content
concise and focused on preact-ai-devtools so users can quickly install and
integrate the component.
| - Isomorphic type-safe tools with server/client execution | ||
| - **Enhanced integration with TanStack Start** - Share implementations between AI tools and server functions | ||
|
|
||
| ### <a href="https://tanstack.com/ai">Read the docs →</b></a> |
There was a problem hiding this comment.
Fix heading level increment.
The heading jumps from h1 (line 36) to h3, skipping h2. This violates proper heading hierarchy.
📝 Proposed fix
-### <a href="https://tanstack.com/ai">Read the docs →</b></a>
+## <a href="https://tanstack.com/ai">Read the docs →</b></a>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ### <a href="https://tanstack.com/ai">Read the docs →</b></a> | |
| ## <a href="https://tanstack.com/ai">Read the docs →</b></a> |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
49-49: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
🤖 Prompt for AI Agents
In @packages/typescript/preact-ai-devtools/README.md at line 49, The "Read the
docs →" heading is using an h3 ("###") which skips from the existing h1; update
that heading to h2 ("##") to restore proper hierarchy and remove the stray
closing </b> tag inside the anchor so the markup is valid; target the line
containing the anchor text "Read the docs →" to make these changes.
2 participants
Follow up to #180
🎯 Changes
This adds the preact-devtools integration for tanstack-ai.
Summary by CodeRabbit
New Features
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.