From 4cade428d863dd6c83b3e36f15111029c5fdbb56 Mon Sep 17 00:00:00 2001
From: Sydney Runkle <54324534+sydney-runkle@users.noreply.github.com>
Date: Thu, 22 May 2025 12:23:43 -0400
Subject: [PATCH] docs: adding interactive graph widget (#4785)

---
 .../agents/assets/react_agent_graphs/0000.svg |   1 +
 .../agents/assets/react_agent_graphs/0001.svg |   1 +
 .../agents/assets/react_agent_graphs/0010.svg |   1 +
 .../agents/assets/react_agent_graphs/0011.svg |   1 +
 .../agents/assets/react_agent_graphs/0100.svg |   1 +
 .../agents/assets/react_agent_graphs/0101.svg |   1 +
 .../agents/assets/react_agent_graphs/0110.svg |   1 +
 .../agents/assets/react_agent_graphs/0111.svg |   1 +
 .../agents/assets/react_agent_graphs/1000.svg |   1 +
 .../agents/assets/react_agent_graphs/1001.svg |   1 +
 .../agents/assets/react_agent_graphs/1010.svg |   1 +
 .../agents/assets/react_agent_graphs/1011.svg |   1 +
 .../agents/assets/react_agent_graphs/1100.svg |   1 +
 .../agents/assets/react_agent_graphs/1101.svg |   1 +
 .../agents/assets/react_agent_graphs/1110.svg |   1 +
 .../agents/assets/react_agent_graphs/1111.svg |   1 +
 docs/docs/agents/overview.md                  | 136 ++++++++++++++++++
 docs/docs/assets/react-agent-graphs.json      |  19 +++
 docs/docs/stylesheets/agent_graph_widget.css  |  57 ++++++++
 docs/mkdocs.yml                               |   2 +
 docs/uv.lock                                  |   3 +-
 21 files changed, 232 insertions(+), 1 deletion(-)
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0000.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0001.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0010.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0011.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0100.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0101.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0110.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/0111.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1000.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1001.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1010.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1011.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1100.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1101.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1110.svg
 create mode 100644 docs/docs/agents/assets/react_agent_graphs/1111.svg
 create mode 100644 docs/docs/assets/react-agent-graphs.json
 create mode 100644 docs/docs/stylesheets/agent_graph_widget.css

diff --git a/docs/docs/agents/assets/react_agent_graphs/0000.svg b/docs/docs/agents/assets/react_agent_graphs/0000.svg
new file mode 100644
index 000000000..864b0d461
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0000.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 106.265625 233.5625" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M53.133,42.188L53.133,67.188L53.133,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M53.133,141.375L53.133,166.375L53.133,187.375" id="L_agent___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(53.1328125, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(53.1328125, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-2" transform="translate(53.1328125, 208.46875)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/0001.svg b/docs/docs/agents/assets/react_agent_graphs/0001.svg
new file mode 100644
index 000000000..2643171df
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0001.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 215.640625 248.5625" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M123.332,42.188L123.332,67.188L123.332,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M88.309,140.769L50.922,166.375L50.922,194.875" id="L_agent___end___0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M123.332,141.375L123.332,166.375L146.846,188.626" id="L_agent_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M180.701,191.375L185.742,166.375L157.413,143.864" id="L_tools_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(123.33203125, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(123.33203125, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(175.7421875, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-3" transform="translate(50.921875, 215.96875)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/0010.svg b/docs/docs/agents/assets/react_agent_graphs/0010.svg
new file mode 100644
index 000000000..c63d3a28e
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0010.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 165.203125 332.75" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M82.602,42.188L82.602,67.188L82.602,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M82.602,141.375L82.602,166.375L82.602,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M82.602,240.563L82.602,265.563L82.602,286.563" id="L_agent___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(82.6015625, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(82.6015625, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-2" transform="translate(82.6015625, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-3" transform="translate(82.6015625, 307.65625)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/0011.svg b/docs/docs/agents/assets/react_agent_graphs/0011.svg
new file mode 100644
index 000000000..00618e1bb
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0011.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 215.640625 347.75" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M113.332,42.188L113.332,67.188L113.332,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M55.963,240.563L50.922,265.563L50.922,294.063" id="L_agent___end___0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M91.871,240.563L123.332,265.563L146.846,287.813" id="L_agent_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M87.342,141.375L60.922,166.375L60.922,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M180.701,290.563L185.742,265.563L185.742,215.969L185.742,166.375L152.541,143.635" id="L_tools_pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(113.33203125, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(60.921875, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(175.7421875, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-3" transform="translate(113.33203125, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-4" transform="translate(50.921875, 315.15625)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/0100.svg b/docs/docs/agents/assets/react_agent_graphs/0100.svg
new file mode 100644
index 000000000..2d99f88a5
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0100.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 172.3125 332.75" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M86.156,42.188L86.156,67.188L86.156,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M86.156,141.375L86.156,166.375L86.156,187.375" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M86.156,240.563L86.156,265.563L86.156,286.563" id="L_post_model_hook___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(86.15625, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(86.15625, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-2" transform="translate(86.15625, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-3" transform="translate(86.15625, 307.65625)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/0101.svg b/docs/docs/agents/assets/react_agent_graphs/0101.svg
new file mode 100644
index 000000000..605b5eaee
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0101.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 245.04296875 347.75" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M148.566,42.188L148.566,67.188L148.566,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M113.543,140.769L76.156,166.375L80.407,187.454" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M81.197,240.563L76.156,265.563L76.156,294.063" id="L_post_model_hook___end___0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M117.106,191.375L148.566,166.375L148.566,145.375" id="L_post_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M117.106,240.563L148.566,265.563L174.079,287.926" id="L_post_model_hook_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M210.104,290.563L215.145,265.563L215.145,215.969L215.145,166.375L184.791,143.765" id="L_tools_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(148.56640625, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(148.56640625, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(205.14453125, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-3" transform="translate(86.15625, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-4" transform="translate(76.15625, 315.15625)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/0110.svg b/docs/docs/agents/assets/react_agent_graphs/0110.svg
new file mode 100644
index 000000000..bf6e988e7
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0110.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 172.3125 431.9375" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M86.156,42.188L86.156,67.188L86.156,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M86.156,240.563L86.156,265.563L86.156,286.563" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M86.156,141.375L86.156,166.375L86.156,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M86.156,339.75L86.156,364.75L86.156,385.75" id="L_post_model_hook___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(86.15625, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(86.15625, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-2" transform="translate(86.15625, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-3" transform="translate(86.15625, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-4" transform="translate(86.15625, 406.84375)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/0111.svg b/docs/docs/agents/assets/react_agent_graphs/0111.svg
new file mode 100644
index 000000000..eb4af67ec
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/0111.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 245.04296875 446.9375" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M148.566,42.188L148.566,67.188L148.566,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M51.145,240.563L51.145,265.563L66.487,287.295" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M81.197,339.75L76.156,364.75L76.156,393.25" id="L_post_model_hook___end___0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M117.106,290.563L148.566,265.563L148.566,215.969L148.566,166.375L148.566,145.375" id="L_post_model_hook_pre_model_hook_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M117.106,339.75L148.566,364.75L174.079,387.113" id="L_post_model_hook_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M100.254,141.375L51.145,166.375L51.145,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M210.104,389.75L215.145,364.75L215.145,315.156L215.145,265.563L215.145,215.969L215.145,166.375L184.791,143.765" id="L_tools_pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(148.56640625, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(51.14453125, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(205.14453125, 414.34375)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-3" transform="translate(148.56640625, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-4" transform="translate(86.15625, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-5" transform="translate(76.15625, 414.34375)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1000.svg b/docs/docs/agents/assets/react_agent_graphs/1000.svg
new file mode 100644
index 000000000..2d72d4bc7
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1000.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 263.921875 332.75" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M131.961,42.188L131.961,67.188L131.961,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,141.375L131.961,166.375L131.961,187.375" id="L_agent_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,240.563L131.961,265.563L131.961,286.563" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(131.9609375, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(131.9609375, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-2" transform="translate(131.9609375, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-3" transform="translate(131.9609375, 307.65625)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1001.svg b/docs/docs/agents/assets/react_agent_graphs/1001.svg
new file mode 100644
index 000000000..f416f3466
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1001.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 377.71875 332.75" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M132.828,42.188L132.828,67.188L132.828,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M167.852,132.162L245.758,166.375L245.758,187.375" id="L_agent_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M97.805,133.656L29.898,166.375L34.149,187.454" id="L_agent_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M71.797,198.946L132.828,166.375L132.828,145.375" id="L_tools_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M245.758,240.563L245.758,265.563L245.758,286.563" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(132.828125, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(132.828125, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(39.8984375, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-3" transform="translate(245.7578125, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-4" transform="translate(245.7578125, 307.65625)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1010.svg b/docs/docs/agents/assets/react_agent_graphs/1010.svg
new file mode 100644
index 000000000..9308976c6
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1010.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 263.921875 431.9375" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M131.961,42.188L131.961,67.188L131.961,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,240.563L131.961,265.563L131.961,286.563" id="L_agent_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,141.375L131.961,166.375L131.961,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,339.75L131.961,364.75L131.961,385.75" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(131.9609375, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(131.9609375, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-2" transform="translate(131.9609375, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-3" transform="translate(131.9609375, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-4" transform="translate(131.9609375, 406.84375)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1011.svg b/docs/docs/agents/assets/react_agent_graphs/1011.svg
new file mode 100644
index 000000000..21fe20c19
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1011.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 377.71875 431.9375" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M234.891,42.188L234.891,67.188L234.891,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M137.002,240.563L131.961,265.563L131.961,286.563" id="L_agent_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M176.984,232.844L244.891,265.563L302.393,296.25" id="L_agent_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M188.806,141.375L141.961,166.375L141.961,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M342.779,290.563L347.82,265.563L347.82,215.969L347.82,166.375L294.555,142.983" id="L_tools_pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,339.75L131.961,364.75L131.961,385.75" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(234.890625, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(141.9609375, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(337.8203125, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-3" transform="translate(234.890625, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-4" transform="translate(131.9609375, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-5" transform="translate(131.9609375, 406.84375)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1100.svg b/docs/docs/agents/assets/react_agent_graphs/1100.svg
new file mode 100644
index 000000000..f36fd09aa
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1100.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 263.921875 431.9375" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M131.961,42.188L131.961,67.188L131.961,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,141.375L131.961,166.375L131.961,187.375" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,240.563L131.961,265.563L131.961,286.563" id="L_post_model_hook_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,339.75L131.961,364.75L131.961,385.75" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(131.9609375, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(131.9609375, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-2" transform="translate(131.9609375, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-3" transform="translate(131.9609375, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-4" transform="translate(131.9609375, 406.84375)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1101.svg b/docs/docs/agents/assets/react_agent_graphs/1101.svg
new file mode 100644
index 000000000..7af4855ed
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1101.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 377.71875 431.9375" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M281.242,42.188L281.242,67.188L281.242,88.188" id="L___start___agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M246.219,132.162L168.313,166.375L172.563,187.454" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M229.356,191.375L281.242,166.375L281.242,145.375" id="L_post_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M155.327,240.563L131.961,265.563L131.961,286.563" id="L_post_model_hook_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M229.356,240.563L281.242,265.563L306.755,287.926" id="L_post_model_hook_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M342.779,290.563L347.82,265.563L347.82,215.969L347.82,166.375L317.466,143.765" id="L_tools_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,339.75L131.961,364.75L131.961,385.75" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(281.2421875, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(281.2421875, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(337.8203125, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-3" transform="translate(178.3125, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-4" transform="translate(131.9609375, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-5" transform="translate(131.9609375, 406.84375)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1110.svg b/docs/docs/agents/assets/react_agent_graphs/1110.svg
new file mode 100644
index 000000000..fea6c4e77
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1110.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 263.921875 531.125" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M131.961,42.188L131.961,67.188L131.961,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,240.563L131.961,265.563L131.961,286.563" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,339.75L131.961,364.75L131.961,385.75" id="L_post_model_hook_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,141.375L131.961,166.375L131.961,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,438.938L131.961,463.938L131.961,484.938" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(131.9609375, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(131.9609375, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-2" transform="translate(131.9609375, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-3" transform="translate(131.9609375, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-4" transform="translate(131.9609375, 414.34375)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-5" transform="translate(131.9609375, 506.03125)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/assets/react_agent_graphs/1111.svg b/docs/docs/agents/assets/react_agent_graphs/1111.svg
new file mode 100644
index 000000000..ec9a02cd9
--- /dev/null
+++ b/docs/docs/agents/assets/react_agent_graphs/1111.svg
@@ -0,0 +1 @@
+<svg id="mermaid-svg" xmlns="http://www.w3.org/2000/svg" class="flowchart" style="max-width: 100%; background-color: white;" viewBox="0 0 377.71875 531.125" role="graphics-document document" aria-roledescription="flowchart-v2" height="500px" xmlns:xlink="http://www.w3.org/1999/xlink"><style xmlns="http://www.w3.org/1999/xhtml">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");</style><style>#mermaid-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg .error-icon{fill:#552222;}#mermaid-svg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg .marker{fill:#333333;stroke:#333333;}#mermaid-svg .marker.cross{stroke:#333333;}#mermaid-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg p{margin:0;}#mermaid-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg .cluster-label text{fill:#333;}#mermaid-svg .cluster-label span{color:#333;}#mermaid-svg .cluster-label span p{background-color:transparent;}#mermaid-svg .label text,#mermaid-svg span{fill:#333;color:#333;}#mermaid-svg .node rect,#mermaid-svg .node circle,#mermaid-svg .node ellipse,#mermaid-svg .node polygon,#mermaid-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg .rough-node .label text,#mermaid-svg .node .label text,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-anchor:middle;}#mermaid-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg .rough-node .label,#mermaid-svg .node .label,#mermaid-svg .image-shape .label,#mermaid-svg .icon-shape .label{text-align:center;}#mermaid-svg .node.clickable{cursor:pointer;}#mermaid-svg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg .arrowheadPath{fill:#333333;}#mermaid-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg .cluster text{fill:#333;}#mermaid-svg .cluster span{color:#333;}#mermaid-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg rect.text{fill:none;stroke-width:0;}#mermaid-svg .icon-shape,#mermaid-svg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg .icon-shape p,#mermaid-svg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg .icon-shape rect,#mermaid-svg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg .default&gt;*{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .default span{fill:#f2f0ff!important;line-height:1.2!important;}#mermaid-svg .first&gt;*{fill-opacity:0!important;}#mermaid-svg .first span{fill-opacity:0!important;}#mermaid-svg .last&gt;*{fill:#bfb6fc!important;}#mermaid-svg .last span{fill:#bfb6fc!important;}</style><g><marker id="mermaid-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="mermaid-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M281.242,42.188L281.242,67.188L281.242,88.188" id="L___start___pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M143.301,240.563L143.301,265.563L158.643,287.295" id="L_agent_post_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M155.327,339.75L131.961,364.75L131.961,385.75" id="L_post_model_hook_generate_structured_response_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M229.356,290.563L281.242,265.563L281.242,215.969L281.242,166.375L281.242,145.375" id="L_post_model_hook_pre_model_hook_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M229.356,339.75L281.242,364.75L306.755,387.113" id="L_post_model_hook_tools_0" class=" edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M212.836,141.375L143.301,166.375L143.301,187.375" id="L_pre_model_hook_agent_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M342.779,389.75L347.82,364.75L347.82,315.156L347.82,265.563L347.82,215.969L347.82,166.375L317.466,143.765" id="L_tools_pre_model_hook_0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/><path d="M131.961,438.938L131.961,463.938L131.961,484.938" id="L_generate_structured_response___end___0" class=" edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style="" marker-end="url(#mermaid-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel "></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default first " id="flowchart-__start__-0" transform="translate(281.2421875, 25.09375)"><rect class="basic label-container" style="fill:#f2f0ff !important;fill-opacity:0 !important" rx="17.09375" ry="17.09375" x="-45.1328125" y="-17.09375" width="90.265625" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-33.359375, -9.59375)"><rect/><foreignObject width="66.71875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__start__</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-agent-1" transform="translate(143.30078125, 215.96875)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-35.0234375" y="-24.59375" width="70.046875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-20.0234375, -9.59375)"><rect/><foreignObject width="40.046875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>agent</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-tools-2" transform="translate(337.8203125, 414.34375)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-31.8984375" y="-24.59375" width="63.796875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-16.8984375, -9.59375)"><rect/><foreignObject width="33.796875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>tools</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-pre_model_hook-3" transform="translate(281.2421875, 116.78125)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-74.6015625" y="-24.59375" width="149.203125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-59.6015625, -9.59375)"><rect/><foreignObject width="119.203125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>pre_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-post_model_hook-4" transform="translate(178.3125, 315.15625)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-78.15625" y="-24.59375" width="156.3125" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-63.15625, -9.59375)"><rect/><foreignObject width="126.3125" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>post_model_hook</p></span></div></foreignObject></g></g><g class="node default  " id="flowchart-generate_structured_response-5" transform="translate(131.9609375, 414.34375)"><rect class="basic label-container" style="fill:#f2f0ff !important" rx="5" ry="5" x="-123.9609375" y="-24.59375" width="247.921875" height="49.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-108.9609375, -9.59375)"><rect/><foreignObject width="217.921875" height="19.1875"><div style="line-height: 1.5; display: table; white-space: break-spaces; max-width: 200px; text-align: center; width: 200px;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>generate_structured_response</p></span></div></foreignObject></g></g><g class="node default last " id="flowchart-__end__-6" transform="translate(131.9609375, 506.03125)"><rect class="basic label-container" style="fill:#bfb6fc !important" rx="17.09375" ry="17.09375" x="-42.921875" y="-17.09375" width="85.84375" height="34.1875"/><g class="label" style="line-height:1.2 !important" transform="translate(-31.1484375, -9.59375)"><rect/><foreignObject width="62.296875" height="19.1875"><div style="line-height: 1.5; display: table-cell; white-space: nowrap; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span style="line-height:1.2 !important" class="nodeLabel "><p>__end__</p></span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/docs/docs/agents/overview.md b/docs/docs/agents/overview.md
index 22f39ccb9..b8ffb6cf2 100644
--- a/docs/docs/agents/overview.md
+++ b/docs/docs/agents/overview.md
@@ -53,3 +53,139 @@ The high-level components are organized into several packages, each with a speci
 | `langmem`                                  | Agent memory management: [**short-term and long-term**](./memory.md)        | `pip install -U langmem`                |
 | `agentevals`                               | Utilities to [**evaluate agent performance**](./evals.md)                   | `pip install -U agentevals`             |
 
+## Visualize an agent graph
+
+Use the following tool to visualize the graph generated by
+[`create_react_agent`][langgraph.prebuilt.chat_agent_executor.create_react_agent]
+and to view an outline of the corresponding code.
+It allows you to explore the infrastructure of the agent as defined by the presence of:
+
+* [`tools`](../agents/tools.md): A list of tools (functions, APIs, or other callable objects) that the agent can use to perform tasks.
+* [`pre_model_hook`](../how-tos/create-react-agent-manage-message-history.ipynb): A function that is called before the model is invoked. It can be used to condense messages or perform other preprocessing tasks.
+* `post_model_hook`: A function that is called after the model is invoked. It can be used to implement guardrails, human-in-the-loop flows, or other postprocessing tasks.
+* [`response_format`](../agents/agents.md#6-configure-structured-output): A data structure used to constrain the type of the final output, e.g., a `pydantic` `BaseModel`.
+
+<div class="agent-layout">
+  <div class="agent-graph-features-container">
+    <div class="agent-graph-features">
+      <h3 class="agent-section-title">Features</h3>
+      <label><input type="checkbox" id="tools" checked> <code>tools</code></label>
+      <label><input type="checkbox" id="pre_model_hook"> <code>pre_model_hook</code></label>
+      <label><input type="checkbox" id="post_model_hook"> <code>post_model_hook</code></label>
+      <label><input type="checkbox" id="response_format"> <code>response_format</code></label>
+    </div>
+  </div>
+
+  <div class="agent-graph-container">
+    <h3 class="agent-section-title">Graph</h3>
+    <img id="agent-graph-img" src="../assets/react_agent_graphs/0001.svg" alt="graph image" style="max-width: 100%;"/>
+  </div>
+</div>
+
+
+The following code snippet shows how to create the above agent (and underlying graph) with
+[`create_react_agent`][langgraph.prebuilt.chat_agent_executor.create_react_agent]:
+
+<div class="language-python">
+  <pre><code id="agent-code" class="language-python"></code></pre>
+</div>
+
+
+<script>
+function getCheckedValue(id) {
+  return document.getElementById(id).checked ? "1" : "0";
+}
+
+function getKey() {
+  return [
+    getCheckedValue("response_format"),
+    getCheckedValue("post_model_hook"),
+    getCheckedValue("pre_model_hook"),
+    getCheckedValue("tools")
+  ].join("");
+}
+
+function generateCodeSnippet({ tools, pre, post, response }) {
+  const lines = [
+    "from langgraph.prebuilt import create_react_agent",
+    "from langchain_openai import ChatOpenAI"
+  ];
+
+  if (response) lines.push("from pydantic import BaseModel");
+
+  lines.push("", 'model = ChatOpenAI("o4-mini")', "");
+
+  if (tools) {
+    lines.push(
+      "def tool() -> None:",
+      '    """Testing tool."""',
+      "    ...",
+      ""
+    );
+  }
+
+  if (pre) {
+    lines.push(
+      "def pre_model_hook() -> None:",
+      '    """Pre-model hook."""',
+      "    ...",
+      ""
+    );
+  }
+
+  if (post) {
+    lines.push(
+      "def post_model_hook() -> None:",
+      '    """Post-model hook."""',
+      "    ...",
+      ""
+    );
+  }
+
+  if (response) {
+    lines.push(
+      "class ResponseFormat(BaseModel):",
+      '    """Response format for the agent."""',
+      "    result: str",
+      ""
+    );
+  }
+
+  lines.push("agent = create_react_agent(");
+  lines.push("    model,");
+
+  if (tools) lines.push("    tools=[tool],");
+  if (pre) lines.push("    pre_model_hook=pre_model_hook,");
+  if (post) lines.push("    post_model_hook=post_model_hook,");
+  if (response) lines.push("    response_format=ResponseFormat,");
+
+  lines.push(")", "", "agent.get_graph().draw_mermaid_png()");
+
+  return lines.join("\n");
+}
+
+async function render() {
+  const key = getKey();
+  document.getElementById("agent-graph-img").src = `../assets/react_agent_graphs/${key}.svg`;
+
+  const state = {
+    tools: document.getElementById("tools").checked,
+    pre: document.getElementById("pre_model_hook").checked,
+    post: document.getElementById("post_model_hook").checked,
+    response: document.getElementById("response_format").checked
+  };
+
+  document.getElementById("agent-code").textContent = generateCodeSnippet(state);
+}
+
+function initializeWidget() {
+  render(); // no need for `await` here
+  document.querySelectorAll(".agent-graph-features input").forEach((input) => {
+    input.addEventListener("change", render);
+  });
+}
+
+// Init for both full reload and SPA nav (used by MkDocs Material)
+window.addEventListener("DOMContentLoaded", initializeWidget);
+document$.subscribe(initializeWidget);
+</script>
diff --git a/docs/docs/assets/react-agent-graphs.json b/docs/docs/assets/react-agent-graphs.json
new file mode 100644
index 000000000..7a599af97
--- /dev/null
+++ b/docs/docs/assets/react-agent-graphs.json
@@ -0,0 +1,19 @@
+{
+    "0000": "graph TD;\n\t__start__ --> agent;\n\tagent --> __end__;",
+    "0001": "graph TD;\n\t__start__ --> agent;\n\tagent -.-> __end__;\n\tagent -.-> tools;\n\ttools --> agent;",
+    "0010": "graph TD;\n\t__start__ --> pre_model_hook;\n\tpre_model_hook --> agent;\n\tagent --> __end__;",
+    "0011": "graph TD;\n\t__start__ --> pre_model_hook;\n\tagent -.-> __end__;\n\tagent -.-> tools;\n\tpre_model_hook --> agent;\n\ttools --> pre_model_hook;",
+    "0100": "graph TD;\n\t__start__ --> agent;\n\tagent --> post_model_hook;\n\tpost_model_hook --> __end__;",
+    "0101": "graph TD;\n\t__start__ --> agent;\n\tagent --> post_model_hook;\n\tpost_model_hook -.-> __end__;\n\tpost_model_hook -.-> agent;\n\tpost_model_hook -.-> tools;\n\ttools --> agent;",
+    "0110": "graph TD;\n\t__start__ --> pre_model_hook;\n\tagent --> post_model_hook;\n\tpre_model_hook --> agent;\n\tpost_model_hook --> __end__;",
+    "0111": "graph TD;\n\t__start__ --> pre_model_hook;\n\tagent --> post_model_hook;\n\tpost_model_hook -.-> __end__;\n\tpost_model_hook -.-> pre_model_hook;\n\tpost_model_hook -.-> tools;\n\tpre_model_hook --> agent;\n\ttools --> pre_model_hook;",
+    "1000": "graph TD;\n\t__start__ --> agent;\n\tagent --> generate_structured_response;\n\tgenerate_structured_response --> __end__;",
+    "1001": "graph TD;\n\t__start__ --> agent;\n\tagent -.-> generate_structured_response;\n\tagent -.-> tools;\n\ttools --> agent;\n\tgenerate_structured_response --> __end__;",
+    "1010": "graph TD;\n\t__start__ --> pre_model_hook;\n\tagent --> generate_structured_response;\n\tpre_model_hook --> agent;\n\tgenerate_structured_response --> __end__;",
+    "1011": "graph TD;\n\t__start__ --> pre_model_hook;\n\tagent -.-> generate_structured_response;\n\tagent -.-> tools;\n\tpre_model_hook --> agent;\n\ttools --> pre_model_hook;\n\tgenerate_structured_response --> __end__;",
+    "1100": "graph TD;\n\t__start__ --> agent;\n\tagent --> post_model_hook;\n\tpost_model_hook --> generate_structured_response;\n\tgenerate_structured_response --> __end__;",
+    "1101": "graph TD;\n\t__start__ --> agent;\n\tagent --> post_model_hook;\n\tpost_model_hook -.-> agent;\n\tpost_model_hook -.-> generate_structured_response;\n\tpost_model_hook -.-> tools;\n\ttools --> agent;\n\tgenerate_structured_response --> __end__;",
+    "1110": "graph TD;\n\t__start__ --> pre_model_hook;\n\tagent --> post_model_hook;\n\tpost_model_hook --> generate_structured_response;\n\tpre_model_hook --> agent;\n\tgenerate_structured_response --> __end__;",
+    "1111": "graph TD;\n\t__start__ --> pre_model_hook;\n\tagent --> post_model_hook;\n\tpost_model_hook -.-> generate_structured_response;\n\tpost_model_hook -.-> pre_model_hook;\n\tpost_model_hook -.-> tools;\n\tpre_model_hook --> agent;\n\ttools --> pre_model_hook;\n\tgenerate_structured_response --> __end__;"
+}
+  
\ No newline at end of file
diff --git a/docs/docs/stylesheets/agent_graph_widget.css b/docs/docs/stylesheets/agent_graph_widget.css
new file mode 100644
index 000000000..6db767498
--- /dev/null
+++ b/docs/docs/stylesheets/agent_graph_widget.css
@@ -0,0 +1,57 @@
+.agent-layout {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 1rem;
+    align-items: flex-start;
+    margin-top: 1rem;
+}
+
+.agent-layout h3 {
+    margin: 0;
+}
+
+.agent-graph-features {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    max-width: 300px;
+    flex-shrink: 0;
+
+    border: 1px solid var(--md-default-fg-color--lightest);
+    border-radius: 0.5rem;
+    background-color: var(--md-default-bg-color);
+}
+
+.agent-graph-features label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--md-typeset-color);
+    cursor: pointer;
+}
+
+.agent-graph-features input[type="checkbox"] {
+    accent-color: var(--md-accent-fg-color);
+    transform: scale(1.2);
+}
+
+.agent-graph-container {
+    flex: 1 1 50%;
+    max-width: 70%;
+    padding: 1rem;
+
+    overflow: auto;
+    height: auto;
+    box-sizing: border-box;
+
+    border: 1px solid var(--md-default-fg-color--lightest);
+    border-radius: 0.5rem;
+    background-color: var(--md-default-bg-color);
+}
+
+.agent-graph-container img {
+    display: block;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 25200a3f6..6c2e03f0d 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -416,3 +416,5 @@ extra_css:
   - stylesheets/version_admonitions.css
   - stylesheets/logos.css
   - stylesheets/sticky_navigation.css
+  - stylesheets/agent_graph_widget.css
+
diff --git a/docs/uv.lock b/docs/uv.lock
index 3bdc91742..abecc5c5c 100644
--- a/docs/uv.lock
+++ b/docs/uv.lock
@@ -2917,11 +2917,12 @@ dev = [
     { name = "pytest-mock" },
     { name = "pytest-watcher" },
     { name = "ruff" },
+    { name = "syrupy" },
 ]
 
 [[package]]
 name = "langgraph-sdk"
-version = "0.1.69"
+version = "0.1.70"
 source = { editable = "../libs/sdk-py" }
 dependencies = [
     { name = "httpx" },