TanStack AI

TanStack AI provides framework-agnostic helpers — chat(), tool loops, and provider adapters — for building LLM apps in TypeScript. Arize AX captures every TanStack AI run by plugging the @arizeai/openinference-tanstack-ai middleware into the middleware option, which emits OpenInference spans for the overall run, each model turn, and each tool call.

Prerequisites

Node.js 18+
An Arize AX account (sign up)
An OPENAI_API_KEY from the OpenAI Platform (the example uses the OpenAI adapter)

Launch Arize AX

Sign in to your Arize AX account.
From Space Settings, copy your Space ID and API Key. You will set them as ARIZE_SPACE_ID and ARIZE_API_KEY below.

Install

Install TanStack AI, the OpenAI adapter, the OpenInference middleware, and the OpenTelemetry packages that export spans to Arize AX:

npm install @tanstack/ai @tanstack/ai-openai \
  @arizeai/openinference-tanstack-ai \
  @arizeai/openinference-semantic-conventions \
  @opentelemetry/exporter-trace-otlp-proto \
  @opentelemetry/resources \
  @opentelemetry/sdk-trace-base \
  @opentelemetry/sdk-trace-node \
  @opentelemetry/semantic-conventions

Configure credentials

export ARIZE_SPACE_ID="<your-space-id>"
export ARIZE_API_KEY="<your-api-key>"
export ARIZE_PROJECT_NAME="tanstack-ai-tracing-example"
export OPENAI_API_KEY="<your-openai-api-key>"

Setup tracing

The middleware does not export spans itself — it uses your application’s OpenTelemetry tracer provider. Register a NodeTracerProvider that ships spans to Arize AX, then attach openInferenceMiddleware() at each chat() call site (see Run).

// instrumentation.ts
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-proto";
import { resourceFromAttributes } from "@opentelemetry/resources";
import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { NodeTracerProvider } from "@opentelemetry/sdk-trace-node";
import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
import {
  SEMRESATTRS_PROJECT_NAME,
} from "@arizeai/openinference-semantic-conventions";

const projectName =
  process.env.ARIZE_PROJECT_NAME ?? "tanstack-ai-tracing-example";

export const provider = new NodeTracerProvider({
  resource: resourceFromAttributes({
    [ATTR_SERVICE_NAME]: projectName,
    [SEMRESATTRS_PROJECT_NAME]: projectName,
  }),
  spanProcessors: [
    new SimpleSpanProcessor(
      new OTLPTraceExporter({
        url: "https://otlp.arize.com/v1/traces",
        headers: {
          "arize-space-id": process.env.ARIZE_SPACE_ID ?? "",
          "arize-api-key": process.env.ARIZE_API_KEY ?? "",
        },
      }),
    ),
  ],
});

provider.register();

console.log("Arize AX tracing initialized for TanStack AI.");

Registering the tracer provider must run before the middleware emits spans, so import instrumentation.ts first in your entry point. By default openInferenceMiddleware() uses the global tracer this file registers. To attach a request-scoped tracer instead, pass one explicitly: openInferenceMiddleware({ tracer }).

Run TanStack AI

The middleware works for both streaming and non-streaming chat() calls. This example streams the response and collects it with streamToText.

// example.ts

// Importing instrumentation first ensures tracing is set up before the
// TanStack AI middleware emits spans.
import { provider } from "./instrumentation";

import { chat, streamToText } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";

import { openInferenceMiddleware } from "@arizeai/openinference-tanstack-ai";

// The OpenAI adapter reads OPENAI_API_KEY from the environment.
const stream = chat({
  adapter: openaiText("gpt-5.4-mini"),
  messages: [
    {
      role: "user",
      content: "Why is the ocean salty? Answer in two sentences.",
    },
  ],
  middleware: [openInferenceMiddleware()],
});

const text = await streamToText(stream);
console.log(text);

// Flush any pending spans before the process exits.
await provider.forceFlush();

Expected output

Arize AX tracing initialized for TanStack AI.
The ocean is salty because rivers continuously dissolve mineral salts from rocks and soil and carry them to the sea, where they accumulate over millions of years. Water leaves the ocean through evaporation but the salts remain, steadily concentrating until reaching today's roughly 3.5% salinity.

