|
| 1 | +# Arize AX Integration |
| 2 | + |
| 3 | +Use Browserbase as a **tool** for an agent, and trace every tool call with [Arize AX](https://arize.com/docs/ax). |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +This integration makes Browserbase a **tool** an agent can call — here a `load_page` tool that fetches a page's content as markdown via the Browserbase [Fetch API](https://www.browserbase.com/search) (no full browser needed). The agent uses tool calling to perform a task (e.g. read a page and summarize it), and **Arize AX traces the whole run** so you can debug, monitor, and evaluate it. |
| 8 | + |
| 9 | +Arize AX is an observability and evaluation platform for AI applications. It ingests [OpenTelemetry](https://opentelemetry.io/) traces via [OpenInference](https://github.com/Arize-ai/openinference), so each part of the agent shows up as a span: |
| 10 | + |
| 11 | +- **LLM spans** — every OpenAI chat completion (captured automatically), with token usage and cost |
| 12 | +- **Tool spans** — the Browserbase `load_page` (Fetch API) call, with the URL in and page markdown out |
| 13 | +- **Chain span** — groups the whole agent run; token usage and cost roll up to the trace |
| 14 | + |
| 15 | +## Setup |
| 16 | + |
| 17 | +Requires **Node.js 18.19+** (or 20.6+) — the OpenTelemetry dependencies set this baseline. |
| 18 | + |
| 19 | +```bash |
| 20 | +npm install |
| 21 | +cp .env.example .env # then fill in your keys |
| 22 | +``` |
| 23 | + |
| 24 | +| Variable | Where to find it | |
| 25 | +| ------------------------ | ------------------------------------------------ | |
| 26 | +| `ARIZE_SPACE_ID` | Arize AX → Space Settings | |
| 27 | +| `ARIZE_API_KEY` | Arize AX → Space Settings | |
| 28 | +| `ARIZE_PROJECT_NAME` | Any name; groups traces in AX (optional) | |
| 29 | +| `BROWSERBASE_API_KEY` | [Browserbase dashboard](https://browserbase.com) | |
| 30 | +| `OPENAI_API_KEY` | OpenAI dashboard | |
| 31 | + |
| 32 | +## Run |
| 33 | + |
| 34 | +```bash |
| 35 | +npm start |
| 36 | +# or ask your own question: |
| 37 | +npm start "Read https://docs.browserbase.com and list the main products." |
| 38 | +``` |
| 39 | + |
| 40 | +The agent browses with Browserbase, prints an answer, and the trace appears in your Arize AX project as a `CHAIN → LLM → TOOL(load_page)` tree. |
| 41 | + |
| 42 | +## Files |
| 43 | + |
| 44 | +- [`src/instrumentation.ts`](src/instrumentation.ts) — Arize AX / OpenTelemetry setup (OTLP exporter, OpenAI instrumentation). Must be imported before `openai`. |
| 45 | +- [`src/agent.ts`](src/agent.ts) — the tool-calling agent: a loop over the Browserbase `load_page` tool, with manual `CHAIN` and `TOOL` spans. |
| 46 | + |
| 47 | +## Optional: register the tool in the Prompt Hub |
| 48 | + |
| 49 | +To also publish the `load_page` tool as a prompt in the Arize AX Prompt Hub (so you can iterate on prompting + tool calling there): |
| 50 | + |
| 51 | +```bash |
| 52 | +npm run register-prompt |
| 53 | +``` |
| 54 | + |
| 55 | +This uses [`@arizeai/ax-client`](https://www.npmjs.com/package/@arizeai/ax-client) to create a `browserbase-load-page` prompt carrying the tool schema. AX stores the schema; `agent.ts` is what executes the tool. |
| 56 | + |
| 57 | +--- |
| 58 | + |
| 59 | +You've integrated Browserbase with Arize AX! Use Browserbase as a tool to build composable agents that perform tasks like data extraction and RAG — and let Arize AX trace and evaluate every prompt, tool call, and token. |
0 commit comments