diff --git a/docs/docs/cloud/concepts/index.md b/docs/docs/cloud/concepts/index.md index 7588d3856..81403680a 100644 --- a/docs/docs/cloud/concepts/index.md +++ b/docs/docs/cloud/concepts/index.md @@ -59,11 +59,11 @@ See the LangSmith. To test a LangGraph application, navigate to the LangSmith UI. - -## Test Cloud Deployment - -The LangGraph Studio UI connects directly to LangGraph Cloud deployments. - -Starting from the LangSmith UI... - -1. In the left-hand navigation panel, select `Deployments`. The `Deployments` view contains a list of existing LangGraph Cloud deployments. -1. Select an existing deployment to test with LangGraph Studio. -1. In the top-right corner, select `Open LangGraph Studio`. -1. [Invoke an assistant](#invoke-assistant) or [view an existing thread](#view-thread). - -## Test Local Instance - -The LangGraph Studio UI connects directly to local LangGraph API instances. This is helpful for quickly iterating and testing during the development process. - -Starting from the LangSmith UI... - -1. Find the hostname of the local LangGraph API instance. For example, `http://localhost:9123`. -1. Navigate to the URL `/studio/thread/` and set the `baseUrl` query parameter to the hostname. For example, `https://smith.langchain.com/studio/thread?baseUrl=http://localhost:9123`. -1. [Invoke an assistant](#invoke-assistant) or [view an existing thread](#view-thread). - -## Invoke Assistant - -1. The LangGraph Studio UI displays a visualization of the selected assistant. - 1. In the top-right dropdown menu of the left-hand pane, select an assistant. - 1. In the bottom of the left-hand pane, edit the `Input` and `Configure` the assistant. - 1. Select `Submit` to invoke the selected assistant. -1. View output of the invocation in the right-hand pane. - -## View Thread - -1. In the top of the right-hand pane, select the `New Thread` dropdown menu to view existing threads. -1. View the state of the thread (i.e. the output) in the right-hand pane. -1. To create a new thread, select `+ New Thread`. - -## Edit Thread State - -The LangGraph Studio UI contains features for editing thread state. Explore these features in the right-hand pane. Select the `Edit` icon, modify the desired state, and then select `Fork` to invoke the assistant with the updated state. \ No newline at end of file diff --git a/docs/docs/cloud/how-tos/img/studio_forks.gif b/docs/docs/cloud/how-tos/img/studio_forks.gif new file mode 100644 index 000000000..569cdb816 Binary files /dev/null and b/docs/docs/cloud/how-tos/img/studio_forks.gif differ diff --git a/docs/docs/cloud/how-tos/img/studio_input.gif b/docs/docs/cloud/how-tos/img/studio_input.gif new file mode 100644 index 000000000..2af708359 Binary files /dev/null and b/docs/docs/cloud/how-tos/img/studio_input.gif differ diff --git a/docs/docs/cloud/how-tos/img/studio_threads.gif b/docs/docs/cloud/how-tos/img/studio_threads.gif new file mode 100644 index 000000000..a5b4399c0 Binary files /dev/null and b/docs/docs/cloud/how-tos/img/studio_threads.gif differ diff --git a/docs/docs/cloud/how-tos/img/studio_usage.gif b/docs/docs/cloud/how-tos/img/studio_usage.gif new file mode 100644 index 000000000..984c64374 Binary files /dev/null and b/docs/docs/cloud/how-tos/img/studio_usage.gif differ diff --git a/docs/docs/cloud/how-tos/index.md b/docs/docs/cloud/how-tos/index.md new file mode 100644 index 000000000..be24adf34 --- /dev/null +++ b/docs/docs/cloud/how-tos/index.md @@ -0,0 +1,55 @@ +--- +hide: + - toc +--- + +# How-to Guides + +Welcome to the LangGraph Cloud how-to guides! These guides provide practical, step-by-step instructions for accomplishing key tasks in LangGraph Cloud. + +## Deployment + +LangGraph Cloud gives you best in class observability, testing, and hosting services. Read more about them in these how to guides: + +- [How to set up app for deployment](https://langchain-ai.github.io/langgraph/cloud/deployment/setup/) +- [How to deploy to LangGraph cloud](https://langchain-ai.github.io/langgraph/cloud/deployment/cloud/) +- [How to self-host](https://langchain-ai.github.io/langgraph/cloud/deployment/self_hosted/) + +## Streaming + +Streaming the results of your LLM application is vital for ensuring a good user experience, especially when your graph may call multiple models and take a long time to fully complete a run. Read about how to stream values from your graph in these how to guides: + +- [How to stream values](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/stream_values/) +- [How to stream updates](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/stream_updates/) +- [How to stream messages](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/stream_messages/) +- [How to stream events](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/stream_events/) +- [How to stream in debug mode](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/stream_debug/) +- [How to stream multiple modes](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/stream_multiple/) + +## Double-texting + +Graph execution can take a while, and sometimes users may change their mind about the input they wanted to send before their original input has finished running. For example, a user might notice a typo in their original request and will edit the prompt and resend it. Deciding what to do in these cases is important for ensuring a smooth user experience and preventing your graphs from behaving in unexpected ways. The following how-to guides provide information on the various options LangGraph Cloud gives you for dealing with double-texting: + +- [How to use the interrupt option](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/interrupt_concurrent/) +- [How to use the rollback option](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/rollback_concurrent/) +- [How to use the reject option](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/reject_concurrent/) +- [How to use the rnqueue option](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/enqueue_concurrent/) + +## Human-in-the-loop + +When creating complex graphs, leaving every decision up to the LLM can be dangerous, especially when the decisions involve invoking certain tools or accessing specific documents. To remedy this, LangGraph allows you to insert human-in-the-loop behavior to ensure your graph does not have undesired outcomes. Read more about the different ways you can add human-in-the-loop capabilities to your LangGraph Cloud projects in these how-to guides: + +- [How to add a breakpoint](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/human_in_the_loop_breakpoint/) +- [How to wait for user input](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/human_in_the_loop_user_input/) +- [How to edit graph state](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/human_in_the_loop_edit_state/) +- [How to replay and branch from prior states](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/human_in_the_loop_time_travel/) + +## LangGraph Studio + +- [Test Cloud Deployment](https://langchain-ai.github.io/langgraph/cloud/how-tos/test_deployment/) +- [Invoke graph in LangGraph Studio](https://langchain-ai.github.io/langgraph/cloud/how-tos/invoke_studio/) +- [Interact with threads in LangGraph Studio](https://langchain-ai.github.io/langgraph/cloud/how-tos/threads_studio/) + +## And more! + +The four sections above don't cover everything that is possible with LangGraph cloud - make sure to check out our other how-to guides to learn even more! \ No newline at end of file diff --git a/docs/docs/cloud/how-tos/invoke_studio.md b/docs/docs/cloud/how-tos/invoke_studio.md new file mode 100644 index 000000000..2a33162b7 --- /dev/null +++ b/docs/docs/cloud/how-tos/invoke_studio.md @@ -0,0 +1,13 @@ +# Invoke Assistant + +The LangGraph Studio lets you test different configurations and inputs to your graph. The UI allows you to see exactly how your + +1. The LangGraph Studio UI displays a visualization of the selected assistant. + 1. In the top-right dropdown menu of the left-hand pane, select an assistant. + 1. In the bottom of the left-hand pane, edit the `Input` and `Configure` the assistant. + 1. Select `Submit` to invoke the selected assistant. +1. View output of the invocation in the right-hand pane. + +The following GIF shows these exact steps being carried out: + +![Using LangGraph Studio](./img/studio_input.gif) \ No newline at end of file diff --git a/docs/docs/cloud/how-tos/test_deployment.md b/docs/docs/cloud/how-tos/test_deployment.md new file mode 100644 index 000000000..a3e5046fc --- /dev/null +++ b/docs/docs/cloud/how-tos/test_deployment.md @@ -0,0 +1,14 @@ +# Test Cloud Deployment + +The LangGraph Studio UI connects directly to LangGraph Cloud deployments. + +Starting from the LangSmith UI... + +1. In the left-hand navigation panel, select `Deployments`. The `Deployments` view contains a list of existing LangGraph Cloud deployments. +1. Select an existing deployment to test with LangGraph Studio. +1. In the top-right corner, select `Open LangGraph Studio`. +1. [Invoke an assistant](./invoke_studio.md) or [view an existing thread](./threads_studio.md). + +The following GIF shows these exact steps being carried out: + +![Using LangGraph Studio](./img/studio_usage.gif) \ No newline at end of file diff --git a/docs/docs/cloud/how-tos/threads_studio.md b/docs/docs/cloud/how-tos/threads_studio.md new file mode 100644 index 000000000..7cc04f201 --- /dev/null +++ b/docs/docs/cloud/how-tos/threads_studio.md @@ -0,0 +1,19 @@ +# Interacting with Threads in Studio + +## View Thread + +1. In the top of the right-hand pane, select the `New Thread` dropdown menu to view existing threads. +1. View the state of the thread (i.e. the output) in the right-hand pane. +1. To create a new thread, select `+ New Thread`. + +The following GIF shows these exact steps being carried out: + +![Using LangGraph Studio](./img/studio_threads.gif) + +## Edit Thread State + +The LangGraph Studio UI contains features for editing thread state. Explore these features in the right-hand pane. Select the `Edit` icon, modify the desired state, and then select `Fork` to invoke the assistant with the updated state. + +The following GIF shows how to edit a thread in the studio: + +![Using LangGraph Studio](./img/studio_forks.gif) \ No newline at end of file diff --git a/docs/docs/cloud/index.md b/docs/docs/cloud/index.md index 0a28639bc..8350ffa2c 100644 --- a/docs/docs/cloud/index.md +++ b/docs/docs/cloud/index.md @@ -6,6 +6,8 @@ !!! warning "Under Construction" LangGraph Cloud documentation is under construction. Contents may change until general availability. +![GIF](./how-tos/img/studio_input.gif) + ## Overview LangGraph Cloud is a managed service for deploying and hosting LangGraph applications. Deploying applications with LangGraph Cloud shortens the time-to-market for developers. With one click, deploy a production-ready API with built-in persistence for your LangGraph application. LangGraph Cloud APIs are horizontally scalable and deployed with durable storage. @@ -28,6 +30,6 @@ The LangGraph Cloud API supports key LangGraph features in addition to new funct ## Documentation - [Tutorials](./quick_start.md): Learn to build and deploy applications for LangGraph Cloud. -- [How-to Guides](./deployment/setup.md): Learn how to set up a LangGraph application for deployment and implement features of the LangGraph Cloud API such as streaming tokens, configuring double texting, and creating cron jobs. Go here if you want to copy and run a specific code snippet. +- [How-to Guides](./how-tos/index.md): Learn how to set up a LangGraph application for deployment and implement features of the LangGraph Cloud API such as streaming tokens, configuring double texting, and creating cron jobs. Go here if you want to copy and run a specific code snippet. - [Conceptual Guides](./concepts/index.md): In-depth explanations of the core data models (e.g. assistants) and key features (e.g. double texting) of the LangGraph Cloud API. - [Reference](./reference/api/api_ref.md): References for the LangGraph Cloud API, the corresponding Python and JS/TS SDKs, the LangGraph CLI, and deployment environment variables. diff --git a/docs/docs/cloud/quick_start.md b/docs/docs/cloud/quick_start.md index 2dfe58149..7807e1381 100644 --- a/docs/docs/cloud/quick_start.md +++ b/docs/docs/cloud/quick_start.md @@ -239,11 +239,11 @@ Congratulations! If you've worked your way through this tutorial you are well on ### LangGraph Cloud How-tos -If you want to learn more about streaming from hosted graphs, check out the Streaming [how-to guides](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/stream_values/). +If you want to learn more about streaming from hosted graphs, check out the Streaming [how-to guides](https://langchain-ai.github.io/langgraph/cloud/how-tos/#streaming). -To learn more about double-texting and all the ways you can handle it in your application, read up on these [how-to guides](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/interrupt_concurrent/). +To learn more about double-texting and all the ways you can handle it in your application, read up on these [how-to guides](https://langchain-ai.github.io/langgraph/cloud/how-tos/#double-texting). -To learn about how to include different human-in-the-loop behavior in your graph, take a look at [these how-tos](https://langchain-ai.github.io/langgraph/cloud/how-tos/cloud_examples/human_in_the_loop_breakpoint/). +To learn about how to include different human-in-the-loop behavior in your graph, take a look at [these how-tos](https://langchain-ai.github.io/langgraph/cloud/how-tos/#human-in-the-loop). ### LangGraph Tutorials diff --git a/docs/docs/cloud/reference/cli.md b/docs/docs/cloud/reference/cli.md index d16a5bf6d..a548575d5 100644 --- a/docs/docs/cloud/reference/cli.md +++ b/docs/docs/cloud/reference/cli.md @@ -82,61 +82,20 @@ langgraph build [OPTIONS] | `-c, --config FILE` | `langgraph.json` | Path to configuration file declaring dependencies, graphs and environment variables. | | `--help` | | Display command documentation. | -### `down` -Stop LangGraph Cloud API server. +### `test` +Test your LangGraph in the cloud. The only function you can call from the SDK after testing your graph is `client.runs.stream(thread_id=None, ...)` **Usage** ``` -langgraph down [OPTIONS] +langgraph test [OPTIONS] ``` **Options** | Option | Default | Description | | ------ | ------- | ----------- | -| `--debugger-port INTEGER` | | Pull the debugger image locally and serve the UI on specified port. | | `--verbose` | | Show more output from the server logs. | | `-c, --config FILE` | `langgraph.json` | Path to configuration file declaring dependencies, graphs and environment variables. | -| `-d, --docker-compose FILE` | | Advanced. Path to `docker-compose.yml` file with additional services to launch. | -| `-p, --port INTEGER` | `8123` | Port to expose. Example: `langgraph up --port 8000` | -| `--help` | | Display command documentation. | - -### `logs` -Show LangGraph Cloud API server logs. - -**Usage** -``` -langgraph logs [OPTIONS] -``` - -**Options** - -| Option | Default | Description | -| ------ | ------- | ----------- | -| `-f, --follow` | | Follow logs. | -| `-c, --config FILE` | `langgraph.json` | Path to configuration file declaring dependencies, graphs and environment variables. | -| `-d, --docker-compose FILE` | | Advanced. Path to `docker-compose.yml` file with additional services to launch. | -| `--help` | | Display command documentation. | - -### `up` -Start LangGraph Cloud API server. - -**Usage** -``` -langgraph up [OPTIONS] -``` - -**Options** - -| Option | Default | Description | -| ------ | ------- | ----------- | -| `--wait` | | Wait for services to start before returning. Implies `--detach`. | -| `--watch` | | Restart on file changes. | -| `--debugger-port INTEGER` | | Pull the debugger image locally and serve the UI on specified port. | -| `--verbose` | | Show more output from the server logs. | -| `-c, --config FILE` | `langgraph.json` | Path to configuration file declaring dependencies, graphs and environment variables. | -| `-d, --docker-compose FILE` | | Advanced. Path to `docker-compose.yml` file with additional services to launch. | -| `-p, --port INTEGER` | `8123` | Port to expose. Example: `langgraph up --port 8000` | -| `--pull / --no-pull` | `--pull` | Build with latest remote Docker image. Use `--no-pull` for running the LangGraph Cloud API server with locally built images. | -| `--recreate / --no-recreate` | `--no-recreate` | Recreate containers even if their configuration and image haven't changed. | -| `--help` | | Display command documentation. | +| `-p, --port INTEGER` | `8123` | Port to expose. Example: `langgraph test --port 8000` | +| `--pull / --no-pull` | `pull` | Pull latest images. Use --no-pull for running the server with locally-built images. Example: `langgraph up --no-pull` | +| `--help` | | Display command documentation. | \ No newline at end of file diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 2e5cc0e20..6af3a2296 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -170,11 +170,11 @@ nav: - "cloud/index.md" - Tutorials: - Quick Start: "cloud/quick_start.md" - - How-to Guides: + - How-to Guides: + - "cloud/how-tos/index.md" - Deployment: - Setup App: "cloud/deployment/setup.md" - Deploy to Cloud: "cloud/deployment/cloud.md" - - Test with Studio: "cloud/deployment/studio.md" - Self-Host: "cloud/deployment/self_hosted.md" - Streaming: - Stream Values: "cloud/how-tos/cloud_examples/stream_values.ipynb" @@ -188,17 +188,21 @@ nav: - Rollback: "cloud/how-tos/cloud_examples/rollback_concurrent.ipynb" - Reject: "cloud/how-tos/cloud_examples/reject_concurrent.ipynb" - Enqueue: "cloud/how-tos/cloud_examples/enqueue_concurrent.ipynb" + - Human-in-the-Loop: + - Add Breakpoint: "cloud/how-tos/cloud_examples/human_in_the_loop_breakpoint.ipynb" + - Wait for User Input: "cloud/how-tos/cloud_examples/human_in_the_loop_user_input.ipynb" + - Edit Graph State: "cloud/how-tos/cloud_examples/human_in_the_loop_edit_state.ipynb" + - Replay and Branch from Prior States: "cloud/how-tos/cloud_examples/human_in_the_loop_time_travel.ipynb" + - Test with LangGraph Studio: + - Test Cloud Deployment: "cloud/how-tos/test_deployment.md" + - Invoke graph in LangGraph Studio: "cloud/how-tos/invoke_studio.md" + - Interact with threads in LangGraph Studio: "cloud/how-tos/threads_studio.md" - Run Agent in Background: "cloud/how-tos/cloud_examples/background_run.ipynb" - Run Multiple Agents in Thread: "cloud/how-tos/cloud_examples/same-thread.ipynb" - - Human-in-the-Loop: - - Add Breakpoint: 'cloud/how-tos/cloud_examples/human_in_the_loop_breakpoint.ipynb' - - Wait for User Input: 'cloud/how-tos/cloud_examples/human_in_the_loop_user_input.ipynb' - - Edit Graph State: 'cloud/how-tos/cloud_examples/human_in_the_loop_edit_state.ipynb' - - Replay and Branch from Prior States: 'cloud/how-tos/cloud_examples/human_in_the_loop_time_travel.ipynb' - - Create Agents with Configuration: 'cloud/how-tos/cloud_examples/configuration_cloud.ipynb' - - Convert LangGraph calls to LangGraph Cloud calls: 'cloud/how-tos/cloud_examples/langgraph_to_langgraph_cloud.ipynb' - - Create Cron Jobs: 'cloud/how-tos/cloud_examples/cron_jobs.ipynb' - - Create Stateless Runs: 'cloud/how-tos/cloud_examples/stateless_runs.ipynb' + - Create Agents with Configuration: "cloud/how-tos/cloud_examples/configuration_cloud.ipynb" + - Convert LangGraph calls to LangGraph Cloud calls: "cloud/how-tos/cloud_examples/langgraph_to_langgraph_cloud.ipynb" + - Create Cron Jobs: "cloud/how-tos/cloud_examples/cron_jobs.ipynb" + - Create Stateless Runs: "cloud/how-tos/cloud_examples/stateless_runs.ipynb" - Integrate Webhooks: 'cloud/how-tos/cloud_examples/webhooks.ipynb' - SDK: - Python: "cloud/sdk/python_sdk.ipynb"