fix broken stuff

lnhsingh · lnhsingh · commit 096ebfcab8c2 · 2025-08-04T19:39:54.000-04:00
diff --git a/src/langgraph-platform/langgraph-basics/1-build-basic-chatbot.mdx b/src/langgraph-platform/langgraph-basics/1-build-basic-chatbot.mdx
@@ -3,7 +3,7 @@ title: Build a basic chatbot
 sidebarTitle: 1. Build a basic chatbot
 ---
 
-import ChatModelTabs from '/snippets/chat_model_tabs.mdx';
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
 
 In this tutorial, you will build a basic chatbot. This chatbot is the basis for the following series of tutorials where you will progressively add more sophisticated capabilities, and be introduced to key LangGraph concepts along the way. Let’s dive in! 🌟
 
diff --git a/src/langgraph-platform/langgraph-basics/2-add-tools.mdx b/src/langgraph-platform/langgraph-basics/2-add-tools.mdx
@@ -3,7 +3,7 @@ title: Add tools
 sidebarTitle: 2. Add tools
 ---
 
-import ChatModelTabs from '/snippets/chat_model_tabs.mdx';
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
 
 To handle queries that your chatbot can't answer "from memory", integrate a web search tool. The chatbot can use this tool to find relevant information and provide better responses.
 
diff --git a/src/langgraph-platform/langgraph-basics/3-add-memory.mdx b/src/langgraph-platform/langgraph-basics/3-add-memory.mdx
@@ -3,7 +3,7 @@ title: Add memory
 sidebarTitle: 3. Add memory
 ---
 
-import ChatModelTabs from '/snippets/chat_model_tabs.mdx';
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
 
 <Note>
   This tutorial builds on [Add Tools](/langgraph-platform/langgraph-basics/2-add-tools).
diff --git a/src/langgraph-platform/langgraph-basics/4-human-in-the-loop.mdx b/src/langgraph-platform/langgraph-basics/4-human-in-the-loop.mdx
@@ -3,7 +3,7 @@ title: Add human-in-the-loop controls
 sidebarTitle: 4. Add human-in-the-loop controls
 ---
 
-import ChatModelTabs from '/snippets/chat_model_tabs.mdx';
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
 
 <Note>
   This tutorial builds on [Add Memory](/langgraph-platform/langgraph-basics/3-add-memory).
diff --git a/src/langgraph-platform/langgraph-basics/5-customize-state.mdx b/src/langgraph-platform/langgraph-basics/5-customize-state.mdx
@@ -3,7 +3,7 @@ title: Customize state
 sidebarTitle: 5. Customize state
 ---
 
-import ChatModelTabs from '/snippets/chat_model_tabs.mdx';
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
 
 In this tutorial, you will add additional fields to the state to define complex behavior without relying on the message list. The chatbot will use its search tool to find specific information and forward them to a human for review.
 
diff --git a/src/langgraph-platform/langgraph-basics/6-time-travel.mdx b/src/langgraph-platform/langgraph-basics/6-time-travel.mdx
@@ -3,7 +3,7 @@ title: Time travel
 sidebarTitle: 6. Time travel
 ---
 
-import ChatModelTabs from '/snippets/chat_model_tabs.mdx';
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
 
 In a typical chatbot workflow, the user interacts with the bot one or more times to accomplish a task. [Memory](/langgraph-platform/langgraph-basics/3-add-memory) and a [human-in-the-loop](/langgraph-platform/langgraph-basics/4-human-in-the-loop) enable checkpoints in the graph state and control future responses.
 
diff --git a/src/oss/1-build-basic-chatbot.mdx b/src/oss/1-build-basic-chatbot.mdx
@@ -1,6 +1,9 @@
 ---
 title: Build a basic chatbot
 ---
+
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
+
 In this tutorial, you will build a basic chatbot. This chatbot is the basis for the following series of tutorials where you will progressively add more sophisticated capabilities, and be introduced to key LangGraph concepts along the way. Let's dive in! 🌟
 
 ## Prerequisites
@@ -106,17 +109,9 @@ Next, add a "`chatbot`" node. **Nodes** represent units of work and are typicall
 Let's first select a chat model:
 
 :::python
