Skip to main content

​
Overview

Cloudflare Agents provides a platform for building AI-powered chat agents that run on Cloudflare’s edge network. By combining Cloudflare Agents with ATXP’s pay-per-use MCP tools, you can create AI applications that can generate images, search the web, browse websites, and more - all with usage-based pricing and seamless deployment. This guide will show you how to integrate ATXP’s MCP tools with Cloudflare Agents to build a chat agent with image generation capabilities. You can find a full working example at atxp-cloudflare-agent-example.

​
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 can visit the ATXP account dashboard to get your connection string.
2

Create your project

Create a new Cloudflare Agent project:
npx create-cloudflare@latest --template cloudflare/agents-starter my-atxp-agent
cd my-atxp-agent
3

Install ATXP client

Add the ATXP client to your project:
npm install @atxp/client
The @atxp/client package provides the MCP transport that allows you to use ATXP’s MCP tools in your Cloudflare Agent.
4

Configure environment

Create a .dev.vars file in your project root:
OPENAI_API_KEY=your_openai_api_key_here
ATXP_CONNECTION_STRING=https://accounts.atxp.ai?connection_token=<your_token>
Never commit your .dev.vars file to version control. Make sure it’s included in your .gitignore file.

​
Basic integration

Here’s how to add ATXP image generation to your Cloudflare Agent: 
import { tool } from "agents";
import { z } from "zod";
import { ATXPAccount, buildStreamableTransport, createMCPClient } from "@atxp/client";

export const generateImage = tool({
  description: "Generate an image from a text prompt using ATXP",
  parameters: z.object({
    prompt: z.string().describe("The text prompt to generate an image from"),
  }),
  execute: async ({ prompt }, { env, agent }) => {
    try {
      // Initialize ATXP account
      const account = new ATXPAccount(env.ATXP_CONNECTION_STRING);

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

      // Create MCP client
      const client = await createMCPClient({ transport });

      // Generate the image
      const result = await client.callTool('generate_image', {
        prompt: prompt,
        size: '1024x1024'
      });

      if (result.toolResult.content[0].type === 'text') {
        const response = JSON.parse(result.toolResult.content[0].text);

        if (response.image_url) {
          return `Image generated successfully! Here's your image: ![${prompt}](${response.image_url})`;
        } else {
          return `Image generation started. Task ID: ${response.task_id}`;
        }
      }

      return "Image generation request submitted successfully.";
    } catch (error) {
      console.error('Image generation error:', error);
      return `Failed to generate image: ${error.message}`;
    }
  },
});

​
Deploy your agent

1

Set production secrets

Configure your production environment variables:
wrangler secret put OPENAI_API_KEY
wrangler secret put ATXP_CONNECTION_STRING
2

Deploy to Cloudflare

Deploy your agent:
npm run deploy
Your agent will be available at your Cloudflare Workers subdomain.

​
Test your agent

Once deployed, you can test your agent by asking it to generate images: 
User: "Generate an image of a sunset over mountains"
Agent: "I'll generate an image of a sunset over mountains for you..."
[Image appears in the chat when complete]

​
Next steps

Now that you have a working Cloudflare Agent with ATXP integration, you can explore more:

MCP server documentation

Learn about other ATXP tools like web search and file storage.

Build a CLI agent

Try building a CLI agent.