Content
## Client Setup
### Prerequisites
- Node.js 18+
- npm or yarn
### Installation
1. Create a new React project:
```bash
npx create-react-app crypto-mcp-client
cd crypto-mcp-client
```
2. Install required dependencies:
```bash
npm install @modelcontextprotocol/sdk tailwindcss
npm install @anthropic-ai/sdk
```
You might need sometimes to use legacy peer dependencies
```bash
--legacy-peer-deps
```
3. Set up Tailwind CSS:
```bash
npx tailwindcss init
```
4. Update `tailwind.config.js`:
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
5. Add Tailwind directives to your CSS:
```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:
```tsx
import React from 'react';
import './App.css';
import CryptoDashboard from './CryptoDashboard';
function App() {
return (
<div className="App">
<CryptoDashboard />
</div>
);
}
export default App;
```
9. Add tsconfig.json
```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"]
}
```
8. Start the client:
```bash
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
You Might Also Like
Ollama
Ollama enables easy access to large language models on various platforms.

n8n
n8n is a secure workflow automation platform for technical teams with 400+...
OpenWebUI
Open WebUI is an extensible web interface for customizable applications.

Dify
Dify is a platform for AI workflows, enabling file uploads and self-hosting.

Zed
Zed is a high-performance multiplayer code editor from the creators of Atom.
MarkItDown MCP
markitdown-mcp is a lightweight MCP server for converting various URIs to Markdown.