> ## Documentation Index
> Fetch the complete documentation index at: https://docs.observ.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Using Vercel AI SDK with Observ

> Learn how to wrap and use Vercel AI SDK models with Observ for automatic tracing and caching

## Basic Setup

The setup is the same for all providers:

1. Import the Observ SDK and your chosen provider
2. Create an Observ instance with your API key
3. Wrap the model with `observ.wrap()`
4. Use the model with Vercel AI SDK functions

## Provider Examples

<Tabs>
  <Tab title="OpenAI">
    ```typescript theme={null}
    import { Observ } from "observ-sdk";
    import { openai } from "@ai-sdk/openai";
    import { generateText } from "ai";

    const observ = new Observ({
      apiKey: "your-observ-api-key",
      recall: true, // Enable semantic caching
    });

    // Wrap the model
    const model = observ.wrap(openai("gpt-4"));

    // Use it normally
    const result = await generateText({
      model,
      prompt: "What is TypeScript?",
    });

    console.log(result.text);
    ```
  </Tab>

  <Tab title="Anthropic">
    ```typescript theme={null}
    import { Observ } from "observ-sdk";
    import { anthropic } from "@ai-sdk/anthropic";
    import { generateText } from "ai";

    const observ = new Observ({
      apiKey: "your-observ-api-key",
      recall: true,
    });

    const model = observ.wrap(anthropic("claude-sonnet-4-20250514"));

    const result = await generateText({
      model,
      prompt: "What is TypeScript?",
    });

    console.log(result.text);
    ```
  </Tab>

  <Tab title="Google">
    ```typescript theme={null}
    import { Observ } from "observ-sdk";
    import { google } from "@ai-sdk/google";
    import { generateText } from "ai";

    const observ = new Observ({
      apiKey: "your-observ-api-key",
      recall: true,
    });

    const model = observ.wrap(google("gemini-1.5-pro"));

    const result = await generateText({
      model,
      prompt: "What is TypeScript?",
    });

    console.log(result.text);
    ```
  </Tab>

  <Tab title="Mistral">
    ```typescript theme={null}
    import { Observ } from "observ-sdk";
    import { mistral } from "@ai-sdk/mistral";
    import { generateText } from "ai";

    const observ = new Observ({
      apiKey: "your-observ-api-key",
      recall: true,
    });

    const model = observ.wrap(mistral("mistral-large-latest"));

    const result = await generateText({
      model,
      prompt: "What is TypeScript?",
    });

    console.log(result.text);
    ```
  </Tab>

  <Tab title="Cohere">
    ```typescript theme={null}
    import { Observ } from "observ-sdk";
    import { cohere } from "@ai-sdk/cohere";
    import { generateText } from "ai";

    const observ = new Observ({
      apiKey: "your-observ-api-key",
      recall: true,
    });

    const model = observ.wrap(cohere("command-r-plus"));

    const result = await generateText({
      model,
      prompt: "What is TypeScript?",
    });

    console.log(result.text);
    ```
  </Tab>
</Tabs>

## Streaming

Streaming works automatically with all providers:

```typescript theme={null}
import { streamText } from "ai";

// Use any wrapped model
const stream = await streamText({
  model, // Your wrapped model
  prompt: "Write a detailed explanation of async/await",
});

// Stream chunks to the client
for await (const chunk of stream.textStream) {
  process.stdout.write(chunk);
}
```

<Info>
  Streaming requests are fully traced in Observ, including latency metrics for
  each chunk.
</Info>

## Adding Sessions and Metadata

You can add session tracking and custom metadata via `providerOptions`:

### Session Tracking

```typescript theme={null}
import { generateText } from "ai";

const result = await generateText({
  model, // Your wrapped model
  prompt: "Explain React hooks",
  providerOptions: {
    observ: {
      sessionId: "conversation_abc123",
    },
  },
});
```

### Custom Metadata

```typescript theme={null}
import { generateText } from "ai";

const result = await generateText({
  model, // Your wrapped model
  prompt: "Explain React hooks",
  providerOptions: {
    observ: {
      metadata: {
        user_id: "user_123",
        feature: "documentation",
        version: "2.0",
      },
    },
  },
});
```

### Combined

```typescript theme={null}
const result = await generateText({
  model,
  prompt: "Explain React hooks",
  providerOptions: {
    observ: {
      sessionId: "conversation_abc123",
      metadata: {
        user_id: "user_123",
        feature: "documentation",
      },
    },
  },
});
```

<Tip>
  Learn more about [Session Tracking](/features/sessions) and [Custom
  Metadata](/features/metadata).
</Tip>

## Configuration Options

When creating the Observ instance, you can configure:

| Option        | Type      | Default        | Description                    |
| ------------- | --------- | -------------- | ------------------------------ |
| `apiKey`      | `string`  | —              | Your Observ API key (required) |
| `recall`      | `boolean` | `false`        | Enable semantic caching        |
| `environment` | `string`  | `"production"` | Environment tag for filtering  |
| `debug`       | `boolean` | `false`        | Enable debug logging           |

Example with all options:

```typescript theme={null}
const observ = new Observ({
  apiKey: "your-observ-api-key",
  recall: true,
  environment: "staging",
  debug: true,
});
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Session Tracking" icon="users" href="/features/sessions">
    Group related calls with session IDs
  </Card>

  <Card title="Custom Metadata" icon="tag" href="/features/metadata">
    Attach metadata to your traces
  </Card>

  <Card title="Provider SDKs" icon="code" href="/provider-sdks/overview">
    Alternative: Use provider SDKs directly
  </Card>

  <Card title="Dashboard" icon="gauge" href="https://observ.dev/dashboard">
    View your traces and analytics
  </Card>
</CardGroup>