Cryptogecko Mcp Client

What is Cryptogecko Mcp Client

cryptogecko-mcp-client is a client application built using React that interacts with the Model Context Protocol (MCP) for managing cryptocurrency data and functionalities.

Use cases

Use cases include building cryptocurrency dashboards, managing crypto portfolios, and integrating various crypto data sources for analytics and reporting.

How to use

To use cryptogecko-mcp-client, set up a new React project, install the necessary dependencies, configure Tailwind CSS, and implement the TypeScript client code along with the React components as outlined in the setup instructions.

Key features

Key features include integration with the Model Context Protocol SDK, support for Tailwind CSS for styling, and a modular structure that allows for easy updates and maintenance.

Where to use

cryptogecko-mcp-client can be used in cryptocurrency applications, dashboards, and any platform requiring real-time data management and visualization of crypto assets.

Client Setup

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Create a new React project:

   npx create-react-app crypto-mcp-client
   cd crypto-mcp-client
   

2. Install required dependencies:

   npm install @modelcontextprotocol/sdk tailwindcss
   npm install @anthropic-ai/sdk
   

You might need sometimes to use legacy peer dependencies

--legacy-peer-deps

3. Set up Tailwind CSS:

   npx tailwindcss init
   

4. Update tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

5. Add Tailwind directives to your CSS:

   /* src/index.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

6. Create TypeScript files:

   • Save the TypeScript client code to src/CryptoMcpClient.ts
   • Save the React component code to src/CryptoDashboard.tsx

7. Update src/App.tsx to use the dashboard:

   import React from 'react';
   import './App.css';
   import CryptoDashboard from './CryptoDashboard';
   
   function App() {
     return (
       <div className="App">
         <CryptoDashboard />
       </div>
     );
   }
   
   export default App;
   

8. Add tsconfig.json

   {
     "compilerOptions": {
       "target": "es5",
       "lib": [
         "dom",
         "dom.iterable",
         "esnext"
       ],
       "allowJs": true,
       "skipLibCheck": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
       "strict": true,
       "forceConsistentCasingInFileNames": true,
       "noFallthroughCasesInSwitch": true,
       "module": "esnext",
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "isolatedModules": true,
       "noEmit": true,
       "jsx": "react-jsx",
       "baseUrl": ".",
       "paths": {
         "@modelcontextprotocol/sdk/*": [
           "node_modules/@modelcontextprotocol/sdk/*"
         ]
       }
     },
     "include": [
       "src"
     ]
   }
   

9. Start the client:

   npm start
   

The client will be available at http://localhost:3000.

MCP Communication Flow

1. The client connects to the server using Server-Sent Events (SSE) at the /sse endpoint
2. The client creates a session with the server
3. The client calls MCP tools provided by the server
4. Communication between client and server happens through:
   • SSE connection for server-to-client messages
   • POST requests to /messages/ for client-to-server messages
5. The server processes requests and returns results through the established SSE connection

Available Tools

The server exposes four main tools:

1. get_price: Get cryptocurrency prices in various currencies

   • Parameters: vs_currencies, ids, symbols

2. get_coin_list: Get list of all available coins

   • No parameters required

3. get_market_data: Get detailed market data for cryptocurrencies

   • Parameters: vs_currency, ids, category, order, per_page, page, sparkline

4. get_trending: Get trending coins in the last 24 hours

   • No parameters required