Transformer l'intelligence sociale en informations commerciales à l'aide du protocole de contexte modèle (MCP) et d'analyse alimentée par AI
Les intégrations API traditionnelles obligent les développeurs à orchestrer manuellement plusieurs points de terminaison, à gérer les scénarios d'erreur complexes et à créer une logique de mise en forme de données personnalisée. Cela crée des frais généraux et des charges de maintenance importantes.
Le protocole de contexte du modèle (MCP) révolutionne comment les systèmes d'IA accèdent aux données en temps réel. Au lieu de l'intégration manuelle de l'API, MCP crée des connexions sécurisées et standardisées entre les modèles d'IA et les sources de données.
Cela signifie que votre IA peut orchestrer intelligemment plusieurs outils de données, prendre des décisions complexes et générer des informations qui prendraient des heures à coder manuellement.
Dans ce tutoriel, vous créerez un terminal commercial de l'IA prêt pour la production qui:
• ✅ Intégration MCP - Connexion directe entre les outils Google Gemini AI et Lunarcrush • ✅ Orchestration AI - Gemini sélectionne et combine intelligemment plusieurs sources de données • ✅ Analyse en temps réel - Suivi de progrès en direct via un pipeline AI à 6 étapes • ✅ Charte interactive - Historique des prix visuels avec une conception réactive • ✅ Cacheing intellige
Investissement en temps: 20 minutes Niveau de compétence: débutant à intermédiaire ce que vous apprendrez: Remix, TypeScript, intégration MCP, orchestration AI, traitement des données en temps réel
💡 CONSEIL Pro: À la fin, vous aurez un projet digne d'un portefeuille qui démontre des modèles de développement d'IA modernes avec MCP!
Exemple en direct: voir la version déployée →
Vous aurez besoin:
• Node.js 18+ installé • Connaissance de base de React / TypeScript • Un éditeur de code (VS Code recommandé) • 2 touches API de différents services (nous allons parcourir l'inscription ci-dessous)
Deux façons de vivre ce tutoriel:
Configuration rapide du projet:
# Nous allons construire cette étape par étape, mais voici la structure finale: npx create-remix @ dernier lunarcrush-mcp - Template remix-run / remix / templates / remix --typescript cd lunarcrush-mcp npm install @ google / générative-a @ modelcontextProtoCol / sdk @ heroui / react recharts🚨 Problème commun: assurez-vous que Node.js 18+ est installé. Vérifier avecNode - Version
Nous avons besoin de 2 services pour ce projet. Les deux ont des niveaux gratuits généreux!
Lunarcrush fournit des données de sentiment social auxquelles la plupart des commerçants n'ont pas accès.
Générez votre clé API:
Une fois que vous avez abonné, accédez à la page d'authentification de l'API et générez une clé API.
Enregistrez cette touche API - vous l'ajouterez à vos variables d'environnement plus tard.
L'IA Gemini de Google orchestrara les outils Lunarcrush et générera des recommandations de trading.
Aiza ...)# Créer un nouveau projet Remix avec TypeScript NPX Create-Remix @ Dernier Lunarcrush-MCP - Template remix-run / remix / Templates / Remix --TypeScript CD Lunarcrush-MCP # Installer les dépendances requises NPM Installer @ Google / Generative-Aai @ ModelContextProtoCol / SDK @ Heroui / React Recharts CLSX Talwind-Merre @ Types / Node --Save-Dev # Créer un fichier d'environnement Touch .env.LocalAjoutez vos clés API à.env.local:
# .env.local lunarcrush_api_key = lc_your_key_here google_gemini_api_key = your_gemini_key_here# Créer une structure de répertoire (certains peuvent déjà exister) MKDIR -P Composants Hooks Config Types # Create TypeScript Interfaces Cat> Types / index.ts << 'eof' import {svgprops} depuis "react"; type d'exportation iconsvgprops = svgprops& {size ?: numéro; }; // GEMINI TYPES AI EXPROFFACE Interface GEMINIRESPONSE {candidats ?: Array <{Content ?: {Parts ?: Array <{Text ?: String; }>; }; }>; } // Trading Analysis Types d'interface d'exportation Tradinganalysis {symbole: String; Recommandation: «acheter» | 'Vendre' | 'PRISE'; Confiance: numéro; Raisonnement: chaîne; Social_Sentiment: «haussier» | 'Bearish' | 'neutre'; Key_Metrics: Enregistrer; Ai_analysis: {Résumé ?: String; pros ?: String []; Cons ?: String []; key_factors ?: String []; } | chaîne; Timestamp: String; chart_data: array <{date: string; Prix: numéro}>; Succès: booléen; error ?: String; TraiteTime ?: Numéro; } // Types d'appels Types d'exportation Interface Toolcall {Tool: String; Args: enregistrer; Raison: String; } // Types d'outils MCP Interface d'exportation mcptool {name: string; inputSchema: {type: string; Propriétés ?: Enregistrer; requis ?: String []; }; Titre ?: String; Description ?: String; SUCTIONSCHEMA ?: Enregistrer; Annotations ?: Enregistrer; } // Types de résultats de l'outil Exportation de l'interface ToolResult {Tool: String; Args: enregistrer; Raison: String; Résultat ?: Inconnu; error ?: String; } Eof # Créer MCP Server Hook Cat> Hooks / usemcPServer.js << 'eof' // src / hooks / usegeminimcp.js import {usemcp} depuis 'use-mcp / react'; const usemcpSserver = ({url, clientName, autoreConnect = true, config}) => {// connection mcp via use-mcp const {état, // état de connexion: 'découverte' | «Authentification» | «Connexion» | «Chargement» | 'Ready' | Outils «Échec», // Tools disponibles sur MCP Server CallTool, // Fonction pour appeler des outils sur le serveur MCP} = USEMCP ({URL, ClientName, AutoreConnect, ... Config,}); return {outils, calltool, state,}; }; Exporter par défaut USEMCPSServer; Eof# Création du composant Advanced Crypto Chart Cat> App / Components / Cryptochart.tsx << 'eof' import {lineChart, line, xaxis, yaxis, cartesiriangrid, toolst, responsableContainer,} de 'recharts'; interface chartData {date: string; Close: numéro; } interface cryptochartProps {data: chartData []; symbole: String; } Fonction par défaut Export Cryptochart ({data, symbole}: cryptochartProps) {if (! data || data.length === 0) {return (Aucune donnée de graphique disponible
)); } // Formater la date pour l'affichage const FormatDate = (datestr: string) => {const date = new Date (datestr); return date.tolocaledatestring ('en-us', {mois: 'short', jour: 'numérique',}); }; // Prix de format pour l'affichage const FormatPrice = (prix: numéro) => {if (prix <0,01) {return `$$ {prix.tofixed (6)}`; } else if (prix <1) {return `$$ {prix.tofixed (4)}`; } else {return `$$ {prix.tolocalestring ()}`; }}; retour ({symbole} Historique des prix (la semaine dernière)
Données de prix historiques de Lunarcrush Topic_time_Series
`Date: $ {formatdate (label)}`} formatter = {(valeur: nombre) => [formatprice (valeur), 'Price']} contenuStyle = {{backgroundColor: '# 1f2937', border: '1px solide # 374151', limite: '6...
[Courte citation de 8% de l'article original]