TypeScript

Opik TypeScript SDK

The Opik TypeScript SDK provides a powerful and easy-to-use interface for tracing, monitoring, and debugging your JavaScript and TypeScript applications. It offers comprehensive observability for LLM applications, agent workflows, and AI-powered systems.

Integrations

Opik provides seamless integrations with popular JavaScript/TypeScript frameworks and libraries:

Frameworks:

  • Agno - Trace and monitor your Agno AI agent applications
  • BeeAI - Trace and monitor your BeeAI agent applications
  • LangChain - Trace and monitor your LangChain applications, including chains, agents, tools, and retrievers
  • Mastra - Trace and monitor your Mastra AI applications
  • Vercel AI SDK - Integrate Opik with Vercel AI SDK for monitoring AI-powered applications

Model Providers:

  • Cloudflare Workers AI - Trace and monitor your Cloudflare Workers AI applications
  • Gemini - Trace and monitor your applications using the Google Generative AI Node.js SDK
  • OpenAI - Trace and monitor your applications using the official OpenAI Node.js SDK

For a complete list of TypeScript/JavaScript integrations and other language integrations, see the Integrations Overview.

Installation

The fastest way to get started is using the Opik TS, an interactive CLI tool that sets up Opik automatically in your project:

$npx opik-ts configure

The CLI will:

  • Detect your project setup
  • Install Opik SDK and integration packages
  • Configure environment variables
  • Set up Opik client for your LLM integrations

Option 2: Manual Installation

You can also install the opik package manually using your favorite package manager:

$npm install opik

Opik Configuration

You can configure the Opik client using environment variables.

$export OPIK_API_KEY="your-api-key"
>
># If running on Opik Cloud
>export OPIK_URL_OVERRIDE="https://www.comet.com/opik/api"
>
># If running locally
>export OPIK_URL_OVERRIDE="http://localhost:5173/api"
>
>export OPIK_PROJECT_NAME="your-project-name"
>export OPIK_WORKSPACE_NAME="your-workspace-name"

Or you can pass the configuration to the Opik client constructor.

1import { Opik } from "opik";
2
3const client = new Opik({
4  apiKey: "<your-api-key>",
5  apiUrl: "https://www.comet.com/opik/api",
6  projectName: "<your-project-name>",
7  workspaceName: "<your-workspace-name>",
8});

Usage

You can find the full Typescript reference documentation here.

1import { Opik } from "opik";
2
3// Create a new Opik client with your configuration
4const client = new Opik();
5
6// Log 10 traces
7for (let i = 0; i < 10; i++) {
8  const someTrace = client.trace({
9    name: `Trace ${i}`,
10    input: {
11      prompt: `Hello, world! ${i}`,
12    },
13    output: {
14      response: `Hello, world! ${i}`,
15    },
16  });
17
18  // For each trace, log 10 spans
19  for (let j = 0; j < 10; j++) {
20    const someSpan = someTrace.span({
21      name: `Span ${i}-${j}`,
22      type: "llm",
23      input: {
24        prompt: `Hello, world! ${i}:${j}`,
25      },
26      output: {
27        response: `Hello, world! ${i}:${j}`,
28      },
29    });
30
31    // Some LLM work
32    await new Promise((resolve) => setTimeout(resolve, 100));
33
34    // Mark the span as ended
35    someSpan.end();
36  }
37
38  // Mark the trace as ended
39  someTrace.end();
40}
41
42// Flush the client to send all traces and spans
43await client.flush();