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

# Introduction

> Observability for apps built with the Vercel AI SDK.

Foglamp shows you what your AI app is doing: cost, speed, token usage, full
traces, and prompt/response logs. It works with agents built on the
[Vercel AI SDK](https://ai-sdk.dev) and takes two lines of code to set up.

Foglamp is TypeScript-only and supports AI SDK v4, v5, v6, and v7. You add the
`foglamp` package to your app, and traces are sent to a backend you can run
yourself or use as a hosted service.

<Note>
  On AI SDK v4, v5, and v6, Foglamp wraps the `ai` module with
  [`foglamp/wrap`](/sdk/wrap). On v7 (beta), it uses the SDK's built-in
  telemetry API. Both produce the same traces. The [Quickstart](/quickstart)
  helps you pick.
</Note>

## Why Foglamp

One user action in an AI app can trigger several model calls, tool calls, and
retries, each with its own cost and speed. Regular monitoring tools were not
built for that. Foglamp is.

<CardGroup cols={2}>
  <Card title="Cost tracking" icon="dollar-sign">
    Every span is priced as it arrives, split by input, output, reasoning, and
    cached tokens. If a model has no known price, you see a dash, never a wrong
    \$0.
  </Card>

  <Card title="Traces" icon="diagram-project">
    Each `generateText` or `streamText` call becomes a trace, with its steps and
    tool calls as spans. Group them into agents, workflows, and runs.
  </Card>

  <Card title="Latency" icon="gauge">
    p50/p95/p99 latency and time to first token, read from the SDK's own
    metrics.
  </Card>

  <Card title="Self-host or hosted" icon="server">
    Run the whole stack with `docker compose up`, or point the SDK at the
    hosted service. The code is the same either way.
  </Card>
</CardGroup>

## How it works

```
your app ──foglamp──▶ ingest API ──▶ ClickHouse ──▶ dashboard
```

* **SDK** sits in your app, collects spans, and sends them in batches. If no
  API key is set it does nothing at all. It never throws and never slows down
  your model calls.
* **Ingest API** checks your API key, prices each span, and stores it.
* **Dashboard** shows traces, workflows, agents, sessions, cost, evals, and
  alerts. See the [dashboard tour](/dashboard/overview).

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Install the SDK and see your first trace in minutes.
  </Card>

  <Card title="Data model" icon="sitemap" href="/concepts/data-model">
    Learn what traces, spans, workflows, runs, and sessions are.
  </Card>

  <Card title="SDK reference" icon="code" href="/sdk/overview">
    Every option and integration method.
  </Card>

  <Card title="Dashboard tour" icon="chart-line" href="/dashboard/overview">
    Traces, workflows, agents, sessions, evals, cost, and alerts.
  </Card>

  <Card title="Self-hosting" icon="docker" href="/self-hosting/overview">
    Run the full stack on your own servers.
  </Card>

  <Card title="Troubleshooting" icon="bug" href="/troubleshooting">
    Not seeing traces? Common causes and fixes.
  </Card>
</CardGroup>