mirror of
https://github.com/langchain-ai/langgraph.git
synced 2026-09-07 18:27:52 +02:00
[docs] LangGraph / LangGraph Platform docs updates (#4479)
Main changes made: - Add top level horizontal tabs - Reorganize the sidenav - Build out README/index page - Consolidate how-tos under each section - Remove duplicate content --------- Signed-off-by: William Fu-Hinthorn <13333726+hinthornw@users.noreply.github.com> Co-authored-by: Tat Dat Duong <david@duong.cz> Co-authored-by: Sydney Runkle <sydneymarierunkle@gmail.com> Co-authored-by: William Fu-Hinthorn <13333726+hinthornw@users.noreply.github.com> Co-authored-by: Vadym Barda <vadym@langchain.dev> Co-authored-by: Eugene Yurtsev <eyurtsev@gmail.com> Co-authored-by: ccurme <chester.curme@gmail.com> Co-authored-by: Andrew Nguonly <andrewnguonly@users.noreply.github.com> Co-authored-by: David Asamu <david.asamu@langchain.dev> Co-authored-by: infra <mukil@langchain.dev> Co-authored-by: Arjun Natarajan <arjun@langchain.dev>
This commit is contained in:
Lauren Hirata Singh
co-authored by
Tat Dat Duong
Sydney Runkle
William Fu-Hinthorn
Vadym Barda
Eugene Yurtsev
ccurme
Andrew Nguonly
David Asamu
infra
Arjun Natarajan
Tat Dat Duong
Sydney Runkle
William Fu-Hinthorn
Vadym Barda
Eugene Yurtsev
ccurme
Andrew Nguonly
David Asamu
infra
Arjun Natarajan
parent
909a4591a8
commit
3055c4b9cc
+119
-198
@@ -1,234 +1,164 @@
|
||||
# Quickstart: Deploy on LangGraph Cloud
|
||||
# Deployment quickstart
|
||||
|
||||
!!! note "Prerequisites"
|
||||
This guide shows you how to set up and use LangGraph Platform for a cloud deployment.
|
||||
|
||||
Before you begin, ensure you have the following:
|
||||
## Prerequisites
|
||||
|
||||
- [GitHub account](https://github.com/)
|
||||
- [LangSmith account](https://smith.langchain.com/)
|
||||
Before you begin, ensure you have the following:
|
||||
|
||||
## Create a repository on GitHub
|
||||
- A [GitHub account](https://github.com/)
|
||||
- A [LangSmith account](https://smith.langchain.com/) – free to sign up
|
||||
|
||||
To deploy a LangGraph application to **LangGraph Cloud**, your application code must reside in a GitHub repository. Both public and private repositories are supported.
|
||||
This quickstart uses the [pre-built Python ReAct agent template](https://github.com/langchain-ai/react-agent), which requires the following:
|
||||
|
||||
You can deploy any [LangGraph Application](../concepts/application_structure.md) to LangGraph Cloud.
|
||||
- An API key for [Anthropic](https://console.anthropic.com/)
|
||||
- An API key for [Tavily](https://app.tavily.com/)
|
||||
|
||||
For this guide, we'll use the pre-built Python [**ReAct Agent**](https://github.com/langchain-ai/react-agent) template.
|
||||
|
||||
??? note "Get Required API Keys for the ReAct Agent template"
|
||||
|
||||
This **ReAct Agent** application requires an API key from [Anthropic](https://console.anthropic.com/) and [Tavily](https://app.tavily.com/). You can get these API keys by signing up on their respective websites.
|
||||
|
||||
**Alternative**: If you'd prefer a scaffold application that doesn't require API keys, use the [**New LangGraph Project**](https://github.com/langchain-ai/new-langgraph-project) template instead of the **ReAct Agent** template.
|
||||
## 1. Create a repository on GitHub
|
||||
|
||||
To deploy a LangGraph application to **LangGraph Cloud**, your application code must reside in a GitHub repository. Both public and private repositories are supported. For this quickstart, use the [pre-built Python ReAct agent template](https://github.com/langchain-ai/react-agent) for your application:
|
||||
|
||||
1. Go to the [ReAct Agent](https://github.com/langchain-ai/react-agent) repository.
|
||||
2. Fork the repository to your GitHub account by clicking the `Fork` button in the top right corner.
|
||||
1. Click the `Fork` button in the top right corner to fork the repository to your GitHub account.
|
||||
1. Click **Create fork**.
|
||||
|
||||
## Deploy to LangGraph Cloud
|
||||
## 2. Deploy to LangGraph Platform
|
||||
|
||||
??? note "1. Log in to [LangSmith](https://smith.langchain.com/)"
|
||||
1. Log in to [LangSmith](https://smith.langchain.com/).
|
||||
1. In the left sidebar, select **LangGraph Platform**.
|
||||
1. Click the **+ New Deployment** button. A modal will open where you can fill in the required fields.
|
||||
1. If you are a first time user or adding a private repository that has not been previously connected, click the **Import from GitHub** button and follow the instructions to connect your GitHub account.
|
||||
1. Select your ReAct Agent repository.
|
||||
1. In the **Environment Variables** section, set the following secrets:
|
||||
|
||||
- **ANTHROPIC_API_KEY**: Get an API key from [Anthropic](https://console.anthropic.com/).
|
||||
- **TAVILY_API_KEY**: Get an API key on the [Tavily website](https://app.tavily.com/).
|
||||
|
||||
1. Click **Submit** to deploy.
|
||||
|
||||
This may take about 15 minutes to complete. You can check the status in the **Deployment details** view.
|
||||
|
||||
## 3. Test your application in LangGraph Studio
|
||||
|
||||
Once your application is deployed:
|
||||
|
||||
1. Select the deployment you just created to view more details.
|
||||
1. Click the **LangGraph Studio** button in the top right corner.
|
||||
|
||||
LangGraph Studio will open to display your graph.
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:300px"}](deployment/img/01_login.png)
|
||||
[{: style="max-height:400px"}](deployment/img/09_langgraph_studio.png)
|
||||
<figcaption>
|
||||
Go to [LangSmith](https://smith.langchain.com/) and log in. If you don't have an account, you can sign up for free.
|
||||
Sample graph run in LangGraph Studio.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
## 4. Get the API URL for your deployment
|
||||
|
||||
??? note "2. Click on <em>LangGraph Platform</em> (the left sidebar)"
|
||||
1. In the **Deployment details** view in LangGraph, click the **API URL** to copy it to your clipboard.
|
||||
1. Click the `URL` to copy it to the clipboard.
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:300px"}](deployment/img/02_langgraph_platform.png)
|
||||
<figcaption>
|
||||
Select **LangGraph Platform** from the left sidebar.
|
||||
</figcaption>
|
||||
</figure>
|
||||
## 5. Test the API
|
||||
|
||||
??? note "3. Click on + New Deployment (top right corner)"
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:300px"}](deployment/img/03_deployments_page.png)
|
||||
<figcaption>
|
||||
Click on **+ New Deployment** to create a new deployment. This button is located in the top right corner.
|
||||
It'll open a new modal where you can fill out the required fields.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
??? note "4. Click on Import from GitHub (first time users)"
|
||||
|
||||
<figure markdown="1">
|
||||
[](deployment/img/04_create_new_deployment.png)
|
||||
<figcaption>
|
||||
Click on **Import from GitHub** and follow the instructions to connect your GitHub account. This step is needed for **first-time users** or to add private repositories that haven't been connected before.</figcaption>
|
||||
</figure>
|
||||
|
||||
??? note "5. Select the repository, configure ENV vars etc"
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:300px"}](deployment/img/05_configure_deployment.png)
|
||||
<figcaption>
|
||||
Select the <strong>repository</strong>, add env variables and secrets, and set other configuration options.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
- **Repository**: Select the repository you forked earlier (or any other repository you want to deploy).
|
||||
- Set the secrets and environment variables required by your application. For the **ReAct Agent** template, you need to set the following secrets:
|
||||
- **ANTHROPIC_API_KEY**: Get an API key from [Anthropic](https://console.anthropic.com/).
|
||||
- **TAVILY_API_KEY**: Get an API key on the [Tavily website](https://app.tavily.com/).
|
||||
|
||||
??? note "6. Click Submit to Deploy!"
|
||||
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:300px"}](deployment/img/05_configure_deployment.png)
|
||||
<figcaption>
|
||||
Please note that this step may ~15 minutes to complete. You can check the status of your deployment in the **Deployments** view.
|
||||
Click the <strong>Submit</strong> button at the top right corner to deploy your application.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
## LangGraph Studio Web UI
|
||||
|
||||
Once your application is deployed, you can test it in **LangGraph Studio**.
|
||||
|
||||
??? note "1. Click on an existing deployment"
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:300px"}](deployment/img/07_deployments_page.png)
|
||||
<figcaption>
|
||||
Click on the deployment you just created to view more details.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
??? note "2. Click on LangGraph Studio"
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:300px"}](deployment/img/08_deployment_view.png)
|
||||
<figcaption>
|
||||
Click on the <strong>LangGraph Studio</strong> button to open LangGraph Studio.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure markdown="1">
|
||||
[{: style="max-height:400px"}](deployment/img/09_langgraph_studio.png)
|
||||
<figcaption>
|
||||
Sample graph run in LangGraph Studio.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
## Test the API
|
||||
|
||||
!!! note
|
||||
|
||||
The API calls below are for the **ReAct Agent** template. If you're deploying a different application, you may need to adjust the API calls accordingly.
|
||||
|
||||
Before using, you need to get the `URL` of your LangGraph deployment. You can find this in the `Deployment` view. Click the `URL` to copy it to the clipboard.
|
||||
|
||||
You also need to make sure you have set up your API key properly, so you can authenticate with LangGraph Cloud.
|
||||
|
||||
```shell
|
||||
export LANGSMITH_API_KEY=...
|
||||
```
|
||||
You can now test the API:
|
||||
|
||||
=== "Python SDK (Async)"
|
||||
|
||||
**Install the LangGraph Python SDK**
|
||||
1. Install the LangGraph Python SDK:
|
||||
|
||||
```shell
|
||||
pip install langgraph-sdk
|
||||
```
|
||||
```shell
|
||||
pip install langgraph-sdk
|
||||
```
|
||||
|
||||
**Send a message to the assistant (threadless run)**
|
||||
1. Send a message to the assistant (threadless run):
|
||||
|
||||
```python
|
||||
from langgraph_sdk import get_client
|
||||
```python
|
||||
from langgraph_sdk import get_client
|
||||
|
||||
client = get_client(url="your-deployment-url", api_key="your-langsmith-api-key")
|
||||
client = get_client(url="your-deployment-url", api_key="your-langsmith-api-key")
|
||||
|
||||
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")
|
||||
```
|
||||
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**
|
||||
1. Install the LangGraph Python SDK:
|
||||
|
||||
```shell
|
||||
pip install langgraph-sdk
|
||||
```
|
||||
```shell
|
||||
pip install langgraph-sdk
|
||||
```
|
||||
|
||||
**Send a message to the assistant (threadless run)**
|
||||
1. Send a message to the assistant (threadless run):
|
||||
|
||||
```python
|
||||
from langgraph_sdk import get_sync_client
|
||||
```python
|
||||
from langgraph_sdk import get_sync_client
|
||||
|
||||
client = get_sync_client(url="your-deployment-url", api_key="your-langsmith-api-key")
|
||||
client = get_sync_client(url="your-deployment-url", api_key="your-langsmith-api-key")
|
||||
|
||||
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")
|
||||
```
|
||||
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**
|
||||
1. Install the LangGraph JS SDK
|
||||
|
||||
```shell
|
||||
npm install @langchain/langgraph-sdk
|
||||
```
|
||||
```shell
|
||||
npm install @langchain/langgraph-sdk
|
||||
```
|
||||
|
||||
**Send a message to the assistant (threadless run)**
|
||||
1. Send a message to the assistant (threadless run):
|
||||
|
||||
```js
|
||||
const { Client } = await import("@langchain/langgraph-sdk");
|
||||
```js
|
||||
const { Client } = await import("@langchain/langgraph-sdk");
|
||||
|
||||
const client = new Client({ apiUrl: "your-deployment-url", apiKey: "your-langsmith-api-key" });
|
||||
const client = new Client({ apiUrl: "your-deployment-url", apiKey: "your-langsmith-api-key" });
|
||||
|
||||
const streamResponse = client.runs.stream(
|
||||
null, // Threadless run
|
||||
"agent", // Assistant ID
|
||||
{
|
||||
input: {
|
||||
"messages": [
|
||||
{ "role": "user", "content": "What is LangGraph?"}
|
||||
]
|
||||
},
|
||||
streamMode: "messages",
|
||||
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");
|
||||
}
|
||||
);
|
||||
|
||||
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"
|
||||
|
||||
@@ -253,20 +183,11 @@ export LANGSMITH_API_KEY=...
|
||||
|
||||
## Next Steps
|
||||
|
||||
Congratulations! If you've worked your way through this tutorial you are well on your way to becoming a LangGraph Cloud expert. Here are some other resources to check out to help you out on the path to expertise:
|
||||
Congratulations! You have deployed an application using LangGraph Platform.
|
||||
|
||||
### LangGraph Framework
|
||||
Here are some other resources to check out:
|
||||
|
||||
- **[LangGraph Tutorial](../tutorials/introduction.ipynb)**: Get started with LangGraph framework.
|
||||
- **[LangGraph Concepts](../concepts/index.md)**: Learn the foundational concepts of LangGraph.
|
||||
- **[LangGraph How-to Guides](../how-tos/index.md)**: Guides for common tasks with LangGraph.
|
||||
|
||||
### 📚 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.
|
||||
- **[Launch Local LangGraph Server](../tutorials/langgraph-platform/local-server.md)**: This quick start guide shows how to start a LangGraph Server locally for the **ReAct Agent** template. The steps are similar for other templates.
|
||||
- [LangGraph Platform overview](../concepts/langgraph_platform.md)
|
||||
- [Deployment options](../concepts/deployment_options.md)
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user