Your First Claude MCP Server with Windsurf: Building Flux Image Generation and Weather Services from Scratch
Today, we will walk through how to develop your first Claude MCP Server using the Windsurf editor, building a Flux image generation service and a weather query service based on the Model Context Protocol (MCP), from scratch.
Case 1: Weather Query Service
The weather query service built using MCP leverages the OpenWeather API to provide the following functionalities:
1. API Functionality and Implementation
- The service accepts a city name as input and returns the corresponding weather data.
- For example, I requested the weather data for New York, followed by a query for the weather conditions of the world’s top 10 most livable cities.
2. Advantages of MCP Intelligence
MCP not only calls weather data via API but also enables data analysis and provides additional insights. The power of Claude’s large models enhances the interactivity and usefulness of the service.
3. Development and Configuration
- Register and obtain an OpenWeather API Key.
- Use the
uvcommand to quickly create an MCP Server. - Edit the JSON and
.envconfiguration files to complete the API integration.
Case 2: Developing Flux Image Generation Service Using Windsurf Editor
Based on Together AI’s Flux model, I developed an image generation service and integrated it with Claude MCP. The following are key steps in its implementation:
1. Service Functionality and Scenarios
- The service generates images related to user prompts.
- Automatically generates HTML and MD pages, displaying images alongside content.
2. Development Process
- Configure the Together AI API Key to integrate the Flux model.
- Debug in the Claude MCP client to generate images and page content.
3. Real-World Display
- The service generated a stylized set of images based on the “mobile phone” theme.
- Images are saved locally for easy future use.
4. Challenges Encountered
- When the generated HTML content is too long, Claude MCP might interrupt the generation process. Adjusting the logic successfully solved this issue.
- Missing or erroneous configuration files were quickly fixed using Windsurf, and the service was rerun.
Summary: Fundamental Knowledge and Tools for MCP Development
Here are some commonly used tools and operations during the development process:
1. MCP Official Documentation Analysis
The official MCP documentation provides detailed installation and development guides, making it ideal for beginners. Starting with basic examples, you can gradually master the core concepts of MCP.
2. Windsurf Collaborative Development
Windsurf, an AI editor developed by Codeium, supports the full workflow from code generation to debugging. In this development process, Windsurf helped me quickly solve multiple debugging issues, accelerating the development speed.
3. Common Commands and Plugins
- Use the
uvcommand to quickly generate the MCP Server and configure it. - Use the GitHub plugin to download relevant repositories and avoid manual file handling.
Full Development Process
Here’s a summary of the complete process for building the Claude MCP Server:
1. Create and Configure MCP Server
- Use the
uvx create-mcp-servercommand to create the service. - Complete the API configuration in the JSON and
.envfiles. - Test using the Claude MCP client.
2. Implement Service Logic
- Generate the image generation code in Windsurf.
- Load the service in Claude MCP, optimize and expand it.
3. Continuous Debugging and Optimization
- Enable Claude MCP Developer Mode to monitor logs in real-time and troubleshoot.
- Use Windsurf and other tools to quickly complete iterations.
Conclusion
By following the steps above, I successfully created and ran the Claude MCP Server. Both the weather query and image generation services showcase the powerful capabilities and flexibility of the MCP framework. Furthermore, Claude offers other models, but the key point is that MCP requires you to download the Claude AI desktop application. It provides the Claude Opus, Claude 3.5, and Sonnet engines, making local development and MCP service setup much easier.