Nom de l’auteur/autrice :yvonh

Pourquoi apprendre le vibecoding?

Le vibecoding, qui consiste à parler à une IA pour générer du code fonctionnel, a transformé l’équilibre des forces entre les sachants et les non sachant coder. En effet le développement d’application était réservé à une minorité de personnes qui ont mis des années à parfaire leurs connaissances en code. L’arrivée des LLM (modèle larges de données) a permis à tout un chacun de développer des application web sans vraiment avoir passsé des années à apprendre et pratiquer le code.

Est ce à dire qu’il n’est plus besoin de savoir lire du code basique ou d’écrire du code basique pour développer une application? Rien n’et moins sûr, en effet, ce que vous voyez dans les réseaux sociaux montre des petites applications simples développée à partir de zéro.

Le jeu se complique lorsque l’application grandit. Or vous ne pouvez pas ignorer votre oeuvre, il faut au moins en maitriser les grandes lignes. au fur et à msur qu’il grandit, que vous ajoutez des fonctionnalité, il faut pouvoir suivre son évolution, comme un enfant qui grandit il faut savoir l’appréhender sinon il va mal finir !

Public cible :

Porteur de projet à la recherche de prototype fonctionnel, SEO, Marketeur, curieux passionné mais ne sachant pas encore coder, créateur d’entreprise, indépendants. Chef de projet, product Owner,développeur, chef d’entreprise TPE/PME

Objectif de la formation : à l’issue de la formation, vous saurez comment fonctionne un LLM, la génération de code, comment prompter un LLM pour générer une application sécurisée. Vous saurez déployer cette application en ligne. La maintenir et la faire évoluer.

Programme de formation

Comprendre les LLM et le prompting

Maitriser les outils de vibecoding : Lovable pour les interfaces, Antigravity, Cursor, Windsurf,Claude Code

Générer tester et corriger du code

construire un mini projet fonctionnel

intégrer le workflow avec Git et tests

Déployer l’application en ligne

Qu’est ce qu’un serveur MCP (Model Context Protocole?)

Un serveur MCP est un webservice qui fournit de la data, cette data va servir de contexte pour l’IA générative. A la différence du RAG (Retrieval Augmented Generation), il n’est pas besoin de base vectorielle pour stocker des informations.

Le workflow est le suivant, le client IA (Claude Desktop) va requêter le serveur MCP pour retirer les informations dont il a besoin pour envoyer au LLM.(chatGPT par exemple).

Cette technologie inventée par Anthropic (à l’origine de Claude) est devenue très populaire. Je pense que c’est dû au fait qu’il n’est besoin que de connaissances existantes (Webservice) par les développeurs pour pouvoir taquiner les IA afin d’éviter les hallucination.

Mais cela va au delà des hallucination, un serveur MCP est un webservice à destination non du programmeur mais de l’IA générative. Je pense que c’est une bonne comparaison, l’IA (ou plutôt l’agent IA) va pouvoir décider en autonomie de requêter un serveur MCP pour chercher les information dont il a besoin?

Donc un serveur MCP est un webservice pour agent IA, au même titre qu’un webservice est un …. webservice pour un programmeur. Dans notre cas on va utiliser Claude Desktop comme « agent IA » ou plutôt comme Client IA.

Mise en place du serveur MCP dans Pycharm

Création de mon environnement virtuel

On crée le répertoire MCP puis on fait la commande :

vous avez un répertoire appelé MCP rentrez dedans

$ python -m venv .venv

# activez l'environnement virtuel (sous powershell)
$ .\.venv\Scripts\Activate.ps1

#c'est activé (normalement) vous avez accès à la commande pip
$ pip --version

Installation de uv

uv est un gestionnaire de paquet nouvelle génération écrite en RUST.

pip install uv

puis avec uv on installe mcp 

uv add "mcp[cli]"

A partir de maintenant on va utiliser uv pour installer notre projet

uv init 

# la commande tree -L 2 nous donne la structure suivante
.
|-- README.md
|-- main.py
|-- .venv
|   |-- Include
|   |-- Lib
|   |-- Scripts
|   `-- pyvenv.cfg
|-- pyproject.toml
`-- uv.lock

Pour install tree dans Windows Gitbash, il faut télécharger l’EXE et le mettre dans C:\Program Files\Git\usr\bin, un tuto est accessible sur ce lien.

Le soucis c’est que mcp s’attends à ce que le dossier environnement virtuel soit nommé .venv, si vous faites la commande:

