WebMCP avec Django et FastAPI : des outils pour agents IA dans vos applications web Python

Les applications web Python ont besoin de très peu de choses pour prendre en charge WebMCP. L’outil s’exécute dans le navigateur en quelques lignes de JavaScript, et votre application Django ou FastAPI fait le vrai travail derrière. Vous découvrez le sujet ? Commencez par ce qu’est WebMCP.

Un endpoint FastAPI

La validation des paramètres de requête bloque les mauvaises valeurs avant l’exécution de votre code, et un modèle de réponse limite ce qui sort du serveur :

from fastapi import APIRouter, Query
from pydantic import BaseModel

router = APIRouter()

class ProductOut(BaseModel):
    name: str
    price: float
    url: str

@router.get('/agent/products', response_model=list[ProductOut])
async def search_products(q: str = Query(min_length=1, max_length=80)):
    return await search_catalog(q, limit=5)  # your own function

Une vue Django

from django.http import JsonResponse
from django.views.decorators.http import require_GET

from .models import Product

@require_GET
def agent_products(request):
    q = request.GET.get('q', '').strip()[:80]
    if not q:
        return JsonResponse({'error': 'missing_query'}, status=400)
    items = Product.objects.filter(published=True, name__icontains=q)[:5]
    return JsonResponse(list(items.values('name', 'price', 'slug')), safe=False)

Ajoutez aussi une limite de débit, par exemple au niveau du proxy ou avec les outils de limitation de votre framework.

Le script navigateur

Chargez ce script depuis votre template de base ou votre frontend :

const mc = document.modelContext || navigator.modelContext;
if (mc && mc.registerTool) {
  mc.registerTool({
    name: 'search_products',
    description: 'Search published products. Returns name, price and link.',
    inputSchema: {
      type: 'object',
      properties: { q: { type: 'string', description: 'Keywords' } },
      required: ['q'],
    },
    annotations: { readOnlyHint: true },
    execute: async ({ q }) => {
      const res = await fetch('/agent/products?q=' + encodeURIComponent(q));
      return await res.text();
    },
  });
}

Sessions, CSRF et permissions

Les outils s’exécutent dans la page : les requêtes de même origine transportent donc les cookies du visiteur, et login_required ou vos dépendances FastAPI fonctionnent comme d’habitude. Pour les outils POST dans Django, envoyez le cookie csrftoken dans l’en-tête X-CSRFToken, et signalez l’outil avec consequentialHint: true.

Règles de sécurité

• Commencez en lecture seule. La recherche et les détails d’abord ; signalez-les avec readOnlyHint.
• Demandez avant d’agir. Signalez les actions de panier, de réservation et de formulaire avec consequentialHint, pour que le visiteur confirme.
• Vérifiez côté serveur. Le navigateur n’est pas une barrière de sécurité : validez chaque paramètre et chaque permission dans votre backend.
• Renvoyez le minimum. N’envoyez que ce qu’un client a le droit de voir, jamais de données d’administration ni les informations d’autres clients.

Testez

1. Utilisez une version récente de Chrome avec WebMCP activé, via l’origin trial ou le flag de test.
2. Appelez chaque outil avec des paramètres valides et invalides.
3. Vérifiez que les visiteurs habituels ne voient aucune différence.
4. Lancez le vérificateur WebMCP gratuit sur la page précise où se trouvent vos outils.

Quand un serveur MCP convient mieux

Si des applications d’IA doivent utiliser vos données sans ouvrir votre site, créez plutôt un serveur MCP. Consultez WebMCP ou MCP et notre service de développement de serveurs MCP. Pour la partie navigateur, découvrez nos services d’intégration WebMCP.