From 61a48cde1f739f84a27f8608121299bb5057033b Mon Sep 17 00:00:00 2001 From: Rob Di Marco Date: Mon, 13 Oct 2025 17:41:58 -0400 Subject: [PATCH] Add ATXP MCP server integration for image, video, and browse tools MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- README.md | 33 ++++++++++++++++++++++++++++ src/server.ts | 60 ++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 88 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 01f629a..b53cf7a 100644 --- a/README.md +++ b/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 diff --git a/src/server.ts b/src/server.ts index 167cf69..ec10450 100644 --- a/src/server.ts +++ b/src/server.ts @@ -45,6 +45,46 @@ function getATXPModel(env: Env) { * Chat Agent implementation that handles real-time AI chat interactions */ export class Chat extends AIChatAgent { + 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 */ @@ -52,9 +92,8 @@ export class Chat extends AIChatAgent { onFinish: StreamTextOnFinishCallback, _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 { 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),