Add Parallelization, Tree of Thoughts, and Agentic RAG (16-18 of 18)

CLAUDE.md

@@ -60,7 +60,7 @@ hardcode any hex values outside the token definitions.
 
 ## Pattern data
 
-15 patterns across 8 sections. All defined in the `PATTERNS` array in
+18 patterns across 8 sections. All defined in the `PATTERNS` array in
 `index.html`. Fields per pattern:
 
 ```js

README.md

@@ -5,7 +5,7 @@
 **Live site:** https://hefrock.github.io/ai-agent-patterns/ <!-- placeholder until GitHub Pages is enabled (Settings → Pages → Deploy from branch → main / root) -->
 
 An interactive reference of AI agent design patterns — single-agent and
-multi-agent architectures — covering 15 patterns across 8 sections. Built as
+multi-agent architectures — covering 18 patterns across 8 sections. Built as
 a single self-contained `index.html` with no build step and no external
 dependencies. Click any card to expand it and see a colored flow diagram,
 its description, common uses, and at-a-glance metadata (complexity, agent
@@ -28,15 +28,18 @@ them render directly from the `PATTERNS` array defined in that file.
 ### Single-agent — stateless
 - **Simple LLM call** — One prompt, one response
 - **Prompt chaining** — Sequential LLM steps
+- **Parallelization** — Concurrent subtasks, then merge
 
 ### Single-agent — agentic
 - **ReAct loop** — Reason · act · observe
 - **Plan-and-execute** — Separate planner and executor
 - **Tool-use / function calling** — LLM with tool registry
 - **Critic / self-refinement** — Generator + critic loop
+- **Tree of Thoughts** — Explore, evaluate, backtrack
 
 ### Single-agent — memory
 - **RAG pattern** — Retrieve then reason
+- **Agentic RAG** — Iterative retrieve, reason, refine
 - **Memory-augmented agent** — Short, long & episodic memory
 
 ### Single-agent — reactive

index.html

@@ -563,6 +563,24 @@ <h1 class="header-title">AI agent <span>design patterns</span></h1>
       {label:"Input", cat:"neutral"}, {label:"Step 1", cat:"llm"}, {label:"Step 2", cat:"llm"}, {label:"Step N", cat:"llm"}, {label:"Output", cat:"neutral"}
     ]
   },
+  {
+    section: "Single-agent — stateless",
+    group: "single",
+    name: "Parallelization",
+    sub: "Concurrent subtasks, then merge",
+    cat: "llm", catLabel: "LLM core",
+    desc: "A task is split into independent subtasks decided in advance (sectioning), or the same prompt is run multiple times in parallel (ensemble voting). All calls execute concurrently; an aggregator merges the sections, or a vote picks the majority answer. Simpler and faster than dynamic orchestration since the subtasks never change at runtime.",
+    uses: "Document section summarization, parallel moderation checks, majority-vote fact-checking",
+    complexity: "Low – Med",
+    agents: "1",
+    loops: "None",
+    statefulness: "Stateless",
+    flow: [
+      {label:"Input", cat:"neutral"},
+      {label:"Calls", cat:"llm", kind:"parallel", members:["Call 1","Call 2","Call 3"]},
+      {label:"Aggregate / vote", cat:"data"}, {label:"Output", cat:"neutral"}
+    ]
+  },
   {
     section: "Single-agent — agentic",
     group: "single",
@@ -629,6 +647,23 @@ <h1 class="header-title">AI agent <span>design patterns</span></h1>
       {label:"Task", cat:"neutral"}, {label:"Generator", cat:"llm"}, {label:"Critic", cat:"llm"}, {label:"Feedback", cat:"data"}
     ]
   },
+  {
+    section: "Single-agent — agentic",
+    group: "single",
+    name: "Tree of Thoughts",
+    sub: "Explore, evaluate, backtrack",
+    cat: "llm", catLabel: "LLM core",
+    desc: "Instead of committing to a single reasoning chain, the model generates several candidate next-step thoughts at each point, evaluates how promising each one is, and searches the resulting tree — expanding the best branches and backtracking from dead ends — until it finds a path that solves the problem. Trades extra inference calls for much better performance on problems with large or deceptive solution spaces.",
+    uses: "Math and logic puzzles, multi-step planning, creative generation with backtracking",
+    complexity: "High",
+    agents: "1",
+    loops: "Until solution found",
+    statefulness: "Stateful",
+    loop: true,
+    flow: [
+      {label:"Problem", cat:"neutral"}, {label:"Branch out", cat:"llm"}, {label:"Evaluate paths", cat:"data"}, {label:"Promising?", cat:"llm"}
+    ]
+  },
   {
     section: "Single-agent — memory",
     group: "single",
@@ -645,6 +680,23 @@ <h1 class="header-title">AI agent <span>design patterns</span></h1>
       {label:"Query", cat:"neutral"}, {label:"Retriever", cat:"data"}, {label:"Context", cat:"data"}, {label:"LLM", cat:"llm"}, {label:"Answer", cat:"neutral"}
     ]
   },
+  {
+    section: "Single-agent — memory",
+    group: "single",
+    name: "Agentic RAG",
+    sub: "Iterative retrieve, reason, refine",
+    cat: "data", catLabel: "Data / memory",
+    desc: "Retrieval becomes a tool the agent calls repeatedly rather than a fixed pre-processing step: the model decomposes a complex question into sub-queries, retrieves, evaluates whether the returned context is sufficient, and either reformulates the query and retrieves again or moves on to generate the final answer. Handles multi-hop questions a single retrieve-then-generate pass cannot.",
+    uses: "Multi-hop QA, deep research agents, complex knowledge-base queries",
+    complexity: "High",
+    agents: "1",
+    loops: "Until context sufficient",
+    statefulness: "Stateful",
+    loop: true,
+    flow: [
+      {label:"Query", cat:"neutral"}, {label:"Decompose", cat:"llm"}, {label:"Retrieve", cat:"data"}, {label:"Sufficient?", cat:"llm"}
+    ]
+  },
   {
     section: "Single-agent — memory",
     group: "single",
@@ -791,7 +843,7 @@ <h1 class="header-title">AI agent <span>design patterns</span></h1>
 let currentLabels = 'full';
 
 /* ── Flow diagram (SVG) renderer ──
-   Generic, data-driven layout so all 15 patterns render with identical
+   Generic, data-driven layout so all patterns render with identical
    spacing/sizing rules. Handles plain sequences, parallel fan-out/fan-in
    clusters, exclusive-OR branch clusters, and loop-back-with-done. */
 const NODE_H = 40, GAP_X = 34, MEMBER_H = 34, MEMBER_GAP_Y = 9;