$ uv run mcp
warning: `VIRTUAL_ENV=mcpvenv` does not match the project environment path `.venv` and will be ignored; use `--active` to target the active environment instead


Désativez l'environnement avec 
$ deactivate
si un .venv est présent, exécutez le venv  de ce répertoire.

Exemple rapide de serveur MCP:

#server.py

from mcp.server.fastmcp import FastMCP

# Create an MCP server
mcp = FastMCP("Demo")


# Add an addition tool
@mcp.tool()
def add(a: int, b: int) -> int:
    """Add two numbers"""
    return a + b


# Add a dynamic greeting resource
@mcp.resource("greeting://{name}")
def get_greeting(name: str) -> str:
    """Get a personalized greeting"""
    return f"Hello, {name}!"


# Add a prompt
@mcp.prompt()
def greet_user(name: str, style: str = "friendly") -> str:
    """Generate a greeting prompt"""
    styles = {
        "friendly": "Please write a warm, friendly greeting",
        "formal": "Please write a formal, professional greeting",
        "casual": "Please write a casual, relaxed greeting",
    }

    return f"{styles.get(style, styles['friendly'])} for someone named {name}."

Pour le faire tourner

mcp dev server.py

#il vous sera demandé d'installer le paquet @modelcontextprotocol/inspector@0.17.0

Source: https://composio.dev/blog/mcp-server-step-by-step-guide-to-building-from-scrtch

Installation de Ollama

Pour commencer il faut aller sur le site Ollama.com (à ne pas confondre avec Llama.com). Le lien Github, pour consulter les sources et la documentation sur les modèles

Téléchargez et installez. Une fois installé, vous aurez une opup comme ci-dessous :

Vous allez vous perdre dans la jungle des modèles. Vous connaissez sans doute aussi de nom Hugging Face, c’est un repository de modèle LLM open source. Une fois que vous avez installé Ollama, ouvrez un terminal et tapez la commande $ ollama, une liste de commande sera affichée. Allez sur le Github, vous verrz un tableau de modèles LLM, différentes capacité et taille, ça va de 1 Go à 404 Go ! En fonction de votre machine téléchargez celui que vous pouvez faire fonctionner !

La colonne parameters indique combien de paramètres est considéré par le modèle, comptez environs 1 giga de RAM pour 1 Giga (Billion milliards) de paramètres. Mon ordinateur fait 32 Giga de RAM, je peux aller avec le modèle à 30B paramètres.

Les commandes pour installer les LLM

ollama run llama2


Pour connaitres les différentes commande au sein du chat
/?
>>> /?
Available Commands:
  /set            Set session variables
  /show           Show model information
  /load <model>   Load a session or model
  /save <model>   Save your current session
  /clear          Clear session context
  /bye            Exit
  /?, /help       Help for a command
  /? shortcuts    Help for keyboard shortcuts