-{% include-markdown "../../../snippets/chat_model_tabs.md" %}
-
-<!---
-
-```python
-from langchain.chat_models import init_chat_model
 
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
+<ChatModelTabs />
 
--->
 :::
 
 :::js
diff --git a/src/oss/2-add-tools.mdx b/src/oss/2-add-tools.mdx
@@ -1,6 +1,9 @@
 ---
 title: Add tools
 ---
+
+import chatTabs from '/snippets/chat-model-tabs.mdx';
+
 To handle queries that your chatbot can't answer "from memory", integrate a web search tool. The chatbot can use this tool to find relevant information and provide better responses.
 
 <Note>
@@ -162,17 +165,9 @@ For the `StateGraph` you created in the [first tutorial](/oss/1-build-basic-chat
 Let's first select our LLM:
 
 :::python
-{% include-markdown "../../../snippets/chat_model_tabs.md" %}
 
-<!---
+<chatTabs />
 
-```python
-from langchain.chat_models import init_chat_model
-
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
-
--->
 :::
 
 :::js
@@ -600,27 +595,8 @@ For ease of use, adjust your code to replace the following with LangGraph prebui
 * `BasicToolNode` is replaced with the prebuilt [ToolNode](https://langchain-ai.github.io/langgraph/reference/prebuilt/#toolnode)
 * `route_tools` is replaced with the prebuilt [tools_condition](https://langchain-ai.github.io/langgraph/reference/prebuilt/#tools_condition)
 
-{% include-markdown "../../../snippets/chat_model_tabs.md" %}
-
-<!---
-
-```python
-from langchain.chat_models import init_chat_model
-
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
-
--->
-
-<!---
-
-```python
-from langchain.chat_models import init_chat_model
-
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
+<chatTabs />
 
--->
 
 ```python hl_lines="25 30"
 from typing import Annotated
diff --git a/src/oss/3-add-memory.mdx b/src/oss/3-add-memory.mdx
@@ -1,6 +1,9 @@
 ---
 title: Add memory
 ---
+
+import chatTabs from '/snippets/chat-model-tabs.mdx';
+
 The chatbot can now [use tools](/oss/2-add-tools) to answer user questions, but it does not remember the context of previous interactions. This limits its ability to have coherent, multi-turn conversations.
 
 LangGraph solves this problem through **persistent checkpointing**. If you provide a `checkpointer` when compiling the graph and a `thread_id` when calling your graph, LangGraph automatically saves the state after each step. When you invoke the graph again using the same `thread_id`, the graph loads its saved state, allowing the chatbot to pick up where it left off.
@@ -326,17 +329,7 @@ The snapshot above contains the current state values, corresponding config, and
 Check out the code snippet below to review the graph from this tutorial:
 
 :::python
-{% include-markdown "../../../snippets/chat_model_tabs.md" %}
-
-<!---
-
-```python
-from langchain.chat_models import init_chat_model
-
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
-
--->
+<chatTabs />
 
 ```python hl_lines="36 37"
 from typing import Annotated
diff --git a/src/oss/4-human-in-the-loop.mdx b/src/oss/4-human-in-the-loop.mdx
@@ -1,6 +1,9 @@
 ---
 title: Add human-in-the-loop controls
 ---
+
+import chatTabs from '/snippets/chat-model-tabs.mdx';
+
 Agents can be unreliable and may need human input to successfully accomplish tasks. Similarly, for some actions, you may want to require human approval before running to ensure that everything is running as intended.
 
 LangGraph's [persistence](.././persistence) layer supports **human-in-the-loop** workflows, allowing execution to pause and resume based on user feedback. The primary interface to this functionality is the [`interrupt`](.././human_in_the_loop/add-human-in-the-loop) function. Calling `interrupt` inside a node will pause execution. Execution can be resumed, together with new input from a human, by passing in a [Command](.././low_level#command).
@@ -25,17 +28,9 @@ Starting with the existing code from the [Add memory to the chatbot](./3-add-mem
 Let's first select a chat model:
 
 :::python
-{% include-markdown "../../../snippets/chat_model_tabs.md" %}
-
-<!---
-
-```python
-from langchain.chat_models import init_chat_model
 
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
+<chatTabs />
 
--->
 :::
 
 :::js
@@ -373,11 +368,11 @@ snapshot.next;
       }),
     },
   );
