retour projet actuel

MCP Server

Serveur MCP (Model Context Protocol) qui permet à un LLM de générer des meubles comme un conseiller humain à partir de texte ou croquis d'un client.

IA x tools

MCP

(Model Context Protocol)

Sécurité

3 Couches

Turnstile & Thumbmark

Production

Clients

interface sécurisée

Live in Production

Mon projet phare

L'objectif : permettre aux clients d'obtenir un meuble sans interagir avec le configurateur, l'IA gère tout. Le client peut envoyer un texte ou un croquis, le LLM va réfléchir et appeler plusieurs outils afin de créer, puis modifier le projet du client, pour enfin lui présenter.

D'abord testé avec Claude et ChatGPT, il est maintenant intégré dans le site et est utilisé par les clients. Mais attention, un accent a été porté sur la sécurité : on s'assure que seuls les utilisateurs légitimes puissent utiliser l'IA (ça peut vite coûter cher).

MCP Workflow

Scroll pour voir le flux de communication

Client

Site Web

AI Provider

MCP Server

Demande meuble
"Je voudrais un meuble de 120cm..."
POST /chat
Transmission de la demande
Connexion MCP
Récupération des tools, resources, templates...
Outils & Ressources
["create-project", "update-columns", "finish-project"...]
create-project
{ "name": "Cabinet", "type": "cabinet", "dimensions": {...} }
Project ID
{ "projectId": "proj_abc123" }
update-column-structure
{ "projectId": "...", "structure": { "columns": [...] } }
Confirmation
{ "success": true }
finish-project
{ "projectId": "proj_abc123" }
Download ID
{ "downloadId": "..." }
Download ID
Récupère l'ID de téléchargement du projet en cache
Download depuis le cache
GET /download-project/:id
Visualisation 3D
<ProjectViewer />
Meuble visualisé
✓ Rendu final
architecture

MCP

Outils MCP

Mapping des fonctions métier pour les LLM: création de meubles, calculs structurels, création d'assemblages de meubles.

Package Svelte

Handlers pour setup l'API facilement + Composant headless (chat, tools, appels manuels) pour gérer le visuel dans le site.

Prompting

Prompt système + chaque tool a sa description sur son utilisation, les erreurs, ses paramètres... tout ça doit être clair pour l'IA.

Exemple d'outil MCP

Sécurité en production

Système de sécurité multi-couches pour protéger l'accès aux outils MCP et contrôler les coûts d'utilisation de l'IA.

Architecture sécurisée

Protection en 3 couches pour garantir un usage légitime

1. Anti-Bot (Turnstile)

Le widget Cloudflare valide que l'utilisateur est humain.

Challenge invisible→ Token éphémère (5min)→ Validation serveur
Couche 1 : Accès

2. Identification (Thumbmark)

Génération d'une empreinte navigateur unique.

Hash matériel (Canvas, Audio...)→ VisitorID stable→ Sans cookies tiers
Couche 2 : Identité

3. Rate Limiting

Application des quotas sur l'API Chat.

Clé : VisitorID + IPQuota : 10 req/heureRéponse 429 si dépassement
Couche 3 : Quotas

Requête utilisateur

Message chat

→

Check Humain

Token Turnstile

→

Check Quota

Compteur VisitorID

→

API IA

Streaming réponse

Endpoints protégés

POST /iapi/ary-chat/chat Message IA (Protégé par les 3 couches)
GET /iapi/ary-chat/tools Liste outils (Protégé par Turnstile uniquement)
PRIVÉ Clés API Stockées serveur, jamais exposées

Anti-Bot

Cloudflare Turnstile bloque les bots et scripts malveillants avant même qu'ils n'atteignent l'API.

Fingerprinting

Identification unique des visiteurs via ThumbmarkJS (sans cookies) pour suivre l'usage réel.

Rate limiting

Contrôle strict des coûts : quotas horaires basés sur l'empreinte navigateur et l'IP.

APIs cloisonnées

Les appels aux LLM (Claude, GPT, Gemini...) se font uniquement côté serveur, clés masquées.

Monitoring

Suivi des erreurs et des performances en temps réel avec Sentry pour une réactivité maximale.

Fonctionnalités clés

  • 1 Génération de meubles depuis texte ou croquis client.
  • 2 Visualisation 3D en temps réel dans l’interface de chat.
  • 3 Package Svelte avec handlers pour setup l'API facilement + Composant headless pour la gestion du chat.
  • 4 Sécurité 3 couches : Anti-bot, Fingerprinting et Quotas.
  • 5 Support multi-models (GPT, Claude, Gemini) via même protocole en utilisant OpenRouter.

Technologies

Core — TypeScript, Node, MCP
Frontend — Svelte, Astro, Viewer 3D
IA — ChatGPT SDK, Claude, Gemini
Sécurité & Monitoring — Turnstile, Thumbmark, Sentry

Impact & apprentissages

En Production

Utilisation Réelle

Projet en prod, utilisé dans un premier temps par l'équipe commerciale pour pré-maquetter des meubles avec l'aide d'un LLM.

Il est maintenant utilisé par les clients finaux, pour créer des meubles ou initialiser leurs projets.

Apprentissages

  • 1 Traduire des workflows meubles en outils IA compréhensibles.
  • 2 Concevoir un plan de sécurité 3 couches (Bot, ID, Quota).
  • 3 Livrer des packages réutilisables plutôt qu’un monolithe.
  • 4 Déploiement sur un serveur avec Docker.
  • 5 Piloter un déploiement production utilisé par des clients finaux.

Images à venir

Ajout prochain des captures Chat IA + viewer 3D en action pour montrer comment l'IA manipule mes outils.

Chat Interface

3D Viewer

Tool Execution