Build AI Apps in the Frontend with TanStack AI: A Step‑by‑Step Guide

Definition

TanStack AI is an SDK that enables integration of multiple AI models (OpenAI, Anthropic, Gemini, etc.) in JavaScript/TypeScript applications without vendor lock‑in. It provides a unified interface, type‑safe API, built‑in streaming, and is designed for frontend and full‑stack use.

Problems with prior approaches

Direct official SDK – code tightly coupled to a single provider; switching models requires extensive rewrites.

Backend‑centric frameworks (e.g., LangChain) – steep learning curve, Python‑oriented, not friendly to frontend developers.

TanStack AI solutions

Vendor‑agnostic interface – change model via configuration only.

Frontend‑first, isomorphic – works with React, Vue, Solid, Edge runtimes; tools can run on server or client.

Built‑in streaming – automatic handling of Server‑Sent Events and typewriter effects.

End‑to‑end type safety – TypeScript + Zod validate inputs/outputs at compile time.

Headless UI hooks – core chat logic without UI framework binding.

DevTools integration – visual debugging panel for AI reasoning, tool calls, and data flow.

Step‑by‑step usage

1. Install

npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai

2. Configure a provider (DeepSeek example)

import { createOpenAI } from '@tanstack/ai/providers/openai';

const deepseek = createOpenAI({
  baseURL: 'https://api.deepseek.com',
  apiKey: process.env.DEEPSEEK_API_KEY,
});

3. Build a chat UI with useChat

import { useChat } from '@tanstack/react-ai';

function ChatApp() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    status,
  } = useChat({
    api: '/api/chat',
    defaultModel: 'deepseek-chat',
  });

  return (
    // JSX omitted for brevity; the hook supplies message list, input handling, and submit logic.
  );
}

4. Backend route (Next.js API)

import { streamText } from '@tanstack/ai';
import { deepseek } from '@/utils/ai-providers';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = await streamText({
    model: deepseek.chat('deepseek-chat'),
    messages,
  });
  return result.toAIStreamResponse();
}

5. Define and register a tool (function calling)

import { tool } from '@tanstack/ai';
import { z } from 'zod';

const weatherTool = tool({
  description: 'Get current weather for a location',
  parameters: z.object({
    location: z.string().describe('City name, e.g., Beijing'),
  }),
  execute: async ({ location }) => {
    const temp = 25; // mock temperature
    return { temperature: temp, condition: 'Sunny' };
  },
});

streamText({
  model: deepseek.chat('deepseek-chat'),
  messages,
  tools: { weather: weatherTool },
});

When the user asks “How’s the weather in Beijing?” the model calls weatherTool and returns the factual answer.

Typical use cases

Customer support bot – connect a database tool (e.g., getOrderStatus) to answer order‑status queries without human intervention.

RAG knowledge base – retrieve relevant wiki pages before generating answers to reduce hallucinations.

Multimodal apps – use DeepSeek‑VL to analyse uploaded images (e.g., fridge contents) and suggest recipes.

Ed‑Tech assistant – guide students through Socratic questioning using prompt engineering and state management.

Feature comparison

Learning curve – TanStack AI: ★★★ (smooth); Official SDK: ★★★★ (simple); LangChain: ★★ (steep).

Type safety – TanStack AI: ✅ full; Official SDK: ⚠️ partial; LangChain: ⚠️ partial.

Vendor switching – TanStack AI: ✅ seamless; Official SDK: ❌ requires rewrite; LangChain: ✅ supported.

Frontend friendliness – TanStack AI: ✅ built for frontend; Official SDK: ⚠️ generic; LangChain: ❌ backend‑centric.

Debug experience – TanStack AI: ✅ DevTools; Others: ⚠️ basic logs.

Streaming support – TanStack AI: ✅ out‑of‑the‑box; Official SDK: ⚠️ manual; LangChain: ✅ supported.

Core advantages recap

Vendor‑agnostic – one codebase works with GPT‑5.2, Claude 4.5 Sonnet, Ollama, etc.

End‑to‑end type safety via TypeScript and Zod.

Isomorphic tools – same definition runs on server and client, enabling “Human in the loop”.

Headless UI – core hooks without UI constraints, allowing any styling framework.

Integrated DevTools – visual debugging of AI reasoning and tool calls.