+  ```
   
   Take a closer look at the `humanAssistance` tool:
   
-  ```
-  
+  ```javascript
   const humanAssistance = tool(
   async ({ query }) => {
   const humanResponse = interrupt({ query });
@@ -391,7 +386,6 @@ snapshot.next;
   }),
   },
   );
-  
   ```
   
   Calling `interrupt` inside the tool will pause execution. Progress is persisted based on the [checkpointer](.././persistence#checkpointer-libraries); so if it is persisting with Postgres, it can resume at any time as long as the database is alive. In this example, it is persisting with the in-memory checkpointer and can resume any time if the JavaScript runtime is running.
@@ -518,7 +512,7 @@ snapshot.next;
   
   :::python
   
-  {% include-markdown "../../../snippets/chat_model_tabs.md" %}
+  <chatTabs />
   
   ```
   
diff --git a/src/oss/5-customize-state.mdx b/src/oss/5-customize-state.mdx
@@ -1,6 +1,9 @@
 ---
 title: Customize state
 ---
+
+import chatTabs from '/snippets/chat-model-tabs.mdx';
+
 In this tutorial, you will add additional fields to the state to define complex behavior without relying on the message list. The chatbot will use its search tool to find specific information and forward them to a human for review.
 
 <Note>
@@ -461,17 +464,7 @@ Manual state updates will [generate a trace](https://smith.langchain.com/public/
 Check out the code snippet below to review the graph from this tutorial:
 
 :::python
-{% include-markdown "../../../snippets/chat_model_tabs.md" %}
-
-<!---
-
-```python
-from langchain.chat_models import init_chat_model
-
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
-
--->
+<chatTabs />
 
 ```python
 from typing import Annotated
diff --git a/src/oss/6-time-travel.mdx b/src/oss/6-time-travel.mdx
@@ -1,6 +1,9 @@
 ---
 title: Time travel
 ---
+
+import chatTabs from '/snippets/chat-model-tabs.mdx';
+
 In a typical chatbot workflow, the user interacts with the bot one or more times to accomplish a task. [Memory](/oss/3-add-memory) and a [human-in-the-loop](/oss/4-human-in-the-loop) enable checkpoints in the graph state and control future responses.
 
 What if you want a user to be able to start from a previous response and explore a different outcome? Or what if you want users to be able to rewind your chatbot's work to fix mistakes or try a different strategy, something that is common in applications like autonomous software engineers?
@@ -22,17 +25,8 @@ Rewind your graph by fetching a checkpoint using the graph's `getStateHistory` m
 :::
 
 :::python
-{% include-markdown "../../../snippets/chat_model_tabs.md" %}
-
-<!---
-
-```python
-from langchain.chat_models import init_chat_model
-
-llm = init_chat_model("anthropic:claude-3-5-sonnet-latest")
-```
+<chatTabs />
 
--->
 
 ```python
 from typing import Annotated
diff --git a/src/oss/add-human-in-the-loop.mdx b/src/oss/add-human-in-the-loop.mdx
@@ -301,11 +301,7 @@ await graph.invoke(new Command({ resume: { age: "25" } }), threadConfig);
 When nodes with interrupt conditions are run in parallel, it's possible to have multiple interrupts in the task queue.
 For example, the following graph has two nodes run in parallel that require human input:
 
-<figure markdown="1">
-
-![image](../assets/human_in_loop_parallel.png){: style="max-height:400px"}
-
-</figure>
+![two nodes run in parallel that require human input](../assets/human_in_loop_parallel.png)
 
 :::python
 Once your graph has been interrupted and is stalled, you can resume all the interrupts at once with `Command.resume`, passing a dictionary mapping of interrupt ids to resume values.
@@ -382,12 +378,7 @@ Below we show different design patterns that can be implemented using `interrupt
 
 ### Approve or reject
 
-<figure markdown="1">
-
-![image](.././img/human_in_the_loop/approve-or-reject.png){: style="max-height:400px"}
-
-<figcaption>Depending on the human's approval or rejection, the graph can proceed with the action or take an alternative path.</figcaption>
-</figure>
+![Depending on the human's approval or rejection, the graph can proceed with the action or take an alternative path](.././img/human_in_the_loop/approve-or-reject.png)
 
 Pause the graph before a critical step, such as an API call, to review and approve the action. If the action is rejected, you can prevent the graph from executing the step, and potentially take an alternative action.
 
@@ -621,13 +612,7 @@ await graph.invoke(new Command({ resume: true }), threadConfig);
 
 ### Review and edit state
 
-<figure markdown="1">
-
-![image](.././img/human_in_the_loop/edit-graph-state-simple.png){: style="max-height:400px"}
-
-<figcaption>A human can review and edit the state of the graph. This is useful for correcting mistakes or updating the state with additional information.
-</figcaption>
-</figure>
+![A human can review and edit the state of the graph. This is useful for correcting mistakes or updating the state with additional information](.././img/human_in_the_loop/edit-graph-state-simple.png)
 
 :::python
 ```python
@@ -862,16 +847,7 @@ await graph.invoke(
 
 ### Review tool calls
 
-<figure markdown="1">
-
-![image](.././img/human_in_the_loop/tool-call-review.png){: style="max-height:400px"}
-
-<figcaption>A human can review and edit the output from the LLM before proceeding. This is particularly
-
-critical in applications where the tool calls requested by the LLM may be sensitive or require human oversight.
-
-</figcaption>
-</figure>
+![A human can review and edit the output from the LLM before proceeding. This is particularly critical in applications where the tool calls requested by the LLM may be sensitive or require human oversight.](.././img/human_in_the_loop/tool-call-review.png)
 
 To add a human approval step to a tool:
 
diff --git a/src/oss/faq.mdx b/src/oss/faq.mdx
@@ -32,7 +32,7 @@ LangGraph is a stateful, orchestration framework that brings added control to ag
 | Streaming           | Basic                                                     | Dedicated mode for token-by-token messages                                                             |
 | Checkpointer        | Community contributed                                     | Supported out-of-the-box                                                                               |
 | Persistence Layer   | Self-managed                                              | Managed Postgres with efficient storage                                                                |
-| Deployment          | Self-managed                                              | • Cloud SaaS <br> • Free self-hosted <br> • Enterprise (paid self-hosted)                              |
+| Deployment          | Self-managed                                              | <ul><li>Cloud SaaS</li><li>Free self-hosted</li><li>Enterprise (paid self-hosted)</li></ul>                              |
 | Scalability         | Self-managed                                              | Auto-scaling of task queues and servers                                                                |
 | Fault-tolerance     | Self-managed                                              | Automated retries                                                                                      |
 | Concurrency Control | Simple threading                                          | Supports double-texting                                                                                |
diff --git a/src/oss/graph-api.mdx b/src/oss/graph-api.mdx
@@ -1,6 +1,9 @@
 ---
 title: How to use the graph API
 ---
+
+import ChatModelTabs from '/snippets/chat-model-tabs.mdx';
+
 This guide demonstrates the basics of LangGraph's Graph API. It walks through [state](#define-and-update-state), as well as composing common graph structures such as [sequences](#create-a-sequence-of-steps), [branches](#create-branches), and [loops](#create-and-control-loops). It also covers LangGraph's control features, including the [Send API](#map-reduce-and-the-send-api) for map-reduce workflows and the [Command API](#combine-control-flow-and-state-updates-with-command) for combining state updates with "hops" across nodes.
 
 ## Setup
@@ -1558,7 +1561,7 @@ Because many LangChain objects implement the [Runnable Protocol](https://python.
 
 See example below. To demonstrate async invocations of underlying LLMs, we will include a chat model:
 
-{% include-markdown "../../snippets/chat_model_tabs.md" %}
+<ChatModelTabs />
 
 ```python
 from langchain.chat_models import init_chat_model
diff --git a/src/oss/human-in-the-loop.mdx b/src/oss/human-in-the-loop.mdx
diff --git a/src/oss/models.mdx b/src/oss/models.mdx
diff --git a/src/oss/overview.mdx b/src/oss/overview.mdx
diff --git a/src/snippets/chat-model-tabs.mdx b/src/snippets/chat-model-tabs.mdx
