docs: use tsx code fences for JSX examples

docs/adapters/elevenlabs.md

@@ -78,7 +78,7 @@ const token = await realtimeToken({
 
 ### React (useRealtimeChat)
 
-```typescript
+```tsx
 import { useRealtimeChat } from '@tanstack/ai-react'
 import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs'
 

docs/api/ai-preact.md

@@ -24,7 +24,7 @@ npm install @tanstack/ai-preact
 
 Main hook for managing chat state in Preact with full type safety.
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
 import { 
   clientTools, 
@@ -119,7 +119,7 @@ import {
 
 ## Example: Basic Chat
 
-```typescript
+```tsx
 import { useState } from "preact/hooks";
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
 
@@ -177,7 +177,7 @@ export function Chat() {
 
 ## Example: Tool Approval
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
 
 export function ChatWithApproval() {
@@ -230,7 +230,7 @@ export function ChatWithApproval() {
 
 ## Example: Client Tools with Type Safety
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-preact";
 import { 
   clientTools, 

docs/api/ai-react.md

@@ -30,7 +30,7 @@ npm install @tanstack/ai-react
 
 Main hook for managing chat state in React with full type safety.
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 import { 
   clientTools, 
@@ -144,7 +144,7 @@ For error narrowing, import `UnsupportedResponseStreamError` and
 
 ## Example: Basic Chat
 
-```typescript
+```tsx
 import { useState } from "react";
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 
@@ -202,7 +202,7 @@ export function Chat() {
 
 ## Example: Tool Approval
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 
 export function ChatWithApproval() {
@@ -255,7 +255,7 @@ export function ChatWithApproval() {
 
 ## Example: Client Tools with Type Safety
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 import { 
   clientTools, 

docs/api/ai-solid.md

@@ -25,7 +25,7 @@ npm install @tanstack/ai-solid
 
 Main primitive for managing chat state in SolidJS with full type safety.
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
 import { 
   clientTools, 
@@ -122,7 +122,7 @@ import {
 
 ## Example: Basic Chat
 
-```typescript
+```tsx
 import { createSignal, For } from "solid-js";
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
 
@@ -184,7 +184,7 @@ export function Chat() {
 
 ## Example: Tool Approval
 
-```typescript
+```tsx
 import { For, Show } from "solid-js";
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
 
@@ -241,7 +241,7 @@ export function ChatWithApproval() {
 
 ## Example: Client Tools with Type Safety
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-solid";
 import { 
   clientTools, 

docs/code-mode/client-integration.md

@@ -93,7 +93,7 @@ Events are keyed by `toolCallId` so each `execute_typescript` call gets its own
 
 When rendering messages, check for `execute_typescript` tool calls and display their events:
 
-```typescript
+```tsx
 function MessageList({
   messages,
   toolCallEvents,
@@ -142,7 +142,7 @@ function MessageList({
 
 Here's a complete `CodeExecutionPanel` component that shows the generated code, live event stream, and final result:
 
-```typescript
+```tsx
 function CodeExecutionPanel({
   code,
   events,

docs/getting-started/quick-start.md

@@ -142,7 +142,7 @@ export async function POST(request: Request) {
 
 To use the chat API from your React frontend, create a `Chat` component:
 
-```typescript
+```tsx
 // components/Chat.tsx
 import { useState } from "react";
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";

docs/media/realtime-chat.md

@@ -58,7 +58,7 @@ const getRealtimeToken = createServerFn({ method: 'POST' })
 
 ### 2. Connect from the Client (React)
 
-```typescript
+```tsx
 import { useRealtimeChat } from '@tanstack/ai-react'
 import { openaiRealtime } from '@tanstack/ai-openai'
 
@@ -194,7 +194,7 @@ const { startListening, stopListening, vadMode, setVADMode } = useRealtimeChat({
 
 With `manual` VAD mode, use push-to-talk style interactions:
 
-```typescript
+```tsx
 <button onMouseDown={startListening} onMouseUp={stopListening}>
   Hold to talk
 </button>
@@ -283,13 +283,13 @@ The `inputLevel` and `outputLevel` values update on every animation frame while
 
 **Simple level meter:**
 
-```typescript
+```tsx
 <div style={{ width: `${inputLevel * 100}%`, height: 4, background: 'green' }} />
 ```
 
 **Pulsing audio indicator:**
 
-```typescript
+```tsx
 function AudioIndicator({ level }: { level: number }) {
   return (
     <div

docs/migration/migration-from-vercel-ai.md

@@ -271,7 +271,7 @@ const stream = chat({
 
 #### Before (Vercel AI SDK v5+)
 
-```typescript
+```tsx
 import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport } from 'ai'
 import { useState } from 'react'
@@ -309,7 +309,7 @@ export function Chat() {
 
 #### After (TanStack AI)
 
-```typescript
+```tsx
 import { useState } from 'react'
 import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
 
@@ -442,7 +442,7 @@ type ToolResultState = 'streaming' | 'complete' | 'error'
 
 #### Before (Vercel AI SDK)
 
-```typescript
+```tsx
 {messages.map((m) => (
   <div key={m.id}>
     {m.role}: {m.content}
@@ -457,7 +457,7 @@ type ToolResultState = 'streaming' | 'complete' | 'error'
 
 #### After (TanStack AI)
 
-```typescript
+```tsx
 {messages.map((message) => (
   <div key={message.id}>
     {message.role}:{' '}
@@ -634,7 +634,7 @@ const { messages, addToolApprovalResponse } = useChat({
 
 #### After (TanStack AI)
 
-```typescript
+```tsx
 // Built-in approval support
 const bookFlightDef = toolDefinition({
   name: 'bookFlight',
@@ -1316,7 +1316,7 @@ Vercel's `maxRetries` / `timeout` options have no direct `chat()` equivalent. Us
 
 ### Before (Vercel AI SDK v5+)
 
-```typescript
+```tsx
 // server/api/chat.ts
 import { streamText, tool, convertToModelMessages } from 'ai'
 import { openai } from '@ai-sdk/openai'
@@ -1383,7 +1383,7 @@ export function Chat() {
 
 ### After (TanStack AI)
 
-```typescript
+```tsx
 // server/api/chat.ts
 import { chat, toServerSentEventsResponse, toolDefinition } from '@tanstack/ai'
 import { openaiText } from '@tanstack/ai-openai'

docs/tools/client-tools.md

@@ -122,7 +122,7 @@ export async function POST(request: Request) {
 
 Create client implementations with automatic execution and full type safety:
 
-```typescript
+```tsx
 // app/chat.tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 import { 
@@ -277,7 +277,7 @@ A `tool-call` part moves through a small set of observable `ToolCallState` value
 
 The `ToolCallState` union includes a `complete` value, but the runtime never transitions a tool-call part to it — a finished call settles at `input-complete`. Once the tool runs, the result appears two ways: `part.output` becomes populated on the tool-call part, and a sibling `tool-result` part is emitted whose own `state` is `complete` or `error` (the `error` case carries `part.error`). Use the tool-call states for loading/streaming progress and the tool-result part for final success/error feedback.
 
-```typescript
+```tsx
 import type { ToolCallPart } from "@tanstack/ai-client";
 
 function ToolCallDisplay({ part }: { part: ToolCallPart }) {

docs/tools/tool-approval.md

@@ -89,7 +89,7 @@ export async function POST(request: Request) {
 
 The client receives approval requests and can respond:
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 
 function ChatComponent() {
@@ -148,7 +148,7 @@ function ChatComponent() {
 
 Here's a more complete approval UI component:
 
-```typescript
+```tsx
 import type { ToolCallPart } from "@tanstack/ai-client";
 
 function ApprovalPrompt({
@@ -195,7 +195,7 @@ function ApprovalPrompt({
 
 Wire it up from your message renderer. Note the `id` you pass is the **approval id** (`part.approval.id`), not the tool call id:
 
-```typescript
+```tsx
 {part.type === "tool-call" &&
   part.state === "approval-requested" &&
   part.approval && (

docs/tools/tool-architecture.md

@@ -98,7 +98,7 @@ export async function POST(request: Request) {
 
 **Client (React Component):**
 
-```typescript
+```tsx
 import { useState } from "react";
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 
@@ -180,7 +180,7 @@ stateDiagram-v2
 
 ### Monitoring Tool States in React
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 import { clientTools, createChatClientOptions } from "@tanstack/ai-client";
 import { getWeather, sendEmail } from "./tools";
@@ -285,7 +285,7 @@ const sendEmail = sendEmailDef.server(async ({ to, subject, body }) => {
 
 **Handle approval in client:**
 
-```typescript
+```tsx
 const { messages, addToolApprovalResponse } = useChat({
   connection: fetchServerSentEvents("/api/chat"),
 });

docs/tools/tools.md

@@ -217,7 +217,7 @@ export async function POST(request: Request) {
 
 ### Client-Side with Type Safety
 
-```typescript
+```tsx
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
 import { 
   clientTools,