Use """ to begin a multi-line message.


Pour quitter :
/bye

Pour lister les modèles :
ollama list

.

Test de llama2

La première chose que je constate, est que le modèle est vraiment limité, surtout quand vous avez l’habitude de vous amuser avec chatGPT ou Claude sur le web, donc sur les modèles les plus sophistiqués.

Par exemple je lui demande de me donner la recette du roesti, il me répond qu’il ne sait pas

Quand je lui demande la recette de la tarte tatin, il me liste en anglais (pas vraiment multilingue, ok pour la taille du modèle cependant !). Par contre comme il est hébergé en local il est très rapide. Je lui demande pourquoi il me répond qu’il n’a pas réussi à détecter (alors que je lui ai demandé en français), mais il me propose de donner la version française ce qu’il fit très bien.

Nous allons télécharger un autre modèle

Cette fois ci nous allons télécharger le modèle Mistral, équivalent en taille. Sur le repository, vous trouverez la commande dans le tableau

ollama run mistral

Après le téléchargement, il démarre le prompt automatiquement. Quand vous ferez bye, vous pourrez démarrer entre les deux modèles (Mistral ou llma2 en ligne de commande)
Pour effacer un modèle, vous avez la comamnde remove, mais pensez à faire ollama pour afficher les différentes commandes.

Et maintenant explorons l’API !

Eh oui c’est là que cela devient très intéressant car nous allons pouvoir exploiter un LLM depuis un programme pour automatiser nos tâche (notre GRAAL)

Ollama expose une API sur le localhost. Dans la barre des tâches, vous pouvez voir une image de Llama, cela veut dire que l’application Desktop est lancée, et donc que l’API est active. Mais si le desktop n’est pas llancé, vous pouvez toujours lancer le serveur en ligne de commande

ollama serve

En parlant de l’icone, vous pouvez accéder aux paramètres

Vous remarquez (j’espère) le slider pour définir la « mémoire » du LLM (la taille du contexte), ceci est utile pour se souvenir d’une conversation !

Vous pouvez exposer le LLM au réseau local (très intéressant !)

Installer le package Python ollama

Très simplement on va faire un script pour requêter Ollama par API avec pip install ollama. Si vous installez le paquet après avoir démarré l’environnement virtuel, il sera en local, si vous le faites hors environnement virtuels, il sera dans le système. Pour connaitre où est installé un package

#affiche les emplacements pouvant héberger les paquets
python -m site

# cherche un paquet en particuliers
python -m pip show <paquet>

#lister les paquets de l'environnement virtuel en cours
pip list

import ollama
client = ollama.Client()

model = "llama2"
prompt = "How to set up a venv?"

response = client.generate(model, prompt)
print(f"Response from {model}:")
print(response.response)

Si vous préférez que la réponse arrive morceau par morceau voici le script (il suffit de passer stream= True)

import ollama

client = ollama.Client()

model = "llama2"
prompt = "How to set up a venv?"

# Use the stream=True option
stream = client.generate(model=model, prompt=prompt, stream=True)

print(f"Response from {model}:\n")

for chunk in stream:
    # Each chunk is a small piece of the model's output
    print(chunk['response'], end='', flush=True)

print()  # final newline

Ok là c’est mieux mais on peut wrapper les phrases (retour à la ligne quand ça déborde)

Avec retour à la ligne sans streaming

import ollama
import textwrap
import shutil

client = ollama.Client()
model = "llama2"
prompt = "How to set up a venv?"

response = client.generate(model=model, prompt=prompt)
terminal_width = shutil.get_terminal_size().columns

print(f"Response from {model}:\n")
print(textwrap.fill(response['response'], width=terminal_width))

Avec retour à la ligne avec streaming

import ollama
import shutil
import sys

client = ollama.Client()
model = "llama2"
prompt = "How to set up a venv?"

stream = client.generate(model=model, prompt=prompt, stream=True)

print(f"Response from {model}:\n")

terminal_width = shutil.get_terminal_size().columns
current_line = ""

for chunk in stream:
    text = chunk["response"]
    for char in text:
        current_line += char
        if len(current_line) >= terminal_width - 1:
            print(current_line)
            current_line = ""
# print remaining text
if current_line:
    print(current_line)

Personnalisation du modèle

Avec un fichier de configuration, on peut agir sur la façon dont les réponse vont être apportées, il y a de nombreux paramètres qui font qu’un LLM va se comporer d’une certianes façon. Vous avez peut être remarqué que ChatGPT était plus jovial que Claude qui est plus sérieux. Perso j’aim bien cette touche.

Mettez Le fichier de personnalisation Modefile dans un répertoire et invoquez une commande sur ce fichier dans ce répertoire.

$ ollama create formabot -f ./Modelfile

# ici j'ai invoqué un modèle non présent ça met du temps à télécharger le modèle

On va lancer avec la commande run

$ ollama run formabot

>>> qui es tu?



# pour effacer le modèle
$ ollama rm formabot

Conclusion :

Dans sa forme, l’outil ressemble beaucoup à Docker (les commandes, les modèles). Voilà pour une première introduction de Ollama. Pourquoi est ce important d’avoir un LLM en local? Si vous voulez rester privé, avoir des temps de réponse rapide, et ne pas vous ruiner en crédit token, alors n’hésitez pas à utiliser un LLM open source, il y en a d’autres allez voir du côté de Deepseek et de HuggingFace.

Dans quelle situation un serveur MCP est pertinent?

Un modèle LLM comme ChatGPT est généraliste et a été entrainé sur un dataset limité bien que grand. Il ne dispose pas d’une connaissance universelle. Mais avez vous remarqué qu’une IA a toujours réponse à tous néanmoins? quitte à vous sortir des insanités? qu’on appelle des hallucinations.

Pour éviter ce phénomène d’hallucination, qui résulte d’un trou dans sa connaissance, il faut pouvoir compléter avec des données supplémentaires. Seulement voilà, le modèle de chatGPT a été entrainé déjà (et c’est ultra coûteux d’entrainer une IA, tout le monde ne dispose pas les moyens de le faire.

La solution du RAG (Retrieval Augmented Generation)

Le principe repose sur le stockage dans une base vectorielle des données, avec une base de données vectorielle comme FAISS ou ChromaDB, puis de prompter la base au lieu de prompter chatGPT, le résultat de ce prompt est envoyé à chatGPT. (prompt augmenté).

C’est une bonne solution, et vraiment adapté à certaines situation comme chatPDF. Cependant c’est un peu lourd. Nous allons voir qu’Anthropic propose une solution qui marche dans le sens inverse mais qui semble être plus légère et performante (quoique différent).

La solution MCP (Model Context Protocol)

Cette solution à base de données structurée (et c’est là la différence avec la RAG) requiert à Claude (et non chatGPT puisque qu’au moment d’écrire cet article chatGPT ne le prend pas encore en charge), de faire un sorte de requête AJAX avec un serveur MCP pour contextualiser la réponse à un prompt.

MCP ouvre tout un univers de champs d’application très intéressant, tout en préservant l’anonymat des données.

Exemple de code en Python d’un serveur MCP

Assistant RH intelligent

rh-assistant-mcp/
├── employee_db.json
├── mcp_server.py
├── mcp_manifest.json

Notre serveur MCP est simplement un serveur REST, le différence c’est ce n’est pas vous qui requêtez en AJAX mais c’est Claude qui va le requêter (on comprend mieux pourquoi les autres vendors d’IA ne l’ont pas encore implémenté)

employee_db.json est la base de données, mcp_manifest/json va décrire la façon dont les données seront formatées en input (venant de Claude) et en output (allant vers Claude).

{
  "employees": [
    {
      "id": "E001",
      "name": "Alice Dupont",
      "role": "Développeuse Backend",
      "hire_date": "2021-06-12",
      "skills": ["Python", "Django", "PostgreSQL"]
    },
    {
      "id": "E002",
      "name": "Bruno Martin",
      "role": "Data Analyst",
      "hire_date": "2022-01-20",
      "skills": ["SQL", "Power BI", "Python"]
    }
  ]
}

Le fichier manifest.json qui décrit les format d’entrée et sortie

{
  "name": "employee-context",
  "description": "Provides structured context about employees from the HR database.",
  "version": "1.0",
  "input_schema": {
    "type": "object",
    "properties": {
      "employee_name": {
        "type": "string",
        "description": "Name of the employee to look up"
      }
    },
    "required": ["employee_name"]
  },
  "output_schema": {
    "type": "object",
    "properties": {
      "employee_info": {
        "type": "object",
        "properties": {
          "role": { "type": "string" },
          "hire_date": { "type": "string" },
          "skills": { "type": "array", "items": { "type": "string" } }
        }
      }
    }
  }
}

Le fichier serveur avec FastAPI

from fastapi import FastAPI, Request
import json

app = FastAPI()

with open("employee_db.json", "r") as f:
    db = json.load(f)

@app.post("/mcp/context")
async def provide_context(request: Request):
    body = await request.json()
    name = body.get("employee_name", "").lower()

    for emp in db["employees"]:
        if emp["name"].lower() == name:
            return {
                "employee_info": {
                    "role": emp["role"],
                    "hire_date": emp["hire_date"],
                    "skills": emp["skills"]
                }
            }
    return {"employee_info": None}

Pour tester rapidement le serveur:

curl -X POST http://localhost:8000/mcp/context   -H "Content-Type: application/json"   -d '{"employee_name": "alice dupont"}'

Comment déployer ce système

Pour que Claude puisse lire le manifest.json, on peut le stocker sur une github page, ou un serveur accessible publiquement. On va notifier cette url à Claude via son interface graphique ou par API.

Le serveur REST doit être accessible publiquement, si vous le déployez en local il faut faire un tunnel vers votre serveur.

Comment utiliser ce système

Il faut que ce soit clair que dans ce cas de figure vous ne pouvez requêter Claude que par API. Quand est ce que Claude va savoir qu’il va avoir besoin de requêter le serveur MCP? C’est lui qui détermine quand il faut requêter le serveur MCP, quand il va s’apercevoir que le contexte lui manque et qu’il existe un serveur MCP décrit par le manifest.json existe.

Exemple de requête faite à Claude

vous pouvez faire en Javascript cette requête POST

POST /v1/messages
{
  "model": "claude-3-opus-20240229",
  "messages": [
    { "role": "user", "content": "Peux-tu me dire ce que fait Bruno Martin ?" }
  ],
  "context_providers": [
    { "url": "https://ton-domaine.com/mcp_manifest.json" }
  ]
}

Pour exposer le site sur un serveur il suffit de simplement déployer sur un serveur. Une alternative serait de créer un tunnel SSH pour exposer votre site local à Claude.