Verify in Arize AX

Open your Arize AX space and select project tanstack-ai-tracing-example.
You should see a new trace within ~30 seconds containing an ai.chat AGENT span wrapping an ai.llm 1 LLM child span (with the prompt, response, model, and token usage attached). Tool loops add a TOOL span per executed tool and an additional LLM span per model turn.
If no traces appear, see Troubleshooting.

Check from the skill, CLI, or SDK

Confirm spans are actually reaching your Arize AX project. Use whichever fits your workflow — the skill and CLI work for any framework; the SDK check is shown for each language.

Arize skill (agent)
AX CLI
SDK

Install the Arize Skills plugin and let your coding agent check for you:

npx skills add Arize-ai/arize-skills

Then prompt your agent:

Use the arize-trace skill to export and analyze recent traces from my project. Confirm spans are arriving, and summarize any errors or latency issues.

Export recent spans for your project — any rows mean traces are landing:

ax spans export "$ARIZE_PROJECT_NAME" --space "$ARIZE_SPACE_ID" \
  --limit 5 --stdout | jq 'length'

A non-zero count confirms spans reached Arize AX. Run ax auth login first if you have not authenticated. See the ax spans reference.

Query the project’s spans and check that at least one came back.

import os
from arize import ArizeClient

client = ArizeClient(api_key=os.environ["ARIZE_API_KEY"])
resp = client.spans.list(
    project=os.environ["ARIZE_PROJECT_NAME"],
    space=os.environ["ARIZE_SPACE_ID"],
    limit=5,
)
count = len(resp.spans)
print(
    f"{count} span(s) found" if count else "No spans yet — recheck setup"
)

// Reads ARIZE_API_KEY from the environment.
import { listSpans } from "@arizeai/ax-client";

const { data: spans } = await listSpans({
  project: process.env.ARIZE_PROJECT_NAME!,
  space: process.env.ARIZE_SPACE_ID!,
  limit: 5,
});
const count = spans.length;
console.log(
  count ? `${count} span(s) found` : "No spans yet — recheck setup",
);

client, err := arize.NewClient(
    arize.Config{APIKey: os.Getenv("ARIZE_API_KEY")},
)
if err != nil {
    log.Fatal(err)
}
resp, err := client.Spans.List(ctx, spans.ListRequest{
    Project: os.Getenv("ARIZE_PROJECT_NAME"),
    Space:   os.Getenv("ARIZE_SPACE_ID"),
    Limit:   5,
})
if err != nil {
    log.Fatal(err)
}
fmt.Printf("%d span(s) found\n", len(resp.Spans))

SDK span references: Python · TypeScript · Go.

Troubleshooting

No traces in Arize AX. Confirm ARIZE_SPACE_ID and ARIZE_API_KEY are set in the same shell that runs example.ts, and that instrumentation.ts is imported before any chat() call. Enable OpenTelemetry debug logs with export OTEL_LOG_LEVEL=debug and re-run.
Spans missing but the model responds. The middleware only traces chat() calls it is attached to. Make sure middleware: [openInferenceMiddleware()] is passed to every chat() you want traced.
401 from OpenAI. Verify OPENAI_API_KEY is set and has access to the model in the example. Swap openaiText("gpt-5.4-mini") for a model your key can call.
Process exits before spans flush. Always await provider.forceFlush() (or provider.shutdown()) before the process exits, otherwise trailing spans are dropped.

Prerequisites

Launch Arize AX

Install

Configure credentials

Setup tracing

Run TanStack AI

Expected output

Verify in Arize AX

Check from the skill, CLI, or SDK

Troubleshooting

Resources

TanStack AI Documentation

OpenInference TanStack AI Middleware

TanStack AI GitHub

​Prerequisites

​Launch Arize AX

​Install

​Configure credentials

​Setup tracing

​Run TanStack AI

​Expected output

​Verify in Arize AX

​Check from the skill, CLI, or SDK

​Troubleshooting

​Resources

TanStack AI Documentation

OpenInference TanStack AI Middleware

TanStack AI GitHub

Prerequisites

Launch Arize AX

Install

Configure credentials

Setup tracing

Run TanStack AI

Expected output

Verify in Arize AX

Check from the skill, CLI, or SDK

Troubleshooting

Resources