INTEGRITY Dokumentace

Použití Code Mode s TanStack AI

Použijte @cloudflare/codemode/tanstack-ai vstupní bod, aby poskytl chat() jeden nástroj Code Mode. Model pak může napsat JavaScript, který volá vaše serverové nástroje TanStack AI.

Předpoklady

Potřebujete existující projekt Workers a nakonfigurovaný adaptér modelu TanStack AI. Tento příklad používá adaptér OpenAI.

Přidání Code Mode

  1. Nainstalujte Code Mode, TanStack AI, adaptér OpenAI a Zod:

    npm i @cloudflare/codemode @tanstack/ai @tanstack/ai-openai zod
  2. Přidejte vazbu Worker Loader do vaší konfigurace Wrangler:

    {
      "$schema": "./node_modules/wrangler/config-schema.json",
      "name": "tanstack-codemode",
      "main": "src/index.ts",
      // Set this to today's date
      "compatibility_date": "2026-08-28",
      "compatibility_flags": [
        "nodejs_compat"
      ],
      "worker_loaders": [
        {
          "binding": "LOADER"
        }
      ]
    }
    name = "tanstack-codemode"
    main = "src/index.ts"
    # Set this to today's date
    compatibility_date = "2026-08-28"
    compatibility_flags = ["nodejs_compat"]
    
    [[worker_loaders]]
    binding = "LOADER"
  3. Definujte serverové nástroje TanStack AI, seskupte je do jmenných prostorů a předejte nástroj Code Mode do chat():

    src/index.js
    import { 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: "[email protected]",
    	},
    ]);
    
    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.ts
    import { 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: "[email protected]",
    	},
    ]);
    
    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() vrátí TanStack AI ServerTool s názvem codemode_execute. Jeho popis obsahuje vygenerované typy pro oba namespacy. Model pak může napsat kód podobný tomuto:

async () => {
	const weatherResult = await weather.get_weather({ city: "London" });
	const contacts = await directory.find_contacts({ team: "travel" });
	return { weatherResult, contacts };
};

Chování jmenného prostoru

tanstackTools(tools, name) převádí pole nástrojů TanStack AI na poskytovatele nástrojů Code Mode. Název každého nástroje použije jako název metody a vygeneruje typy z jeho vstupního a výstupního schématu.

Volitelný druhý argument nastavuje jmenný prostor sandboxu. Například tanstackTools([getWeather], "weather") zpřístupňuje weather.get_weather(). Pokud název vynecháte, Code Mode použije výchozí 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().

Při kombinování skupin nástrojů použijte odlišné názvy jmenných prostorů. Každý poskytovatel přispívá svými vygenerovanými deklaracemi a spustitelnými serverovými nástroji do stejného nástroje Code Mode.

Chování schvalování

createCodeTool() integrace nepozastavuje provádění kvůli schválením TanStack AI. tanstackTools() vyloučí nástroj, pokud jeho needsApproval vlastnost je true nebo funkci. Vyloučený nástroj se neobjeví ve vygenerovaných deklaracích typů a nelze jej spustit v sandboxu.

Nástroje s needsApproval: false zůstávají k dispozici. Trvalý runtime Code Mode podporuje pozastavená schválení prostřednictvím konektoru requiresApproval anotace, ale toto createCodeTool() integrace tento postup schvalování nepoužívá.