---
title: Tabstack for the Vercel AI SDK | Tabstack
description: Give your Vercel AI SDK apps reliable web access with @tabstack/ai: schema-enforced extraction, research, generation, and browser automation as native AI SDK tools.
---

[`@tabstack/ai`](https://www.npmjs.com/package/@tabstack/ai) gives your [Vercel AI SDK](https://ai-sdk.dev) apps reliable web access: schema-enforced extraction, multi-source research, AI transformation, and browser automation, all as native AI SDK tools backed by the official [`@tabstack/sdk`](https://www.npmjs.com/package/@tabstack/sdk).

It replaces hand-rolled fetches and HTML parsing with typed `tool()` definitions that pass straight to `generateText` and `streamText`.

## Install

- [npm](#tab-panel-251)
- [pnpm](#tab-panel-252)
- [yarn](#tab-panel-253)

Terminal window

```
npm install @tabstack/ai ai zod
```

Terminal window

```
pnpm add @tabstack/ai ai zod
```

Terminal window

```
yarn add @tabstack/ai ai zod
```

`ai` (v5 or later, v6 ready) and `zod` are peer dependencies, so your app’s single instance of each is shared. The quickstart below also needs a model provider, for example `npm install @ai-sdk/openai`.

## Create and Setup Your API Key

Before you can start using Tabstack API, you’ll need to create an API key and set it up in your environment.

### 1. Create Your API Key

1. Visit the [Tabstack Console](https://console.tabstack.ai/)
2. Sign in to your account (or create one if you haven’t already)
3. Navigate to the API Keys section and click the “Manage API Keys”
4. Once you are on the API Keys page, Click “Create New API Key”
5. Give your key a descriptive name (e.g., “Development”, “Production”) and click the “Create API Key”
6. Copy the generated API key and store it securely

Your API key will only be shown once. Make sure to copy and store it in a secure location.

### 2. Set Up Environment Variable

For security and convenience, we recommend storing your API key as an environment variable rather than hardcoding it in your scripts.

macOS/Linux

Terminal window

```
# Add to your shell profile (~/.bashrc, ~/.zshrc, or ~/.bash_profile)
export TABSTACK_API_KEY="your_api_key_here"


# Or set it temporarily for the current session
export TABSTACK_API_KEY="your_api_key_here"


# Reload your shell or run:
source ~/.bashrc  # or ~/.zshrc
```

Windows (Command Prompt)

```
# Set temporarily for current session
set TABSTACK_API_KEY=your_api_key_here


# Set permanently (requires restart)
setx TABSTACK_API_KEY "your_api_key_here"
```

Windows (PowerShell)

```
# Set temporarily for current session
$env:TABSTACK_API_KEY = "your_api_key_here"


# Set permanently for current user
[Environment]::SetEnvironmentVariable("TABSTACK_API_KEY", "your_api_key_here", "User")
```

### 3. Verify Your Setup

Test that your environment variable is set correctly:

**macOS/Linux/Windows (Git Bash):**

Terminal window

```
echo $TABSTACK_API_KEY
```

**Windows (Command Prompt):**

Terminal window

```
echo %TABSTACK_API_KEY%
```

**Windows (PowerShell):**

Terminal window

```
echo $env:TABSTACK_API_KEY
```

You should see your API key printed in the terminal.

## Quickstart

```
import { openai } from "@ai-sdk/openai";
import { generateText, stepCountIs } from "ai";
import { tabstackTools } from "@tabstack/ai";


try {
  const { text } = await generateText({
    model: openai("gpt-4o"),
    tools: tabstackTools,
    stopWhen: stepCountIs(5), // let the model call a tool, then use the result
    prompt: "What are Vercel's pricing plans and how do they compare?",
  });


  console.log(text);
} catch (err) {
  console.error("Agent run failed:", err);
}
```

`tabstackTools` reads `TABSTACK_API_KEY` from the environment. It is a named object keyed by tool name, ready to pass straight to `tools`.

## The tools

| Tool                       | What it does                                                      |
| -------------------------- | ----------------------------------------------------------------- |
| `extract_structured_data`  | Pull specific fields from a URL into a JSON shape you define.     |
| `extract_page_content`     | Fetch a page as clean markdown.                                   |
| `research_question`        | Synthesize a cited answer across multiple pages.                  |
| `generate_structured_data` | Fetch a page, then AI-transform it into derived or reshaped JSON. |
| `automate_browser_task`    | Run a multi-step, natural-language browser task.                  |

Pass all of them, or pick a subset:

```
import { streamText, stepCountIs } from "ai";
import { tabstackTools } from "@tabstack/ai";


const result = streamText({
  model: openai("gpt-4o"),
  tools: {
    research_question: tabstackTools.research_question,
    extract_page_content: tabstackTools.extract_page_content,
  },
  stopWhen: stepCountIs(5),
  prompt: "Summarize the latest on quantum error correction, with sources.",
});


for await (const chunk of result.textStream) process.stdout.write(chunk);
```

In the AI SDK the model invokes these tools during `generateText`/`streamText`, so there are no per-tool call snippets here. To call a tool directly, use its `execute` method (see [Error handling](#error-handling)) or the [LangChain.js integration](/integrations/langchain-js/index.md), whose tools expose an `invoke` method with the same inputs.

### Tool inputs

The model fills these in, but it helps to know the shapes:

- `extract_structured_data`: `url`, `json_schema_json` (a JSON-encoded JSON Schema string).
- `extract_page_content`: `url`.
- `research_question`: `query`.
- `generate_structured_data`: `url`, `instructions`, `json_schema_json`.
- `automate_browser_task`: `task`, plus optional `url`, `guardrails`, `data`, `country`, `max_iterations`, `max_validation_attempts`.

See [Schema design](/guides/schema-design/index.md) for writing `json_schema_json` that extracts reliably.

## Optional inputs

The model can pass these for finer control; they are sent to Tabstack only when present.

- `extract_structured_data`, `extract_page_content`, `generate_structured_data`:

  - `effort`: `"min"`, `"standard"`, or `"max"`. Use `"max"` for JS-heavy pages. See [Effort levels](/guides/effort-levels/index.md).
  - `nocache`: bypass the cache.
  - `country`: ISO 3166-1 alpha-2 code for [geotargeting](/guides/geotargeting/index.md).

- `research_question`: `mode` (`"fast"` or `"balanced"`), `nocache`.

- `automate_browser_task`: `guardrails` (constraints on what the agent may do), `data` (context for form filling), `country`, `max_iterations`, `max_validation_attempts`.

## Configuration

For a custom API key or base URL, or to reuse one client, build the tools explicitly:

```
import { createTabstackAiTools } from "@tabstack/ai";


const tools = createTabstackAiTools({ apiKey: process.env.MY_KEY });
// or pass an SDK client you already have: createTabstackAiTools({ client })
```

## Error handling

When a tool call fails it throws `TabstackToolError` (a normalized message plus an HTTP `status` for API errors). The AI SDK surfaces this in the tool result. To inspect it yourself when calling a tool’s `execute` directly, catch it:

```
import { TabstackToolError } from "@tabstack/ai";


try {
  await tabstackTools.extract_page_content.execute(
    { url: "https://example.com" },
    { toolCallId: "1", messages: [] },
  );
} catch (err) {
  if (err instanceof TabstackToolError) {
    console.error(`Tabstack failed (${err.status ?? "no status"}): ${err.message}`);
  }
}
```

## Related

- [Integrations overview](/integrations/index.md)
- [Tabstack TypeScript SDK](/sdks/typescript/quickstart/index.md)
- [Schema design](/guides/schema-design/index.md)
- [Tabstack vs. LangChain browser tools](/comparisons/vs-langchain/index.md)
- [LangChain.js integration](/integrations/langchain-js/index.md) and [LangChain Python integration](/integrations/langchain-python/index.md)