Cryptogecko MCP Client

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