MCP Server Demo Dn

🚀 MCP Server Coding Demonstration Guide

This guide provides a step-by-step process for coding and configuring an MCP server, including cloning the repository, API selection, configuration, installation, and testing.

🚀 Quick Start

Step 1: Clone the Repository

1. Create a folder on your device to store the MCP server for better organization.
2. Clone this repository into the folder.

Step 2: Review Source Files

• Navigate to the src folder and review the following files:
  • index.ts: A basic server template that needs modification.
  • demo.ts: A working example demonstrating API integration methods.

Step 3: Select an API

1. Go to RapidAPI and find an API and its endpoints that interest you.
2. Obtain access and your authorization key. Review the example output to understand how the requests are structured.
3. Ensure you correctly obtain the headers, authorization details, and request parameters.

⚠️ Important Note

It is recommended to choose an API with good ratings and clear output. Ensuring its reliability is crucial.

Step 4: Configure Your Demonstration

1. Define the server name - Choose a name that is easy for you or the end - user to recognize.
2. Define your tools: Select a meaningful name for your use case. Collect parameters and mark the required ones.
3. Configure resources:
   • Ensure the API is called correctly. Configure your authorization headers and endpoint URLs.
   • Pass the correct data for the requests.
   • Pay attention to proper authentication handling (either in the MCP configuration or in the .env file).

Step 5: Install and Build

1. If you haven't installed the dependencies yet, run the following commands:

   npm install
   npm run build
   

Step 6: Configure Your Chat Application

1. Use the example configuration as a baseline, edit it, and complete the following:
   • Set the correct path to the built files.
   • Configure the appropriate tool names.
   • Ensure the commands are correct.
   • Insert your API key as an environment variable.
2. Save the configuration file to your cloud desktop or 5ire settings.

• ~/Library/Application Support

3. Restart the chat application to apply the changes.

{
  "stock": {
    "command": "node",
    "args": ["users/mcp-servers/mcp-server-demo-1/build/demo.js"],
    "env": {
      "RAPIDAPI_KEY": "XXX-XXX-XXX-XXX-XXX-XXX-XXX-XXX-XXX"
    },
    "disabled": false,
    "autoApprove": []
  }
}

Step 8: Test Your Setup

• Start a chat session to verify if the server runs as expected.

🔧 Technical Details

Debugging and Troubleshooting

• Commands and methods.

📚 Documentation

Need Help?

• MCP Configuration on Claude Desktop (User Guide)
  https://modelcontextprotocol.io/quickstart/user
• Quick Start Guide for Creating an MCP Server (Developer Guide)
  https://modelcontextprotocol.io/quickstart/server
• MCP 101 and Building an MCP Server
  https://glama.ai/blog/2024-11-25-model-context-protocol-quickstart
• TS MCP SDK
  https://github.com/modelcontextprotocol/typescript-sdk
• 5ire - How to Add MCP
  • Open the application support folder and edit the MCP configuration file.
    https://5ire.app/docs

Not Confident with the Code? - Consider Using Cline

• Install Cline on VS Code. https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev
• Add your API key to Cline.
• Select a powerful model (Claude3.5, Deepseek, Gpt4o, or Gemini Pro).
• Create a new directory and instruct Cline to build an MCP server for you.
• You can use the example prompts included in the repository.

Additional Notes

• Specific debugging resource links and chat application configuration information will be added.
• MCP servers can be directly deployed and tested in Klein.