The TanStack team just dropped the alpha release of TanStack AI — a framework-agnostic AI toolkit built for developers who want real control over their stack.
Today’s AI ecosystem pushes you into someone else’s platform, tools, and workflow. TanStack AI flips that. It’s open source, adapter-driven, and works with your existing stack instead of boxing you into a new one.
1.What’s Inside TanStack AI
Multi-Language Server Support : Out of the gate: JavaScript/TypeScript, PHP, and Python — each supporting full agentic flows and tool calling.
Adapters for Real-World Providers : TypeScript adapters for
OpenAI
Anthropic
Gemini
Ollama
Plus built-in summarization + embedding support.
Open Protocol : The server - client protocol is fully documented. Use any language. Use any transport. If your backend speaks the protocol, the client works.
2.Why TanStack AI Exists
Developers deserve AI tools without:
vendor lock-in
proprietary platforms
ecosystem traps
Just open source, framework-agnostic, type-safe, developer-first tooling — from the same team that brought you TanStack Query, Table, Router, and more.
3.Framework Agnostic
TanStack AI supports the following frameworks
Next.js - API routes and App Router
TanStack Start - React Start or Solid Start (recommended!)
Express - Node.js server
Remix Router v7 - Loaders and actions
TanStack AI lets you define a tool once and provide environment-specific implementations. Using toolDefinition() to declare the tool’s input/output types and the server behavior with .server() (or a client implementation with .client()). These isomorphic tools can be invoked from the AI runtime regardless of framework.
import { toolDefinition } from '@tanstack/ai'
const getProductsDef = toolDefinition({
name: 'getProducts',
inputSchema: z.object({ query: z.string() }),
outputSchema: z.array(z.object({ id: z.string(), name: z.string() })),
})
const getProducts = getProductsDef.server(async ({ query }) => {
return await db.products.search(query)
})
chat({ tools: [getProducts] })
4.Installation & Quick Start
You can install the TanStack AI in minutes
npm install @tanstack/ai @tanstack/ai-react @tanstack/ai-openai
Server Setup
First, create an API route that handles chat requests. Here's a simplified example:
import { chat, toStreamResponse } from "@tanstack/ai";
import { openai } from "@tanstack/ai-openai";
export async function POST(request: Request) {
if (!process.env.OPENAI_API_KEY) {
return new Response(
JSON.stringify({
error: "OPENAI_API_KEY not configured",
}),
{
status: 500,
headers: { "Content-Type": "application/json" },
}
);
}
const { messages, conversationId } = await request.json();
try {
const stream = chat({
adapter: openai(),
messages,
model: "gpt-4o",
conversationId
});
return toStreamResponse(stream);
} catch (error: any) {
return new Response(
JSON.stringify({
error: error.message || "An error occurred",
}),
{
status: 500,
headers: { "Content-Type": "application/json" },
}
);
}
}
Client Setup
To use the chat API from your React frontend, create a Chat component:
import { useState } from "react";
import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
export function Chat() {
const [input, setInput] = useState("");
const { messages, sendMessage, isLoading } = useChat({
connection: fetchServerSentEvents("/api/chat"),
});
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (input.trim() && !isLoading) {
sendMessage(input);
setInput("");
}
};
return (
<div className="flex flex-col h-screen">
{}
<div className="flex-1 overflow-y-auto p-4">
{messages.map((message) => (
<div
key={message.id}
className={`mb-4 ${
message.role === "assistant" ? "text-blue-600" : "text-gray-800"
}`}
>
<div className="font-semibold mb-1">
{message.role === "assistant" ? "Assistant" : "You"}
</div>
<div>
{message.parts.map((part, idx) => {
if (part.type === "thinking") {
return (
<div
key={idx}
className="text-sm text-gray-500 italic mb-2"
>
💭 Thinking: {part.content}
</div>
);
}
if (part.type === "text") {
return <div key={idx}>{part.content}</div>;
}
return null;
})}
</div>
</div>
))}
</div>
{}
<form onSubmit={handleSubmit} className="p-4 border-t">
<div className="flex gap-2">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Type a message..."
className="flex-1 px-4 py-2 border rounded-lg"
disabled={isLoading}
/>
<button
type="submit"
disabled={!input.trim() || isLoading}
className="px-6 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
>
Send
</button>
</div>
</form>
</div>
);
}
Ensure you set the OPENAI_API_KEY in your .env
Now you now have a working chat application. The useChat hook handles:
Message state management
Streaming responses
Loading states
Error handling
TanStack Devtools is a unified devtools panel for inspecting and debugging TanStack libraries, including TanStack AI. It provides real-time insights into AI interactions, tool calls, and state changes.
Real-time Monitoring - View live chat messages, tool invocations, and AI responses.
Tool Call Inspection - Inspect input and output of tool calls.
State Visualization - Visualize chat state and message history.
Error Tracking - Monitor errors and exceptions in AI interactions.
Installation
npm install -D @tanstack/react-ai-devtools @tanstack/react-devtools
Usage
Import and include the Devtools component in your application
import { TanStackDevtools } from '@tanstack/react-devtools'
import { aiDevtoolsPlugin } from '@tanstack/react-ai-devtools'
const App = () => {
return (
<>
<TanStackDevtools
plugins={[
aiDevtoolsPlugin(),
]}
eventBusConfig={{
connectToServerBus: true,
}}
/>
</>
)
}
That’s a quick overview of TanStack AI. Check the official docs for more info https://tanstack.com/ai/latest
