​
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 with Express

Try building an agent with Express for more traditional web development.

Join the community

Connect with other developers building with ATXP and get support.