From 55593446f80ac2a02d18dcee3c60a3a67131bb48 Mon Sep 17 00:00:00 2001 From: Eugene Yurtsev Date: Thu, 21 Nov 2024 17:41:03 -0500 Subject: [PATCH] docs: get started with langgraph platform (#2469) --- docs/docs/cloud/quick_start.md | 6 +- docs/docs/concepts/index.md | 2 +- docs/docs/tutorials/index.md | 22 +- docs/docs/tutorials/introduction.ipynb | 77 +++--- .../langgraph-platform/local-server.md | 244 ++++++++++++++++++ .../rag/langgraph_adaptive_rag.ipynb | 2 +- docs/mkdocs.yml | 3 +- 7 files changed, 307 insertions(+), 49 deletions(-) create mode 100644 docs/docs/tutorials/langgraph-platform/local-server.md diff --git a/docs/docs/cloud/quick_start.md b/docs/docs/cloud/quick_start.md index 158bb1fc8..9f142c0bf 100644 --- a/docs/docs/cloud/quick_start.md +++ b/docs/docs/cloud/quick_start.md @@ -8,9 +8,9 @@ If you want to learn how to build an agent like this from scratch, take a look a This tutorial will use: -- Anthropic for the LLM - sign up and get an API key [here](https://console.anthropic.com/) -- Tavily for the search engine - sign up and get an API key [here](https://app.tavily.com/) -- LangSmith for hosting - sign up and get an API key [here](https://smith.langchain.com/) +- Anthropic for the LLM - sign up and get an API key [here](https://console.anthropic.com/). +- Tavily for the search engine - sign up and get an API key [here](https://app.tavily.com/). +- LangSmith for hosting - sign up and get an API key [here](https://smith.langchain.com/). ## Create and configure your app diff --git a/docs/docs/concepts/index.md b/docs/docs/concepts/index.md index 10b4f0009..6c057c672 100644 --- a/docs/docs/concepts/index.md +++ b/docs/docs/concepts/index.md @@ -30,7 +30,7 @@ The conceptual guide does not cover step-by-step instructions or specific implem - [Streaming](streaming.md): Streaming is crucial for enhancing the responsiveness of applications built on LLMs. By displaying output progressively, even before a complete response is ready, streaming significantly improves user experience (UX), particularly when dealing with the latency of LLMs. - [FAQ](faq.md): Frequently asked questions about LangGraph. -## LangGraph Platform +## LangGraph Platform LangGraph Platform is a commercial solution for deploying agentic applications in production, built on the open-source LangGraph framework. diff --git a/docs/docs/tutorials/index.md b/docs/docs/tutorials/index.md index 887740e6a..d9593c9b8 100644 --- a/docs/docs/tutorials/index.md +++ b/docs/docs/tutorials/index.md @@ -6,25 +6,23 @@ title: Tutorials # Tutorials -Welcome to the LangGraph Tutorials! These notebooks introduce LangGraph through building various language agents and applications. +New to LangGraph or LLM app development? Read this material to get up and running building your first applications. -## Quick Start +## Get Started πŸš€ {#quick-start} -Learn the basics of LangGraph through a comprehensive quick start in which you will build an agent from scratch. +- [LangGraph Quickstart](introduction.ipynb): Build a chatbot that can use tools and keep track of conversation history. Add human-in-the-loop capabilities and explore how time-travel works. +- [LangGraph Server Quickstart](langgraph-platform/local-server.md): Launch a LangGraph server locally and interact with it using the REST API and LangGraph Studio Web UI. +- [LangGraph Cloud QuickStart](../cloud/quick_start.md): Deploy a LangGraph app using LangGraph Cloud. -- [Quick Start](introduction.ipynb): In this tutorial, you will build a support chatbot using LangGraph. -- [LangGraph Cloud Quick Start](../cloud/quick_start.md): In this tutorial, you will build and deploy an agent to LangGraph Cloud. +## Use cases πŸ› οΈ -## Use cases - -Learn from example implementations of graphs designed for specific scenarios and that implement common design patterns. +Explore practical implementations tailored for specific scenarios: ### Chatbots -- [Customer Support](customer-support/customer-support.ipynb): Build a customer support chatbot to manage flights, hotel reservations, car rentals, and other tasks -- [Prompt Generation from User Requirements](chatbots/information-gather-prompting.ipynb): Build an information gathering chatbot -- [Code Assistant](code_assistant/langgraph_code_assistant.ipynb): Build a code analysis and generation assistant - +- [Customer Support](customer-support/customer-support.ipynb): Build a multi-functional support bot for flights, hotels, and car rentals. +- [Prompt Generation from User Requirements](chatbots/information-gather-prompting.ipynb): Build an information gathering chatbot. +- [Code Assistant](code_assistant/langgraph_code_assistant.ipynb): Build a code analysis and generation assistant. ### RAG diff --git a/docs/docs/tutorials/introduction.ipynb b/docs/docs/tutorials/introduction.ipynb index f37fcf138..712fbc28f 100644 --- a/docs/docs/tutorials/introduction.ipynb +++ b/docs/docs/tutorials/introduction.ipynb @@ -5,17 +5,17 @@ "id": "4a1aae78-88a6-4133-b905-7e46c8e3772f", "metadata": {}, "source": [ - "# LangGraph Quick Start\n", + "# πŸš€ LangGraph Quick Start\n", "\n", - "In this comprehensive quick start, we will build a support chatbot in LangGraph that can:\n", + "In this tutorial, we will build a support chatbot in LangGraph that can:\n", "\n", - "- Answer common questions by searching the web\n", - "- Maintain conversation state across calls\n", - "- Route complex queries to a human for review\n", - "- Use custom state to control its behavior\n", - "- Rewind and explore alternative conversation paths\n", + "βœ… **Answer common questions** by searching the web \n", + "βœ… **Maintain conversation state** across calls \n", + "βœ… **Route complex queries** to a human for review \n", + "βœ… **Use custom state** to control its behavior \n", + "βœ… **Rewind and explore** alternative conversation paths \n", "\n", - "We'll start with a basic chatbot and progressively add more sophisticated capabilities, introducing key LangGraph concepts along the way.\n", + "We'll start with a **basic chatbot** and progressively add more sophisticated capabilities, introducing key LangGraph concepts along the way. Let’s dive in! 🌟\n", "\n", "## Setup\n", "\n", @@ -38,7 +38,7 @@ "id": "a6d1e870-1bc0-4d44-86c0-96681ccf6113", "metadata": {}, "source": [ - "Next, set your API keys:" + "In this tutorial, we'll be " ] }, { @@ -120,27 +120,24 @@ ] }, { + "attachments": {}, "cell_type": "markdown", - "id": "31c755cd-8994-4867-bdff-96a55d7beae7", + "id": "c08c41da-0855-49d3-9a3d-b7eb94413367", "metadata": {}, "source": [ - "
\n", - "

Note

\n", - "

\n", - " The first thing you do when you define a graph is define the State of the graph. The State consists of the schema of the graph as well as reducer functions which specify how to apply updates to the state. In our example State is a TypedDict with a single key: messages. The messages key is annotated with the add_messages reducer function, which tells LangGraph to append new messages to the existing list, rather than overwriting it. State keys without an annotation will be overwritten by each update, storing the most recent value. Check out this conceptual guide to learn more about state, reducers and other low-level concepts.\n", - "

\n", - "
" - ] - }, - { - "cell_type": "markdown", - "id": "4137feed-746e-4c72-a34a-f7a699ad5dcf", - "metadata": {}, - "source": [ - "So now our graph knows two things:\n", + "Our graph can now handle two key tasks:\n", + "\n", + "1. Each `node` can receive the current `State` as input and output an update to the state.\n", + "2. Updates to `messages` will be appended to the existing list rather than overwriting it, thanks to the prebuilt [`add_messages`](https://langchain-ai.github.io/langgraph/reference/graphs/?h=add+messages#add_messages) function used with the `Annotated` syntax.\n", + "\n", + "------\n", + "\n", + "!!! tip \"Concept\"\n", + "\n", + " When defining a graph, the first step is to define its `State`. The `State` includes the graph's schema and [reducer functions](https://langchain-ai.github.io/langgraph/concepts/low_level/#reducers) that handle state updates. In our example, `State` is a `TypedDict` with one key: `messages`. The [`add_messages`](https://langchain-ai.github.io/langgraph/reference/graphs/#langgraph.graph.message.add_messages) reducer function is used to append new messages to the list instead of overwriting it. Keys without a reducer annotation will overwrite previous values. Learn more about state, reducers, and related concepts in [this guide](https://langchain-ai.github.io/langgraph/reference/graphs/#langgraph.graph.message.add_messages).\n", + "\n", + "---------\n", "\n", - "1. Every `node` we define will receive the current `State` as input and return a value that updates that state.\n", - "2. `messages` will be _appended_ to the current list, rather than directly overwritten. This is communicated via the prebuilt [`add_messages`](https://langchain-ai.github.io/langgraph/reference/graphs/?h=add+messages#add_messages) function in the `Annotated` syntax.\n", "\n", "Next, add a \"`chatbot`\" node. Nodes represent units of work. They are typically regular python functions." ] @@ -365,7 +362,7 @@ "id": "f22c5d4a-3134-413c-81fe-dd9752fbeb66", "metadata": {}, "source": [ - "## Part 2: Enhancing the Chatbot with Tools\n", + "## Part 2: πŸ› οΈ Enhancing the Chatbot with Tools\n", "\n", "To handle queries our chatbot can't answer \"from memory\", we'll integrate a web search tool. Our bot can use this tool to find relevant information and provide better responses.\n", "\n", @@ -3136,11 +3133,29 @@ "id": "e584d57f-5aad-4507-815f-0b2e4b64b791", "metadata": {}, "source": [ - "## Conclusion\n", + "## Next Steps\n", "\n", - "Congrats! You've completed the intro tutorial and built a chat bot in LangGraph that supports tool calling, persistent memory, human-in-the-loop interactivity, and even time-travel!\n", + "Take your journey further by exploring deployment and advanced features:\n", "\n", - "The [LangGraph documentation](https://langchain-ai.github.io/langgraph/) is a great resource for diving deeper into the library's capabilities." + "### Server Quickstart\n", + "\n", + "- **[LangGraph Server Quickstart](../langgraph-platform/local-server)**: Launch a LangGraph server locally and interact with it using the REST API and LangGraph Studio Web UI.\n", + "\n", + "### LangGraph Cloud\n", + "\n", + "- **[LangGraph Cloud QuickStart](../../cloud/quick_start)**: Deploy your LangGraph app using LangGraph Cloud.\n", + "\n", + "### LangGraph Framework\n", + "\n", + "- **[LangGraph Concepts](../../concepts)**: Learn the foundational concepts of LangGraph. \n", + "- **[LangGraph How-to Guides](../../how-tos)**: Guides for common tasks with LangGraph.\n", + "\n", + "### LangGraph Platform\n", + "\n", + "Expand your knowledge with these resources:\n", + "\n", + "- **[LangGraph Platform Concepts](../../concepts#langgraph-platform)**: Understand the foundational concepts of the LangGraph Platform. \n", + "- **[LangGraph Platform How-to Guides](../../how-tos#langgraph-platform)**: Guides for common tasks with LangGraph Platform. " ] } ], @@ -3160,7 +3175,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.11.9" + "version": "3.11.4" } }, "nbformat": 4, diff --git a/docs/docs/tutorials/langgraph-platform/local-server.md b/docs/docs/tutorials/langgraph-platform/local-server.md new file mode 100644 index 000000000..a41333921 --- /dev/null +++ b/docs/docs/tutorials/langgraph-platform/local-server.md @@ -0,0 +1,244 @@ +# Quick Start: Launch Local LangGraph Server + +This is a quick start guide to help you get a LangGraph app up and running locally. + +!!! info "Requirements" + + - [LangGraph CLI](https://langchain-ai.github.io/langgraph/cloud/reference/cli/): Requires langchain-cli[inmem] >= 0.1.58 + +## Install the LangGraph CLI + +```bash +pip install "langgraph-cli[inmem]==0.1.58" python-dot-env +``` + +## 🌱 Create a LangGraph App + +Create a new app from the `react-agent` template. This template is a simple agent that can be flexibly extended to many tools. + +=== "Python Server" + + ```shell + langgraph new path/to/your/app --template react-agent-python + ``` + +=== "Node Server" + + ```shell + langgraph new path/to/your/app --template react-agent-js + ``` + +!!! tip "Additional Templates" + + If you use `langgraph new` without specifying a template, you will be presented with an interactive menu that will allow you to choose from a list of available templates. + +## Create a `.env` file + +You will find a `.env.example` in the root of your new LangGraph app. Create +a `.env` file in the root of your new LangGraph app and copy the contents of the `.env.example` file into it, filling in the necessary API keys: + +```bash +LANGSMITH_API_KEY=lsv2... +TAVILY_API_KEY=tvly-... +ANTHROPIC_API_KEY=sk- +OPENAI_API_KEY=sk-... +``` + +
Get API Keys + +
+ +## πŸš€ Launch LangGraph Server + +```shell +langgraph dev +``` + +This will start up the LangGraph API server locally. If this runs successfully, you should see something like: + +> Ready! +> +> - API: [http://localhost:8123](http://localhost:8123/) +> +> - Docs: http://localhost:8123/docs +> +> - LangGraph Studio Web UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:8123 + + +!!! note "In-Memory Mode" + + The `langgraph dev` command starts LangGraph Server in an in-memory mode. This mode is suitable for development and testing purposes. For production use, you should deploy LangGraph Server with access to a persistent storage backend. + + If you want to test your application with a persistent storage backend, you can use the `langgraph up` command instead of `langgraph dev`. You will + need to have `docker` installed on your machine to use this command. + +## LangGraph Studio Web UI + +Test your graph in the LangGraph Studio Web UI by visiting the URL provided in the output of the `langgraph up` command. + +> - LangGraph Studio Web UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:8123 + +!!! warning "Safari Compatibility" + + Currently, LangGraph Studio Web does not support Safari when running a server locally. + +## Test the API + +=== "Python SDK (Async)" + + **Install the LangGraph Python SDK** + + ```shell + pip install langgraph-sdk + ``` + + **Send a message to the assistant (threadless run)** + + ```python + from langgraph_sdk import get_client + + client = get_client(url="http://localhost:8123") + + async for chunk in client.runs.stream( + None, # Threadless run + "agent", # Name of assistant. Defined in langgraph.json. + input={ + "messages": [{ + "role": "human", + "content": "What is LangGraph?", + }], + }, + stream_mode="updates", + ): + print(f"Receiving new event of type: {chunk.event}...") + print(chunk.data) + print("\n\n") + ``` + +=== "Python SDK (Sync)" + + **Install the LangGraph Python SDK** + + ```shell + pip install langgraph-sdk + ``` + + **Send a message to the assistant (threadless run)** + + ```python + from langgraph_sdk import get_sync_client + + client = get_sync_client(url="http://localhost:8123") + + for chunk in client.runs.stream( + None, # Threadless run + "agent", # Name of assistant. Defined in langgraph.json. + input={ + "messages": [{ + "role": "human", + "content": "What is LangGraph?", + }], + }, + stream_mode="updates", + ): + print(f"Receiving new event of type: {chunk.event}...") + print(chunk.data) + print("\n\n") + ``` + +=== "Javascript SDK" + + **Install the LangGraph JS SDK** + + ```shell + npm install @langchain/langgraph-sdk + ``` + + **Send a message to the assistant (threadless run)** + + ```js + const { Client } = await import("@langchain/langgraph-sdk"); + + // only set the apiUrl if you changed the default port when calling langgraph up + const client = new Client({ apiUrl: "http://localhost:8123"}); + + const streamResponse = client.runs.stream( + null, // Threadless run + "agent", // Assistant ID + { + input: { + "messages": [ + { "role": "user", "content": "What is LangGraph?"} + ] + }, + streamMode: "messages", + } + ); + + for await (const chunk of streamResponse) { + console.log(`Receiving new event of type: ${chunk.event}...`); + console.log(JSON.stringify(chunk.data)); + console.log("\n\n"); + } + ``` + +=== "Rest API" + + ```bash + curl -s --request POST \ + --url "http://localhost:8123/runs/stream" \ + --header 'Content-Type: application/json' \ + --data "{ + \"assistant_id\": \"agent\", + \"input\": { + \"messages\": [ + { + \"role\": \"human\", + \"content\": \"What is LangGraph?\" + } + ] + }, + \"stream_mode\": \"updates\" + }" + ``` + +!!! tip "Auth" + + If you're connecting to a remote server, you will need to provide a LangSmith + API Key for authorization. Please see the API Reference for the clients + for more information. + +## Next Steps + +Now that you have a LangGraph app running locally, take your journey further by exploring deployment and advanced features: + +### 🌐 Deploy to LangGraph Cloud + +- **[LangGraph Cloud QuickStart](../../cloud/quick_start.md)**: Deploy your LangGraph app using LangGraph Cloud. + +### πŸ“š Learn More about LangGraph Platform + +Expand your knowledge with these resources: + +- **[LangGraph Platform Concepts](../../concepts/index.md#langgraph-platform)**: Understand the foundational concepts of the LangGraph Platform. +- **[LangGraph Platform How-to Guides](../../how-tos/index.md#langgraph-platform)**: Discover step-by-step guides to build and deploy applications. + +### πŸ› οΈ Developer References + +Access detailed documentation for development and API usage: + +- **[LangGraph Server API Reference](../../cloud/reference/api/api_ref.html)**: Explore the LangGraph Server API documentation. +- **[Python SDK Reference](../../cloud/reference/sdk/python_sdk_ref.md)**: Explore the Python SDK API Reference. +- **[JS/TS SDK Reference](../../cloud/reference/sdk/js_ts_sdk_ref.md)**: Explore the Python SDK API Reference. \ No newline at end of file diff --git a/docs/docs/tutorials/rag/langgraph_adaptive_rag.ipynb b/docs/docs/tutorials/rag/langgraph_adaptive_rag.ipynb index f4a887ec9..8729822dc 100644 --- a/docs/docs/tutorials/rag/langgraph_adaptive_rag.ipynb +++ b/docs/docs/tutorials/rag/langgraph_adaptive_rag.ipynb @@ -934,7 +934,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.11.9" + "version": "3.11.4" } }, "nbformat": 4, diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 648f8618e..3167d5520 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -94,6 +94,7 @@ nav: - Quick Start: - Quick Start: tutorials#quick-start - tutorials/introduction.ipynb + - tutorials/langgraph-platform/local-server.md - cloud/quick_start.md - Chatbots: - Chatbots: tutorials#chatbots @@ -438,4 +439,4 @@ validation: # and those anchors are not available in the actual doc anchors: info # this is needed to handle headers with anchors for nav - not_found: info \ No newline at end of file + not_found: info