导航|地址|刷新
Use Code Mode with TanStack AI

Skip to contentDocumentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/agents/llms.txt
Use this file to discover all available pages before exploring further.

Docs Directory API SDKs Changelog

Search

Log in

Agents

/

Overview

Getting started

Quick start

Add to existing project

Testing your Agents

Concepts

What are agents?

Conversation state and memory

Tools

Calling LLMs

Using Agents with Workflows

Agentic patterns

Overview

Human-in-the-loop patterns

Long-running agents

Communication channels

Chat

Chat agents

Autonomous responses

Client SDK

Voice

Email

Slack

Webhooks

Overview

Push notifications

Tools

Sandbox

MCP

Browser

AI Search

Agentic Payments

Overview

Charge for HTTP content

x402

Overview

Charge for HTTP content

Charge for MCP tools

Pay from Agents SDK

Pay from coding tools

MPP (Machine Payments Protocol)

Code Mode

Overview

Create a durable Code Mode runtime

AI SDK integration

Use Code Mode with TanStack AI

Browser-owned tools

MCP

OpenAPI

How Code Mode works

Code Mode API reference

Harnesses

Overview

Think

Overview

Getting started

Configuration

Tools

Actions

Lifecycle hooks

Client tools

Messengers

Channels

Scheduled tasks

Workflows

Sub-agent RPC and programmatic turns

Programmatic submissions

Durable recovery

Runtime

Agents API

Lifecycle

Agent class internals

Callable methods

Store and sync state

Sessions

getCurrentAgent()

Communication

Routing

WebSockets

HTTP and Server-Sent Events

Chat SDK

Protocol messages

Readonly connections

Execution

Sub-agents

Schedule tasks

Durable execution with fibers

Queue tasks

Retries

Run Workflows

Agents as tools

Agent Skills

Operations

Configuration

Cross-domain authentication

Using AI Models

Observability

Examples

Chat agent

Slack agent

Voice agent

Browser agent

Email agent

Model Context Protocol (MCP)

Overview

APIs

MCP handler APIs

McpAgent

McpClient

Protocol

Tools

Authorization

Transport

MCP governance

Guides

Build MCP client

Build a Remote MCP server

Test a Remote MCP Server

Securing MCP servers

Connect to an MCP server

Handle OAuth with MCP servers

Migrate to MCP SDK v2

Build a single-tool Code Mode MCP server

Build a search and execute MCP server

Cloudflare

MCP server portals ↗

Cloudflare's own MCP servers

Overview

Cloudflare Community MCP Server

Code Mode MCP server patterns

Platform

Limits

Agent resources

Agent setup ↗

Cloudflare Skills ↗

Code Mode MCP Server ↗

Domain-specific MCP Servers ↗MCP

Agents llms.txt ↗

Agents llms-full.txt ↗

Cloudflare Docs llms.txt ↗

Cloudflare Docs llms-full.txt ↗

Home

/Agents

/…
Tools

/Code Mode

/Use Code Mode with TanStack AI

Use Code Mode with TanStack AI

Last updated Jun 24, 2026|Copy as Markdown|View as Markdown|Agent setup

OverviewPrerequisitesAdd Code ModeNamespace behaviorApproval behavior

Use the @cloudflare/codemode/tanstack-ai entry point to give chat() one Code Mode tool. The model can then write JavaScript that calls your TanStack AI server tools.

Prerequisites

You need an existing Workers project and a configured TanStack AI model adapter. This example uses the OpenAI adapter.

Add Code Mode

Install Code Mode, TanStack AI, the OpenAI adapter, and Zod:

npmyarnpnpmbun

npm i @cloudflare/codemode @tanstack/ai @tanstack/ai-openai zod

yarn add @cloudflare/codemode @tanstack/ai @tanstack/ai-openai zod

pnpm add @cloudflare/codemode @tanstack/ai @tanstack/ai-openai zod

bun add @cloudflare/codemode @tanstack/ai @tanstack/ai-openai zod

Add a Worker Loader binding to your Wrangler configuration:

