diff --git a/docs/adapters/elevenlabs.md b/docs/adapters/elevenlabs.md
index dab794aa5..c560b4e71 100644
--- a/docs/adapters/elevenlabs.md
+++ b/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'
 
diff --git a/docs/api/ai-preact.md b/docs/api/ai-preact.md
index a3c2390f7..8951e8e71 100644
--- a/docs/api/ai-preact.md
+++ b/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, 
diff --git a/docs/api/ai-react.md b/docs/api/ai-react.md
index d6d1e123b..e8ef2a62c 100644
--- a/docs/api/ai-react.md
+++ b/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, 
diff --git a/docs/api/ai-solid.md b/docs/api/ai-solid.md
index 6365ed5a2..20c49f089 100644
--- a/docs/api/ai-solid.md
+++ b/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, 
diff --git a/docs/code-mode/client-integration.md b/docs/code-mode/client-integration.md
index ff16d96e9..8ddc86c2f 100644
--- a/docs/code-mode/client-integration.md
+++ b/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,
diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md
index 0cccc6256..79c136ce7 100644
--- a/docs/getting-started/quick-start.md
+++ b/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";
diff --git a/docs/media/realtime-chat.md b/docs/media/realtime-chat.md
index d67eee05e..b625d5189 100644
--- a/docs/media/realtime-chat.md
+++ b/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
diff --git a/docs/migration/migration-from-vercel-ai.md b/docs/migration/migration-from-vercel-ai.md
index a17bb2a1c..9e0ff15ec 100644
--- a/docs/migration/migration-from-vercel-ai.md
+++ b/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'
diff --git a/docs/tools/client-tools.md b/docs/tools/client-tools.md
index 4cc8cc53a..4d0a17cd2 100644
--- a/docs/tools/client-tools.md
+++ b/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 }) {
diff --git a/docs/tools/tool-approval.md b/docs/tools/tool-approval.md
index e0c5c6e64..4d4fcae66 100644
--- a/docs/tools/tool-approval.md
+++ b/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 && (
diff --git a/docs/tools/tool-architecture.md b/docs/tools/tool-architecture.md
index 399d7aa5a..417d6ff01 100644
--- a/docs/tools/tool-architecture.md
+++ b/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"),
 });
diff --git a/docs/tools/tools.md b/docs/tools/tools.md
index 7dd8bfab1..2e4080a47 100644
--- a/docs/tools/tools.md
+++ b/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,