docs[patch]: Update intro, docs nits (#5936)

* Update intro, docs nits

* Bump community core dep

* Update test

* Adds tracing howto and concepts

README.md

@@ -39,19 +39,20 @@ LangChain is written in TypeScript and can be used in:
 - **Reason**: rely on a language model to reason (about how to answer based on provided context, what actions to take, etc.)
 
 This framework consists of several parts.
-- **LangChain Libraries**: The Python and JavaScript libraries. Contains interfaces and integrations for a myriad of components, a basic runtime for combining these components into chains and agents, and off-the-shelf implementations of chains and agents.
-- **[LangChain Templates](https://github.com/langchain-ai/langchain/tree/master/templates)**: (currently Python-only) A collection of easily deployable reference architectures for a wide variety of tasks.
-- **[LangServe](https://github.com/langchain-ai/langserve)**: (currently Python-only) A library for deploying LangChain chains as a REST API.
-- **[LangSmith](https://smith.langchain.com)**: A developer platform that lets you debug, test, evaluate, and monitor chains built on any LLM framework and seamlessly integrates with LangChain.
+- **Open-source libraries**: Build your applications using LangChain's open-source [building blocks](https://js.langchain.com/v0.2/docs/concepts#langchain-expression-language), [components](https://js.langchain.com/v0.2/docs/concepts), and [third-party integrations](https://js.langchain.com/v0.2/docs/integrations/platforms/).
+Use [LangGraph.js](https://js.langchain.com/v0.2/docs/concepts/#langgraphjs) to build stateful agents with first-class streaming and human-in-the-loop support.
+- **Productionization**: Use [LangSmith](https://docs.smith.langchain.com/) to inspect, monitor and evaluate your chains, so that you can continuously optimize and deploy with confidence.
+- **Deployment**: Turn your LangGraph applications into production-ready APIs and Assistants with [LangGraph Cloud](https://langchain-ai.github.io/langgraph/cloud/) (currently Python-only).
 
 The LangChain libraries themselves are made up of several different packages.
 - **[`@langchain/core`](https://github.com/langchain-ai/langchainjs/blob/main/langchain-core)**: Base abstractions and LangChain Expression Language.
 - **[`@langchain/community`](https://github.com/langchain-ai/langchainjs/blob/main/libs/langchain-community)**: Third party integrations.
 - **[`langchain`](https://github.com/langchain-ai/langchainjs/blob/main/langchain)**: Chains, agents, and retrieval strategies that make up an application's cognitive architecture.
+- **[LangGraph.js](https://langchain-ai.github.io/langgraphjs/)**: A library for building robust and stateful multi-actor applications with LLMs by modeling steps as edges and nodes in a graph. Integrates smoothly with LangChain, but can be used without it.
 
 Integrations may also be split into their own compatible packages.
 
-![LangChain Stack](https://github.com/langchain-ai/langchainjs/blob/main/docs/core_docs/static/img/langchain_stack_feb_2024.webp)
+![LangChain Stack](https://github.com/langchain-ai/langchainjs/blob/main/docs/core_docs/static/svg/langchain_stack_062024.svg)
 
 This library aims to assist in the development of those types of applications. Common examples of these applications include:
 
@@ -86,7 +87,7 @@ Data Augmented Generation involves specific types of chains that first interact
 
 **🤖 Agents:**
 
-Agents involve an LLM making decisions about which Actions to take, taking that Action, seeing an Observation, and repeating that until done. LangChain provides a standard interface for agents, a selection of agents to choose from, and examples of end-to-end agents.
+Agents allow an LLM autonomy over how a task is accomplished. Agents make decisions about which Actions to take, then take that Action, observe the result, and repeat until the task is complete. LangChain provides a [standard interface for agents](https://js.langchain.com/v0.2/docs/concepts/#agents), along with [LangGraph.js](https://github.com/langchain-ai/langgraphjs/) for building custom agents.
 
 ## 📖 Documentation
 

docs/core_docs/docs/concepts.mdx

@@ -12,8 +12,8 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 <ThemedImage
   alt="Diagram outlining the hierarchical organization of the LangChain framework, displaying the interconnected parts across multiple layers."
   sources={{
-    light: useBaseUrl("/svg/langchain_stack.svg"),
-    dark: useBaseUrl("/svg/langchain_stack_dark.svg"),
+    light: useBaseUrl("/svg/langchain_stack_062024.svg"),
+    dark: useBaseUrl("/svg/langchain_stack_062024_dark.svg"),
   }}
   title="LangChain Framework Overview"
 />
@@ -1138,6 +1138,17 @@ This process is vital for building reliable applications.
 
 To learn more, check out [this LangSmith guide](https://docs.smith.langchain.com/concepts/evaluation).
 
+### Tracing
+
+<span data-heading-keywords="trace,tracing"></span>
+
+A trace is essentially a series of steps that your application takes to go from input to output.
+Traces contain individual steps called `runs`. These can be individual calls from a model, retriever,
+tool, or sub-chains.
+Tracing gives you observability inside your chains and agents, and is vital in diagnosing issues.
+
+For a deeper dive, check out [this LangSmith conceptual guide](https://docs.smith.langchain.com/concepts/tracing).
+
 ### Generative UI
 
 LangChain.js provides a few templates and examples showing off generative UI,

docs/core_docs/docs/how_to/agent_executor.ipynb

@@ -22,7 +22,7 @@
     "In this tutorial we will build an agent that can interact with multiple different tools: one being a local database, the other being a search engine. You will be able to ask this agent questions, watch it call tools, and have conversations with it.\n",
     "\n",
     ":::{.callout-important}\n",
-    "This section will cover building with LangChain Agents. LangChain Agents are fine for getting started, but past a certain point you will likely want flexibility and control that they do not offer. For working with more advanced agents, we'd recommend checking out [LangGraph](/docs/concepts/#langgraph).\n",
+    "This section will cover building with LangChain Agents. LangChain Agents are fine for getting started, but past a certain point you will likely want flexibility and control that they do not offer. For working with more advanced agents, we'd recommend checking out [LangGraph](/docs/concepts/#langgraphjs).\n",
     ":::\n",
     "\n",
     "## Concepts\n",
@@ -978,7 +978,7 @@
     "That's a wrap! In this quick start we covered how to create a simple agent. Agents are a complex topic, and there's lot to learn! \n",
     "\n",
     ":::{.callout-important}\n",
-    "This section covered building with LangChain Agents. LangChain Agents are fine for getting started, but past a certain point you will likely want flexibility and control that they do not offer. For working with more advanced agents, we'd recommend checking out [LangGraph](/docs/concepts/#langgraph).\n",
+    "This section covered building with LangChain Agents. LangChain Agents are fine for getting started, but past a certain point you will likely want flexibility and control that they do not offer. For working with more advanced agents, we'd recommend checking out [LangGraph](/docs/concepts/#langgraphjs).\n",
     "\n",
     "You can also see [this guide to help migrate to LangGraph](/docs/how_to/migrate_agent).\n",
     ":::"

docs/core_docs/docs/how_to/index.mdx

@@ -285,7 +285,8 @@ LangSmith allows you to closely trace, monitor and evaluate your LLM application
 It seamlessly integrates with LangChain and LangGraph.js, and you can use it to inspect and debug individual steps of your chains as you build.
 
 LangSmith documentation is hosted on a separate site.
-You can peruse [LangSmith how-to guides here](https://docs.smith.langchain.com/how_to_guides/).
+You can peruse [LangSmith how-to guides here](https://docs.smith.langchain.com/how_to_guides/), but we'll highlight a few sections that are particularly
+relevant to LangChain below:
 
 ### Evaluation
 
@@ -295,3 +296,14 @@ Evaluating performance is a vital part of building LLM-powered applications.
 LangSmith helps with every step of the process from creating a dataset to defining metrics to running evaluators.
 
 To learn more, check out the [LangSmith evaluation how-to guides](https://docs.smith.langchain.com/how_to_guides#evaluation).
+
+### Tracing
+
+<span data-heading-keywords="trace,tracing"></span>
+
+Tracing gives you observability inside your chains and agents, and is vital in diagnosing issues.
+
+- [How to: trace with LangChain](https://docs.smith.langchain.com/how_to_guides/tracing/trace_with_langchain)
+- [How to: add metadata and tags to traces](https://docs.smith.langchain.com/how_to_guides/tracing/trace_with_langchain#add-metadata-and-tags-to-traces)
+
+You can see general tracing-related how-tos [in this section of the LangSmith docs](https://docs.smith.langchain.com/how_to_guides/tracing).

docs/core_docs/docs/how_to/installation.mdx

@@ -73,6 +73,8 @@ npm install @langchain/core
 ### LangGraph
 
 [LangGraph.js](https://langchain-ai.github.io/langgraphjs/) is a library for building stateful, multi-actor applications with LLMs.
+It integrates smoothly with LangChain, but can be used without it.
+
 Install with:
 
 ```bash npm2yarn

docs/core_docs/docs/how_to/migrate_agent.ipynb

@@ -21,7 +21,16 @@
    "source": [
     "# How to migrate from legacy LangChain agents to LangGraph\n",
     "\n",
-    "Here we focus on how to move from legacy LangChain agents to LangGraph agents.\n",
+    ":::info Prerequisites\n",
+    "\n",
+    "This guide assumes familiarity with the following concepts:\n",
+    "- [Agents](/docs/concepts/#agents)\n",
+    "- [LangGraph.js](https://langchain-ai.github.io/langgraphjs/)\n",
+    "- [Tool calling](/docs/how_to/tool_calling/)\n",
+    "\n",
+    ":::\n",
+    "\n",
+    "Here we focus on how to move from legacy LangChain agents to more flexible [LangGraph](https://langchain-ai.github.io/langgraphjs/) agents.\n",
     "LangChain agents (the\n",
     "[`AgentExecutor`](https://api.js.langchain.com/classes/langchain_agents.AgentExecutor.html)\n",
     "in particular) have multiple configuration parameters. In this notebook we will\n",
@@ -605,9 +614,16 @@
    "id": "c54b374d",
    "metadata": {},
    "source": [
-    "Now, let's pass a custom system message to\n",
-    "[react agent executor](https://langchain-ai.github.io/langgraphjs/reference/functions/prebuilt.createReactAgent.html).\n",
-    "This can either be a string or a LangChain `SystemMessage`.\n"
+    "Now, let's pass a custom system message to [react agent executor](https://langchain-ai.github.io/langgraphjs/reference/functions/prebuilt.createReactAgent.html).\n",
+    "\n",
+    "LangGraph's prebuilt `create_react_agent` does not take a prompt template directly as a parameter, but instead takes a `messages_modifier` parameter. This modifies messages before they are passed into the model, and can be one of four values:\n",
+    "\n",
+    "- A `SystemMessage`, which is added to the beginning of the list of messages.\n",
+    "- A `string`, which is converted to a `SystemMessage` and added to the beginning of the list of messages.\n",
+    "- A `Callable`, which should take in a list of messages. The output is then passed to the language model.\n",
+    "- Or a [`Runnable`](/docs/concepts/#langchain-expression-language), which should should take in a list of messages. The output is then passed to the language model.\n",
+    "\n",
+    "Here's how it looks in action:\n"
    ]
   },
   {
@@ -1615,6 +1631,18 @@
     "}"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "e56203e7",
+   "metadata": {},
+   "source": [
+    "## Next steps\n",
+    "\n",
+    "You've now learned how to migrate your LangChain agent executors to LangGraph.\n",
+    "\n",
+    "Next, check out other [LangGraph how-to guides](https://langchain-ai.github.io/langgraph/how-tos/)."
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,