From 5be9ce32d6cec73c4144ad52c1476da3839045f6 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 5 Jun 2026 12:27:20 +0200 Subject: [PATCH] docs: use tsx code fences for JSX examples 36 code blocks containing JSX (React/Solid/Preact components) were fenced as ```typescript. Re-fence them as ```tsx so editors and the docs site highlight the JSX correctly. No ```ts blocks contained JSX; the mislabeled ones were all ```typescript. --- docs/adapters/elevenlabs.md | 2 +- docs/api/ai-preact.md | 8 ++++---- docs/api/ai-react.md | 8 ++++---- docs/api/ai-solid.md | 8 ++++---- docs/code-mode/client-integration.md | 4 ++-- docs/getting-started/quick-start.md | 2 +- docs/media/realtime-chat.md | 8 ++++---- docs/migration/migration-from-vercel-ai.md | 14 +++++++------- docs/tools/client-tools.md | 4 ++-- docs/tools/tool-approval.md | 6 +++--- docs/tools/tool-architecture.md | 6 +++--- docs/tools/tools.md | 2 +- 12 files changed, 36 insertions(+), 36 deletions(-) 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 @@ -283,13 +283,13 @@ The `inputLevel` and `outputLevel` values update on every animation frame while **Simple level meter:** -```typescript +```tsx
``` **Pulsing audio indicator:** -```typescript +```tsx function AudioIndicator({ level }: { level: number }) { return (
(
{m.role}: {m.content} @@ -457,7 +457,7 @@ type ToolResultState = 'streaming' | 'complete' | 'error' #### After (TanStack AI) -```typescript +```tsx {messages.map((message) => (
{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,