Add ATXP MCP server integration for image, video, and browse tools (#1)

- Integrate image.mcp.atxp.ai for image generation capabilities
- Integrate video.mcp.atxp.ai for video creation from text prompts
- Integrate browse.mcp.atxp.ai for web browsing and screenshot capabilities
- Use ATXP proxy URLs to avoid per-request charges
- Initialize MCP servers on first chat message
- Enhanced system prompt to describe new capabilities
- Updated README with MCP tool documentation and example prompts

This implements ATXP-409 and enhances the template created in ATXP-405
with advanced MCP capabilities that demonstrate the power of the ATXP
platform for building AI agents.

Fixes ATXP-405
Fixes ATXP-409

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: robdimarco-atxp

README.md

@@ -11,11 +11,44 @@ A starter template for building AI-powered chat agents using Cloudflare's Agent
 - 💬 Interactive chat interface with AI
 - 🛠️ Built-in tool system with human-in-the-loop confirmation
 - 📅 Advanced task scheduling (one-time, delayed, and recurring via cron)
+- 🎨 **Image Generation** - Create images from natural language descriptions
+- 🎬 **Video Creation** - Generate videos from text prompts with realistic styles
+- 🌐 **Web Browsing** - Browse websites, capture screenshots, and extract information
 - 🌓 Dark/Light theme support
 - ⚡️ Real-time streaming responses
 - 🔄 State management and chat history
 - 🎨 Modern, responsive UI
 
+## MCP Tool Capabilities
+
+This starter automatically connects to ATXP MCP (Model Context Protocol) servers when configured with an `ATXP_CONNECTION`, providing advanced capabilities:
+
+### 🎨 Image Generation
+
+Create images from natural language descriptions. Try prompts like:
+
+- "Create an image of a sunset over mountains"
+- "Generate a logo for a tech startup"
+- "Draw a cartoon character with blue hair"
+
+### 🎬 Video Creation
+
+Generate videos from text prompts with various styles. Try prompts like:
+
+- "Create a video of waves crashing on a beach"
+- "Generate a timelapse of a city at night"
+- "Make a video showing a product rotating"
+
+### 🌐 Web Browsing
+
+Browse websites, capture screenshots, and extract information. Try prompts like:
+
+- "Take a screenshot of example.com"
+- "What's on the homepage of github.com?"
+- "Extract the main article from this news site"
+
+These capabilities are automatically enabled when you set up your ATXP connection string. No additional configuration required!
+
 ## Prerequisites
 
 - Cloudflare account

src/server.ts

@@ -45,16 +45,55 @@ function getATXPModel(env: Env) {
  * Chat Agent implementation that handles real-time AI chat interactions
  */
 export class Chat extends AIChatAgent<Env> {
+  private mcpServersInitialized = false;
+
+  /**
+   * Initialize ATXP MCP servers (image, video, browse)
+   */
+  private async initializeMcpServers() {
+    if (this.mcpServersInitialized) {
+      return;
+    }
+
+    const atxpConnection =
+      this.env.ATXP_CONNECTION || process.env.ATXP_CONNECTION;
+
+    if (!atxpConnection) {
+      console.warn(
+        "ATXP_CONNECTION not set, skipping MCP server initialization"
+      );
+      return;
+    }
+
+    const callbackHost = "https://accounts.atxp.ai";
+    const mcpServers = [
+      { name: "image", server: "image.mcp.atxp.ai" },
+      { name: "video", server: "video.mcp.atxp.ai" },
+      { name: "browse", server: "browse.mcp.atxp.ai" }
+    ];
+
+    for (const { name, server } of mcpServers) {
+      const proxyUrl = `${atxpConnection}&server=${server}`;
+      try {
+        await this.addMcpServer(name, proxyUrl, callbackHost, "agents");
+        console.log(`Successfully connected to ${name} MCP server`);
+      } catch (error) {
+        console.error(`Failed to connect to ${name} MCP server:`, error);
+      }
+    }
+
+    this.mcpServersInitialized = true;
+  }
+
   /**
    * Handles incoming chat messages and manages the response stream
    */
   async onChatMessage(
     onFinish: StreamTextOnFinishCallback<ToolSet>,
     _options?: { abortSignal?: AbortSignal }
   ) {
-    // const mcpConnection = await this.mcp.connect(
-    //   "https://path-to-mcp-server/sse"
-    // );
+    // Initialize MCP servers on first message
+    await this.initializeMcpServers();
 
     // Collect all tools, including MCP tools
     const allTools = {
@@ -80,11 +119,22 @@ export class Chat extends AIChatAgent<Env> {
         const model = getATXPModel(this.env);
 
         const result = streamText({
-          system: `You are a helpful assistant that can do various tasks...
+          system: `You are a helpful assistant with advanced capabilities including:
+
+**Image Generation**: Create images from natural language descriptions using the image tools
+**Video Creation**: Generate videos from text prompts with realistic styles using the video tools
+**Web Browsing**: Browse websites, capture screenshots, extract information, and automate web tasks using the browse tools
+**Task Scheduling**: Schedule tasks for future execution
 
 ${getSchedulePrompt({ date: new Date() })}
 
-If the user asks to schedule a task, use the schedule tool to schedule the task.
+When users request:
+- Image creation: Use the available image generation tools
+- Video creation: Use the available video generation tools
+- Website information or screenshots: Use the browse tools
+- Future task execution: Use the schedule tool
+
+Be creative and helpful in using these capabilities to assist the user!
 `,
 
           messages: convertToModelMessages(processedMessages),