> ## Documentation Index > Fetch the complete documentation index at: https://arize-ax.mintlify.site/docs/llms.txt > Use this file to discover all available pages before exploring further. # TanStack AI > Trace TanStack AI chat() runs with the OpenInference middleware and send spans to Arize AX for LLM observability. [TanStack AI](https://tanstack.com/ai/latest/docs/getting-started/overview) 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`](https://github.com/Arize-ai/openinference/tree/main/js/packages/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](https://arize.com/sign-up/)) * An `OPENAI_API_KEY` from the [OpenAI Platform](https://platform.openai.com/api-keys) (the example uses the OpenAI adapter) ## Launch Arize AX 1. Sign in to your [Arize AX account](https://app.arize.com/). 2. 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: ```bash theme={null} 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 ```bash theme={null} export ARIZE_SPACE_ID="" export ARIZE_API_KEY="" export ARIZE_PROJECT_NAME="tanstack-ai-tracing-example" export 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](#run-tanstack-ai)). ```typescript theme={null} // 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`. ```typescript theme={null} // 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 ```text wrap theme={null} 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 1. Open your Arize AX space and select project **`tanstack-ai-tracing-example`**. 2. 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. 3. If no traces appear, see [Troubleshooting](#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. Install the [Arize Skills](https://github.com/Arize-ai/arize-skills) plugin and let your coding agent check for you: ```bash theme={null} 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: ```bash theme={null} 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](/api-clients/cli/spans). Query the project's spans and check that at least one came back. ```python Python theme={null} 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" ) ``` ```typescript TypeScript theme={null} // 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", ); ``` ```go Go theme={null} 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](/api-clients/python/version-8/client-resources/spans) · [TypeScript](/api-clients/typescript/version-1/client-resources/spans) · [Go](/api-clients/go/version-2/client-resources/spans). ## 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. ## Resources