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

# Build an agent with Vercel AI

> Learn how to integrate ATXP's pay-per-use MCP tools with Vercel AI SDK for streaming AI applications

## Overview

The Vercel AI SDK provides powerful tools for building AI applications with streaming responses, while ATXP offers pay-per-use access to various MCP (Model Context Protocol) tools. By combining them, you can create AI applications that can search the web, generate images, crawl sites, and more - all with usage-based pricing. This guide will show you how to integrate ATXP's MCP tools with the Vercel AI SDK for streaming responses and real-time interactions.

You can find a full example of integrating ATXP's SDK with the Vercel AI SDK in the [ATXP Vercel AI SDK demo](https://github.com/atxp-dev/atxp-vercel-demo).

## Prerequisites

#### Create an ATXP account

<p>
  If you don't have an ATXP account yet, <a href="/developers/build-agents/create-account" target="_blank">create one</a> and copy your ATXP connection string. It should look something like this:

  ```bash theme={null}
  https://accounts.atxp.ai?connection_token=<random_string>
  ```
</p>

<Tip>
  If you've already created an ATXP account, you visit the <a href="https://accounts.atxp.ai" target="_blank">ATXP account dashboard</a> to get your connection string.
</Tip>

## Usage

<Tabs>
  <Tab title="LLM Gateway">
    ATXP provides a [LLM Gateway](/agents/llm-gateway) that allows you to use *any model from any provider* and pay per use using only your ATXP account's connection string.

    <Steps>
      <Step title="Install dependencies">
        Install the required packages in your project:

        ```bash theme={null}
        npm install @atxp/client ai @ai-sdk/openai @ai-sdk/openai-compatible
        ```
      </Step>

      <Step title="Configure environment">
        Create a `.env` file with your connection string:

        ```bash .env lines theme={null}
        # ATXP connection string from your ATXP account dashboard (https://accounts.atxp.ai)
        ATXP_CONNECTION=https://accounts.atxp.ai?connection_token=<your_token>&account_id=<your_account_id>
        ```

        <Warning>
          Never commit your `.env` file to version control. It is a good idea to add your `.env` to your `.gitignore` file to prevent it from being committed.

          ```bash theme={null}
          echo .env >> .gitignore
          ```
        </Warning>
      </Step>

      <Step title="Import the needed libraries">
        To use ATXP with the Vercel AI SDK, you need to import a few things from the Vercel AI SDK and the ATXP client SDK. The Vercel AI SDK supports OpenAI-compatible models through the `createOpenAICompatible` function, which we need in order to use the LLM Gateway.

        ```typescript Import libraries theme={null}
        import { buildStreamableTransport, ATXPAccount } from '@atxp/client';
        import { generateText, experimental_createMCPClient } from 'ai';
        import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
        ```
      </Step>

      <Step title="Initialize the ATXP account">
        Initialize the ATXP account by creating a new `ATXPAccount` object with your ATXP connection string.

        ```typescript Initialize ATXP account theme={null}
        const account = new ATXPAccount(process.env.ATXP_CONNECTION!);
        ```
      </Step>

      <Step title="Create a streamable transport">
        Create a streamable transport for a specific ATXP MCP server by using the `buildStreamableTransport` function.

        ```typescript Create a streamable transport theme={null}
        const transport = buildStreamableTransport({
          mcpServer: 'https://search.mcp.atxp.ai',
          account,
        });
        ```
      </Step>

      <Step title="Create an MCP client">
        Create an MCP client using the `experimental_createMCPClient` function.

        ```typescript Create an MCP client theme={null}
        const mcpClient = await experimental_createMCPClient({ transport });
        ```
      </Step>

      <Step title="Get available tools">
        Get available tools from the MCP client by using the `tools` function.

        ```typescript Get available tools theme={null}
        const tools = await mcpClient.tools();
        ```
      </Step>

      <Step title="Create an OpenAI-compatible client">
        Create an OpenAI-compatible client using the `createOpenAICompatible` function.

        ```typescript Create an OpenAI-compatible client theme={null}
        const atxp = createOpenAICompatible({
          name: 'atxp-llm',
          apiKey: process.env.ATXP_CONNECTION,
          baseURL: 'https://llm.atxp.ai/v1',
        });
        ```
      </Step>

      <Step title="Use the LLM Gateway">
        Use the LLM Gateway to call the specific model with the tools available from the MCP server.

        Your ATXP Account will be used to pay for the tokens used by the specified model. See [the docs](/agents/llm-gateway/models) for more information on available models and pricing.

        ```typescript Use the tools with the LLM Gateway theme={null}
        const response = await generateText({
          model: atxp("gpt-4.1"),
          tools,
          messages: [
            ...systemPrompt,
            {
              role: "user",
              content: prompt,
            },
          ],
        });
        console.log(JSON.stringify(response, null, 2));
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Basic">
    If you have your own OpenAI key, you can use it directly with the Vercel AI SDK and ATXP.

    <Tip>
      If you don't have an OpenAI key, you can use the [ATXP LLM Gateway](/agents/llm-gateway) to use your ATXP account to pay-per-use for any OpenAI-compatible model.
    </Tip>

    <Steps>
      <Step title="Install dependencies">
        Install the required packages in your project:

        ```bash theme={null}
        npm install @atxp/client ai @ai-sdk/openai
        ```

        <Info>
          The `@atxp/client` package provides the MCP transport that allows you to use ATXP's MCP tools in your Vercel AI SDK application, while `ai` and `@ai-sdk/openai` are from Vercel's AI SDK.
        </Info>
      </Step>

      <Step title="Configure environment">
        Create a `.env` file with your ATXP connection string and OpenAI API key:

        ```bash .env lines theme={null}
        # ATXP connection string from https://accounts.atxp.ai
        ATXP_CONNECTION=https://accounts.atxp.ai?connection_token=<your_token>&account_id=<your_account_id>

        # Required for the OpenAI client
        OPENAI_API_KEY=your_openai_api_key_here
        ```

        <Warning>
          Never commit your `.env` file to version control. It is a good idea to add your `.env` to your `.gitignore` file to prevent it from being committed.

          ```bash theme={null}
          echo .env >> .gitignore
          ```
        </Warning>
      </Step>

      <Step title="Import the needed libraries">
        To use ATXP with the Vercel AI SDK, you need to import a few things from the Vercel AI SDK and the ATXP client SDK. The Vercel AI SDK supports OpenAI models through the `openai` function, which we need in order to use your own OpenAI key.

        ```typescript Import libraries theme={null}
        import { buildStreamableTransport, ATXPAccount } from '@atxp/client';
        import { generateText, experimental_createMCPClient } from 'ai';
        import { openai } from '@ai-sdk/openai';
        ```
      </Step>

      <Step title="Initialize the ATXP account">
        Initialize the ATXP account by creating a new `ATXPAccount` object with your ATXP connection string.

        ```typescript Initialize ATXP account theme={null}
        const account = new ATXPAccount(process.env.ATXP_CONNECTION!);
        ```
      </Step>

      <Step title="Create a streamable transport">
        Create a streamable transport for a specific ATXP MCP server by using the `buildStreamableTransport` function.

        ```typescript Create a streamable transport theme={null}
        const transport = buildStreamableTransport({
          mcpServer: 'https://search.mcp.atxp.ai',
          account,
        });
        ```
      </Step>

      <Step title="Create an MCP client">
        Create an MCP client using the `experimental_createMCPClient` function.

        ```typescript Create an MCP client theme={null}
        const mcpClient = await experimental_createMCPClient({ transport });
        ```
      </Step>

      <Step title="Get available tools">
        Get available tools from the MCP client by using the `tools` function.

        ```typescript Get available tools theme={null}
        const tools = await mcpClient.tools();
        ```
      </Step>

      <Step title="Call the LLM">
        Use the OpenAI client to call the LLM with the tools available from the MCP server.

        ```typescript Call the LLM theme={null}
        const response = await generateText({
          model: openai('gpt-4o-mini'),
          tools,
          messages: [
            ...systemPrompt,
            {
              role: "user",
              content: prompt,
            },
          ],
        });
        console.log(JSON.stringify(response, null, 2));
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

<Tip>
  You can find a full example of integrating ATXP's SDK with the Vercel AI SDK in the [ATXP Vercel AI SDK demo](https://github.com/atxp-dev/atxp-vercel-demo).
</Tip>

## Next steps

Now that you have the basics, you're ready to start building your own applications. You can explore the following topics to learn more:

<CardGroup cols={3}>
  <Card title="MCP server documentation" icon="book" href="/tools">
    Learn about specific tools and capabilities available in each ATXP MCP server.
  </Card>

  <Card title="Build an agent using paid MCP servers" icon="robot" href="/developers/build-agents/tutorial">
    Follow a complete tutorial to build your first ATXP-powered agent.
  </Card>
</CardGroup>