docs: use tsx code fences for JSX examples

[AlemTuzlak]

What

Re-fences JSX code examples that were mislabeled as TypeScript so editors and the docs site highlight them correctly.

36 code blocks across 12 doc pages contain JSX (React / Solid / Preact components, return <div>…, <Component … />, etc.) but were fenced as ```typescript. They're now fenced as ```tsx.

Note on the fence language

The request was about ```ts → ```tsx, but a scan turned up zero ```ts blocks containing JSX — every mislabeled JSX block was tagged ```typescript. So this PR converts those typescript JSX blocks to tsx, which is the real fix the request was after.

Files touched

• docs/adapters/elevenlabs.md
• docs/api/ai-preact.md, docs/api/ai-react.md, docs/api/ai-solid.md
• docs/code-mode/client-integration.md
• docs/getting-started/quick-start.md
• docs/media/realtime-chat.md
• docs/migration/migration-from-vercel-ai.md
• docs/tools/client-tools.md, docs/tools/tool-approval.md, docs/tools/tool-architecture.md, docs/tools/tools.md

How

Detected blocks by JSX signals (closing tags </…>, self-closing />, or JSX element lines) — TS generics produce neither </ nor />, so there are no false positives. Only the opening fence line was changed in each case.

Verification

• Diff is exactly 36 typescript → tsx fence swaps and nothing else (36 insertions / 36 deletions).
• pnpm test:docs → ✅ no broken links.

Docs-only change — no changeset.

Summary by CodeRabbit

• Documentation
  • Updated code fence language identifiers from typescript to tsx across multiple documentation files for improved syntax highlighting of React and JSX examples.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ece0fb8d-da2e-4031-bc0b-0f695286fa55

📥 Commits

Reviewing files that changed from the base of the PR and between 343e76d and 5be9ce3.

📒 Files selected for processing (12)

• docs/adapters/elevenlabs.md
• docs/api/ai-preact.md
• docs/api/ai-react.md
• docs/api/ai-solid.md
• docs/code-mode/client-integration.md
• docs/getting-started/quick-start.md
• docs/media/realtime-chat.md
• docs/migration/migration-from-vercel-ai.md
• docs/tools/client-tools.md
• docs/tools/tool-approval.md
• docs/tools/tool-architecture.md
• docs/tools/tools.md

---

📝 Walkthrough

Walkthrough

This pull request updates Markdown code fence language tags from typescript to tsx across 12 documentation files to accurately reflect the JSX and React code examples. No example code logic or content is altered—only the syntax highlighting metadata is changed.

Changes

Code fence language tag standardization

Layer / File(s)

Summary

Update documentation code fence tags from typescript to tsx docs/adapters/elevenlabs.md, docs/api/ai-preact.md, docs/api/ai-react.md, docs/api/ai-solid.md, docs/code-mode/client-integration.md, docs/getting-started/quick-start.md, docs/media/realtime-chat.md, docs/migration/migration-from-vercel-ai.md, docs/tools/client-tools.md, docs/tools/tool-approval.md, docs/tools/tool-architecture.md, docs/tools/tools.md

Code fence language identifiers are updated from typescript to tsx for React, JSX, and client-side component examples throughout API documentation, guides, and migration examples. This improves syntax highlighting accuracy without changing example logic or content.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• tombeckenham
• schiller-manuel

Poem

🐰 A documentation hop so fine,
With TSX fences in a line,
No logic changed, just syntax bright,
React examples now highlight!
The docs now gleam in proper dress. 📚✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: updating code fence syntax from 'typescript' to 'tsx' for JSX examples in documentation.
Description check	✅ Passed	The description fully addresses the template's requirements: it clearly explains what changes were made and why, provides verification details, and correctly identifies this as a docs-only change requiring no changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/tsx-code-fences

---

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 5be9ce3

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

---

☁️ Nx Cloud last updated this comment at 2026-06-05 10:28:42 UTC

[github-actions]

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

[pkg-pr-new]

Open in StackBlitz

@tanstack/ai

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

@tanstack/ai-anthropic

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

@tanstack/ai-client

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

@tanstack/ai-code-mode

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

@tanstack/ai-code-mode-skills

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

@tanstack/ai-devtools-core

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

@tanstack/ai-elevenlabs

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

@tanstack/ai-event-client

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

@tanstack/ai-fal

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

@tanstack/ai-gemini

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

@tanstack/ai-grok

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

@tanstack/ai-groq

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

@tanstack/ai-isolate-cloudflare

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

@tanstack/ai-isolate-node

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

@tanstack/ai-isolate-quickjs

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

@tanstack/ai-mcp

npm i https://pkg.pr.new/@tanstack/ai-mcp@710

@tanstack/ai-ollama

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

@tanstack/ai-openai

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

@tanstack/ai-openrouter

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

@tanstack/ai-preact

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

@tanstack/ai-react

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

@tanstack/ai-react-ui

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

@tanstack/ai-solid

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

@tanstack/ai-solid-ui

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

@tanstack/ai-svelte

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

@tanstack/ai-utils

npm i https://pkg.pr.new/@tanstack/ai-utils@710

@tanstack/ai-vue

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

@tanstack/ai-vue-ui

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

@tanstack/openai-base

npm i https://pkg.pr.new/@tanstack/openai-base@710

@tanstack/preact-ai-devtools

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

@tanstack/react-ai-devtools

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

@tanstack/solid-ai-devtools

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

commit: 5be9ce3