Which integrations are available for this server?

Offers Redis caching capabilities through the MCP server architecture, providing performance optimization and data caching functionality Provides centralized access to Supabase database operations through the MCP server, enabling database queries and operations for user and order management

How do I use MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@MCP Server get the latest 5 users with their order counts" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

MCP - Architecture Simple et Efficace

🎯 Vue d'ensemble

Architecture ultra-simple qui garde toute l'efficacité de votre stack :

Supabase + Redis centralisés dans le MCP Server
NestJS backend + Remix frontend utilisent uniquement l'API MCP
Shadcn UI + Zustand + TypeScript + Zod validation
Une seule règle : Tout passe par l'API MCP

🚀 Quick Start

# Installation
cd 
npm run install:all

# Démarrage (avec Redis local)
npm run dev

# URLs
- Frontend: http://localhost:3000
- MCP Server: http://localhost:3001 
- API Docs: http://localhost:3001/docs
- Backend: http://localhost:3002

📁 Structure

v2/
├── mcp-server/     # Source unique (Fastify + Supabase + Redis)
├── web/            # Remix + Shadcn UI + Zustand
├── backend/        # NestJS (jobs, services, CRON)
├── shared/         # Types auto-générés
└── docker-compose.yml

🔧 Configuration

1. Variables d'environnement

# mcp-server/.env
PORT=3001
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_KEY=your-anon-key  
REDIS_URL=redis://localhost:6379

2. Base de données Supabase

Créez ces tables dans Supabase :

-- Users table
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email TEXT UNIQUE NOT NULL,
  name TEXT NOT NULL,
  role TEXT DEFAULT 'user',
  avatar_url TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Orders table  
CREATE TABLE orders (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  items JSONB NOT NULL,
  total DECIMAL(10,2) NOT NULL,
  status TEXT DEFAULT 'pending',
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

💻 Développement

✅ Utilisation correcte (Frontend/Backend)

import { api } from '../shared/api';
import type { User, CreateUser } from '../shared/types';

// Récupérer des données
const { data: users } = await api.get<User[]>('/users');

// Créer 
const { data: user } = await api.post<User>('/users', userData);

// Modifier
const { data: updated } = await api.patch<User>(`/users/${id}`, changes);

❌ Utilisation interdite

// 🚫 INTERDIT - Accès direct (bloqué par ESLint)
import { createClient } from '@supabase/supabase-js';
import Redis from 'ioredis';

🔄 Types auto-générés

# Générer les types depuis le MCP Server
npm run generate

# Les types sont créés dans shared/types.ts et shared/api.ts

🎨 Frontend (Remix + Shadcn UI)

Installation Shadcn UI

cd web/
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card form input label toast

Exemple de composant

import { useLoaderData } from "@remix-run/react";
import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";
import { api } from "../../shared/api";

export async function loader() {
  const { data: users } = await api.get('/users');
  return { users };
}

export default function Users() {
  const { users } = useLoaderData<typeof loader>();
  
  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Users</h1>
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {users.map((user) => (
          <Card key={user.id} className="p-4">
            <h3 className="font-semibold">{user.name}</h3>
            <p className="text-sm text-muted-foreground">{user.email}</p>
            <Button variant="outline" size="sm" className="mt-2">
              View Profile
            </Button>
          </Card>
        ))}
      </div>
    </div>
  );
}

🏗️ Backend (NestJS)

Exemple de service

import { Injectable } from '@nestjs/common';
import { Cron } from '@nestjs/schedule';
import { api } from '../../shared/api';

@Injectable()
export class OrderService {
  async processOrder(userId: string) {
    // Récupérer user via MCP
    const { data: user } = await api.get(`/users/${userId}`);
    
    if (user.role !== 'admin') {
      throw new Error('Unauthorized');
    }
    
    // Créer commande via MCP
    const { data: order } = await api.post('/orders', {
      user_id: userId,
      items: [],
      total: 0,
      status: 'processing'
    });
    
    return order;
  }
  
  @Cron('0 */10 * * * *') // Toutes les 10 minutes
  async cleanupOrders() {
    const { data: orders } = await api.get('/orders?status=pending');
    // Cleanup logic...
  }
}

🛡️ Sécurité

ESLint Rule (Une seule règle pour tous)

module.exports = {
  rules: {
    'no-restricted-imports': ['error', {
      patterns: [
        '@supabase/supabase-js',
        'ioredis',
        'redis',
        '@prisma/client',
        'pg',
        'mysql*',
        'mongodb'
      ],
      message: '🚫 Accès data uniquement via l\'API MCP sur :3001'
    }]
  }
};

🐳 Production (Docker)

# Build et démarrage
docker-compose up --build

# Environnement complet avec Redis inclus

📊 Monitoring

Health Check

curl http://localhost:3001/health

API Documentation

http://localhost:3001/docs

Logs centralisés

Tous les logs sont dans le MCP Server avec Pino.

🎯 Avantages de cette approche

✅ Simplicité maximale

3 dossiers au lieu de 15 packages
1 règle : tout passe par l'API MCP
Setup en 10 minutes

✅ Stack complète préservée

Supabase + Redis + NestJS + Remix + Shadcn UI
Performance cache Redis intégrée
Types TypeScript auto-générés
Validation Zod partout

✅ Sécurité robuste

Accès DB/Cache impossible en dehors du MCP Server
ESLint bloque les imports directs
API centralisée avec rate limiting

✅ Developer Experience

Documentation Swagger auto-générée
Types partagés automatiques
Hot reload sur tous les services
Debugging facilité

Cette architecture simple est prête pour la production ! 🚀

MCP Server