​
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, browse websites, 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.

​
Setup

1

Create ATXP Account

If you don’t have an ATXP account yet, create one and copy your ATXP connection string. It should look something like this:

https://accounts.atxp.ai?connection_token=<random_string>

If you’ve already created an ATXP account, you visit the ATXP account dashboard to get your connection string.
2

Install Dependencies

Install the required packages in your project:
npm install @atxp/client ai @ai-sdk/openai
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.
3

Configure Environment

Create a .env file with your credentials:
ATXP_CONNECTION_STRING=https://accounts.atxp.ai?connection_token=<your_token>
OPENAI_API_KEY=your_openai_api_key_here
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.
echo .env >> .gitignore

​
Basic Integration

Here’s how to set up the basic integration between ATXP and Vercel AI SDK:

import { buildStreamableTransport, ATXPAccount } from '@atxp/client';
import { generateText, experimental_createMCPClient } from 'ai';
import { openai } from '@ai-sdk/openai';

try {
  // Initialize ATXP account
  const account = new ATXPAccount(process.env.ATXP_CONNECTION_STRING!);

  // Create streamable transport for a specific ATXP MCP server
  const transport = buildStreamableTransport({
    mcpServer: 'https://search.mcp.atxp.ai',
    account,
  });

  // Create an MCP client using Vercel AI SDK
  const mcpClient = await experimental_createMCPClient({ transport });

  // Get available tools from the MCP client
  const tools = await mcpClient.tools();

  // Use the tools with OpenAI's GPT-4o-mini model
  const response = await generateText({
    model: openai('gpt-4o-mini'),
    tools,
    messages: [
      {
        id: '1',
        role: 'system',
        content: 'You are a helpful assistant that can search the web. You prefer to use the tools provided to you to answer questions.',
      },
      {
        id: '2',
        role: 'user',
        content: 'Search for the latest news about artificial intelligence',
      },
    ],
  });

  console.log(JSON.stringify(response, null, 2));
} catch (error) {
  console.error(error);
}

​
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:

MCP Server Documentation

Learn about specific tools and capabilities available in each ATXP MCP server.

Build an agent using paid MCP servers

Follow a complete tutorial to build your first ATXP-powered agent.

Join the community

Join the ATXP community on Discord to ask questions, share your projects, and get help from the team.