LangGraph pour les devs JS : comprendre les Graphs et les Nodes sans se prendre la tête

Quand j'ai commencé à apprendre LangGraph, j'ai bloqué sur les concepts de base.

Graph ? Node ? Edge ? State ?

Ça avait l'air compliqué. En fait, c'est simple une fois qu'on a la bonne analogie.

---

Un Graph, c'est juste un parcours

Imagine une recette de cuisine.

Tu as des étapes (couper les légumes, faire revenir, assaisonner...) et un ordre (tu coupes avant de faire revenir).

Un Graph dans LangGraph, c'est pareil :

• Les étapes = les Nodes
• L'ordre = les Edges (les flèches entre les étapes)

C'est simple...

---

Un Node, c'est une fonction qui fait UN truc

Un Node reçoit un état (state), fait quelque chose, et retourne un nouvel état.

const cuperLesLegumes = (state: RecetteState) => {
  return {
    legumes: ["carottes", "oignons"],
    etape: "légumes coupés"
  };
};

Chaque Node a une responsabilité unique. Pas plus.

---

Le State, c'est la mémoire du parcours

Le State contient toutes les infos qui circulent entre les Nodes.

Dans LangGraph, on le définit avec des Annotations :

const RecetteState = Annotation.Root({
  legumes: Annotation<string[]>,
  assaisonnement: Annotation<string>,
  etape: Annotation<string>,
});

Chaque Node peut lire le state et le modifier. Le state évolue au fil du parcours.

---

Exemple concret : une battle de rap IA 🎤

Pour vraiment comprendre avec un truc fun : une battle de rap entre Molière et Robespierre, arbitrée par un LLM.

Le State de la battle

const BattleState = Annotation.Root({
  theme: Annotation<string>,
  coupletMoliere: Annotation<string>,
  coupletRobespierre: Annotation<string>,
  scoreMoliere: Annotation<number>,
  scoreRobespierre: Annotation<number>,
  tour: Annotation<number>,
  gagnant: Annotation<string>,
});

Les Nodes

1. choisirTheme → Génère un thème de battle aléatoire
2. moliereRappe → Molière balance son couplet (alexandrins, rimes ABAB)
3. robespierreRappe → Robespierre répond (rhétorique révolutionnaire, rimes AABB)
4. juger → Un 3ème LLM note les deux couplets
5. annonceGagnant → Déclare le vainqueur

Les Edges (le parcours)

choisirTheme → moliereRappe → robespierreRappe → juger → ...

Mais il y a un twist : après juger, on veut soit refaire un tour, soit terminer.

C'est là qu'interviennent les conditional edges.

---

Les Conditional Edges : le routing dynamique

Parfois, le parcours n'est pas linéaire. Il dépend d'une condition.

graph.addConditionalEdges("juger", (state) => {
  if (state.tour < 3) {
    return "moliereRappe"; // On continue la battle
  }
  return "annonceGagnant"; // 3 tours = fin
});

Le flow change selon le state. C'est ça la puissance de LangGraph.

---

Récap visuel

┌─────────────┐
│ choisirTheme│
└──────┬──────┘
       ▼
┌─────────────┐
│moliereRappe │◄──────────┐
└──────┬──────┘           │
       ▼                  │
┌─────────────┐           │
│robespierreRappe         │
└──────┬──────┘           │
       ▼                  │
┌─────────────┐    tour < 3
│    juger    │───────────┘
└──────┬──────┘
       │ tour >= 3
       ▼
┌─────────────┐
│annonceGagnant│
└─────────────┘

---

Ce que j'ai retenu

Concept	En simple
Graph	Un parcours avec des étapes
Node	Une fonction qui fait UN truc
Edge	Une flèche entre deux étapes
State	La mémoire partagée entre les Nodes
Conditional Edge	Une flèche qui dépend d'une condition

---

Pourquoi c'est utile ?

Quand tu builds des agents IA, tu as souvent besoin de :

• Enchaîner plusieurs appels LLM
• Prendre des décisions selon les réponses
• Garder un état entre les étapes

LangGraph structure tout ça proprement. Pas de spaghetti code.

---

Pour aller plus loin

• Documentation LangGraph ↗

---

Tu débutes avec LangGraph ? Écris-moi ce qui te bloque, je ferai peut-être un article dessus.