{ "$schema": "./node_modules/wrangler/config-schema.json", "name": "tanstack-codemode", "main": "src/index.ts", // Set this to today's date "compatibility_date": "2026-07-31", "compatibility_flags": [ "nodejs_compat" ], "worker_loaders": [ { "binding": "LOADER" } ]}

name = "tanstack-codemode"main = "src/index.ts"# Set this to today's datecompatibility_date = "2026-07-31"compatibility_flags = ["nodejs_compat"][[worker_loaders]]binding = "LOADER"

Define TanStack AI server tools, group them into namespaces, and pass the Code Mode tool to chat():

src/index.jsjsimport { DynamicWorkerExecutor } from "@cloudflare/codemode";import { createCodeTool, tanstackTools,} from "@cloudflare/codemode/tanstack-ai";import { chat, toolDefinition, toHttpResponse } from "@tanstack/ai";import { openaiText } from "@tanstack/ai-openai";import { z } from "zod";const getWeather = toolDefinition({ name: "get_weather", description: "Get the current weather for a city", inputSchema: z.object({ city: z.string().meta({ description: "City name" }), }), outputSchema: z.object({ city: z.string(), temperatureCelsius: z.number(), conditions: z.string(), }),}).server(async ({ city }) => ({ city, temperatureCelsius: 22, conditions: "sunny",}));const findContacts = toolDefinition({ name: "find_contacts", description: "Find contacts for a team", inputSchema: z.object({ team: z.string().meta({ description: "Team name" }), }), outputSchema: z.array( z.object({ name: z.string(), email: z.string(), }), ),}).server(async ({ team }) => [ { name: `${team} contact`, email: "team@example.com", },]);function startChat(env, prompt) { const executor = new DynamicWorkerExecutor({ loader: env.LOADER }); const codeTool = createCodeTool({ tools: [ tanstackTools([getWeather], "weather"), tanstackTools([findContacts], "directory"), ], executor, }); return chat({ adapter: openaiText("gpt-4o"), messages: [{ role: "user", content: prompt }], tools: [codeTool], });}export default { async fetch(request, env) { const prompt = await request.text(); return toHttpResponse(startChat(env, prompt)); },};

src/index.tstsimport { DynamicWorkerExecutor } from "@cloudflare/codemode";import { createCodeTool, tanstackTools,} from "@cloudflare/codemode/tanstack-ai";import { chat, toolDefinition, toHttpResponse } from "@tanstack/ai";import { openaiText } from "@tanstack/ai-openai";import { z } from "zod";const getWeather = toolDefinition({ name: "get_weather", description: "Get the current weather for a city", inputSchema: z.object({ city: z.string().meta({ description: "City name" }), }), outputSchema: z.object({ city: z.string(), temperatureCelsius: z.number(), conditions: z.string(), }),}).server(async ({ city }) => ({ city, temperatureCelsius: 22, conditions: "sunny",}));const findContacts = toolDefinition({ name: "find_contacts", description: "Find contacts for a team", inputSchema: z.object({ team: z.string().meta({ description: "Team name" }), }), outputSchema: z.array( z.object({ name: z.string(), email: z.string(), }), ),}).server(async ({ team }) => [ { name: `${team} contact`, email: "team@example.com", },]);function startChat(env: Env, prompt: string) { const executor = new DynamicWorkerExecutor({ loader: env.LOADER }); const codeTool = createCodeTool({ tools: [ tanstackTools([getWeather], "weather"), tanstackTools([findContacts], "directory"), ], executor, }); return chat({ adapter: openaiText("gpt-4o"), messages: [{ role: "user", content: prompt }], tools: [codeTool], });}export default { async fetch(request, env): Promise<Response> { const prompt = await request.text(); return toHttpResponse(startChat(env, prompt)); },} satisfies ExportedHandler<Env>;

createCodeTool() returns a TanStack AI ServerTool named codemode_execute. Its description contains the generated types for both namespaces. The model can write code similar to this:
async () => { const weatherResult = await weather.get_weather({ city: "London" }); const contacts = await directory.find_contacts({ team: "travel" }); return { weatherResult, contacts };};

Namespace behavior

tanstackTools(tools, name) converts an array of TanStack AI tools into a Code Mode tool provider. It uses each tool name as the method name and generates types from its input and output schemas.

The optional second argument sets the sandbox namespace. For example, tanstackTools([getWeather], "weather") exposes weather.get_weather(). If you omit the name, Code Mode uses the default codemode namespace:

const codeTool = createCodeTool({ tools: [tanstackTools([getWeather])], executor,});// Available to model-generated code as codemode.get_weather().

const codeTool = createCodeTool({ tools: [tanstackTools([getWeather])], executor,});// Available to model-generated code as codemode.get_weather().

Use distinct namespace names when you combine tool groups. Each provider contributes its generated declarations and executable server tools to the same Code Mode tool.

Approval behavior

The createCodeTool() integration does not pause execution for TanStack AI approvals. tanstackTools() excludes a tool when its needsApproval property is true or a function. The excluded tool does not appear in generated type declarations and cannot run in the sandbox.

Tools with needsApproval: false remain available. The durable Code Mode runtime supports paused approvals through connector requiresApproval annotations, but this createCodeTool() integration does not use that approval flow.

PreviousAI SDK integrationNextBrowser-owned tools

Was this helpful?

YesNo

Edit pageReport issue

On this page

Overview

Prerequisites

Add Code Mode

Namespace behavior

Approval behavior

Edit pageReport issue

Getting started
PlansContact salesPartnersFind a partnerStartupsUnder attack?Domain name search

Company
AboutCareersInvestorsPressPress kitGlobal network

Public interest
Project GalileoAthenian ProjectCloudflare for CampaignsProject FairshotImpact/ESG

Compliance
Compliance resourcesTrust HubData ProtectionResponsible AITransparency reportReport abuse

Resources
App innovation reportCloudflare RadarCase studiesStatusSupportEventsBlog

Developers
DocumentationLearning centerCommunity

Solutions
SSE and SASE platformCloudflare AI CloudAI SecurityFrontend Development PlatformMulti-Tenant Platform DevelopmentWeb Security Platform

Start BuildingLog In

© 2026 Cloudflare, Inc.

Privacy policy|Report security issues|Terms of use|Trademark
|
Your privacy choices

Docs

------
导航页打开网址