Merge pull request #76 from langchain-ai/brace/more-docs

fix: Improved docs on using the agent

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["checkpointer", "reranked", "Supabase"]
+  "cSpell.words": ["agentinbox", "checkpointer", "reranked", "Supabase"]
 }

README.md

@@ -18,7 +18,13 @@ This repository contains an 'agent' which can take in a URL, and generate a Twit
   - [Supabase](#setup-supabase)
   - [Slack](#setup-slack)
   - [GitHub](#setup-github)
-  - [Usage](#usage)
+- [Usage](#usage)
+  - [Generate Demo Post](#generate-demo-post)
+  - [Setup Crons](#setup-crons)
+  - [Prebuilt Scripts](#prebuilt-scripts)
+- [Setup Agent Inbox](#setup-agent-inbox)
+  - [Using the deployed inbox](#using-the-deployed-inbox)
+  - [Using the local inbox](#using-the-local-inbox)
 - [Customization](#customization)
   - [Prompts](#prompts)
   - [Post Style](#post-style)
@@ -133,16 +139,8 @@ This will kick off a new run to generate a post on a [LangChain blog post](https
 
 To view the output, either inspect it in LangSmith, or use Agent Inbox.
 
-To add your graph to Agent Inbox:
-
-- Visit the deployed site here: [https://dev.agentinbox.ai](https://dev.agentinbox.ai)
-- Click the Settings button, then the `Add Inbox` button
-- Enter the following values:
-  - Graph ID: `generate_post`
-  - Graph API URL: `http://localhost:54367`
-  - Name: (optional) `Generate Post (local)`
-- Submit
-- This should then trigger a refresh, and you should see your first interrupted event! (if it does not show up even after refreshing, please make sure you've waited at least 1-2 minutes for the graph execution to finish)
+> [!NOTE]
+> Follow these steps to setup & configure the Agent Inbox: [Setup Agent Inbox Guide](#setup-agent-inbox)
 
 # Advanced Setup
 
@@ -287,13 +285,17 @@ Create a new storage bucket called `images`. Make sure the bucket is set to publ
 
 ### Setup Slack
 
-Slack integration is optional, but recommended if you intend on using the `ingest_data` agent. This agent can be used in a cron job to fetch messages from a Slack channel, and call the `generate_post` graph for each message. We use this flow internally to have a single place for submitting relevant URLs to the agent, which are then turned into posts once daily.
+Slack integration is optional, but recommended if you intend on using the `ingest_data` agent, or having updates sent to Slack.
+
+This agent can be used in a cron job to fetch messages from a Slack channel, and call the `generate_post` graph for each message. We use this flow internally at LangChain to enable having a single Slack channel for submitting relevant URLs to the agent, which are then turned into posts once daily.
 
 To configure the Slack integration, create a new Slack app and install it into your desired Slack workspace.
 
-Once installed, ensure it has access to the channel you want to ingest messages from.
+Once installed, ensure it has access to the channel you want to ingest messages from. Additionally, if you want it to send update messages to Slack, it will need write permissions to the workspace.
+
+Finally, make sure the `SLACK_BOT_TOKEN` environment variable is set in your `.env` file. Then, when you create a cron (see the [Setup Crons](#setup-crons) section), you'll only have to pass in the channel ID to ingest messages from.
 
-Finally, make sure the `SLACK_BOT_TOKEN` environment variable is set in your `.env` file.
+To enable sending updates to Slack, add a `SLACK_CHANNEL_ID` environment variable to your `.env` file with the channel ID you want to send updates to (at LangChain, we have one channel for sending content links, and a separate one for sending update messages).
 
 ### Setup GitHub
 
@@ -303,7 +305,9 @@ To get a GitHub API token, create a new fine grained token with the `Public Repo
 
 Ensure this is set as `GITHUB_TOKEN` in your `.env` file.
 
-## Usage
+# Usage
+
+## Generate Demo Post
 
 Once this is done, start your graph server by running: (ensure you either have the `LANGGRAPH_API_KEY` exposed in your path, or include it inline when you run the command)
 
@@ -328,20 +332,63 @@ yarn generate_post
 
 This will kick off a new run to generate a post on a [LangChain blog post](https://blog.langchain.dev/customers-appfolio/).
 
-To view the output, either inspect it in LangSmith, or use Agent Inbox.
+To view the output, either inspect it in LangSmith, or use [the Agent Inbox](#setup-agent-inbox).
+
+## Setup Crons
+
+The Agent Inbox is most powerful when used with cron jobs. Doing this allows you to send links to generate posts on to a Slack channel, and have the cron job check for these links asynchronously. With this setup, you can send links to Slack, and have the inbox handle the rest while you sleep.
+
+We have a series of scripts to help with this, which you can find in the [`scripts/crons`](./scripts/crons) directory. In this section, we'll explain how to quickly create a cron for ingesting links to your graph from Slack.
+
+### Slack Setup
+
+Before we get started, ensure you have the proper Slack integration setup, as described in the [Setup Slack](#setup-slack) section. Then, edit the [`create-cron.ts`](./scripts/crons/create-cron.ts) file, and set the `slackChannelId` field to the channel ID of the channel you want to ingest links from.
+
+After editing, run the following command to create the cron:
+
+```bash
+yarn cron:create
+```
+
+This will create a new cron job that will ingest links from Slack into your graph, once daily.
+
+## Prebuilt Scripts
+
+For more information on all of the prebuilt scripts, see the [`scripts/README.md`](./scripts/README.md) file.
+
+# Setup Agent Inbox
+
+The Agent Inbox is the easiest way to view interrupted events, and manage accepting, responding, or other allowed actions. To view your events in the inbox, you can either add your graph to the deployed version of the Agent Inbox, or clone & run the Agent Inbox locally.
+
+## Using the deployed inbox
+
+The Agent Inbox is setup in a way that allows for any graph --local or deployed-- to be added & accessed via the UI.
+
+To add your local graph to the inbox, visit the deployed site here: [dev.agentinbox.ai](https://dev.agentinbox.ai/).
+
+If it's your first time vising the site, you'll immediately be prompted to add a new graph. Fill out the form with the following values:
+
+- Graph ID: `generate_post`
+- Graph API URL: `http://localhost:54367`
+- Name: (optional) `Generate Post (local)`
+
+After saving, you should be able to view your graph in the inbox. If you do this after invoking your graph (and waiting for the thread to interrupt), it will automatically fetch the interrupted event.
+
+## Using the local inbox
+
+To run the Agent Inbox locally, follow the setup instructions [here](https://github.com/langchain-ai/agent-inbox/blob/main/README.md).
+
+Once the web server is running, open your browser and visit [http://localhost:3000](http://localhost:3000). This will then prompt you to add your graph to the inbox.
+
+Fill out the form with the following values:
 
-To add your graph to Agent Inbox:
+- Graph ID: `generate_post`
+- Graph API URL: `http://localhost:54367`
+- Name: (optional) `Generate Post (local)`
 
-- Visit the deployed site here: [https://agent-inbox-nu.vercel.app](https://agent-inbox-nu.vercel.app)
-- Click the Settings button, then the `Add Inbox` button
-- Enter the following values:
-  - Graph ID: `generate_post`
-  - Graph API URL: `http://localhost:54367`
-  - Name: (optional) `Generate Post (local)`
-- Submit
-- This should then trigger a refresh, and you should see your first interrupted event! (if it does not show up even after refreshing, please make sure you've waited at least 1-2 minutes for the graph execution to finish)
+## Using the Agent Inbox with a graph deployed on LangGraph Platform
 
-If the interrupt event does not contain a social media post, this is likely because you have not authenticated your social media account with Arcade (or you're missing the proper environment variables if not using Arcade). Open this interrupt event and follow the instructions outlined in the description.
+The Agent Inbox can also be used with graph's deployed in production on LangGraph Platform. To use these graphs, the setup steps are the exact same, with the only difference being the graph API URL should be the URL of the deployed graph, and you're required to set a LangSmith API key. This is required to fetch & invoke the deployed graph. LangSmith API keys are stored in your browser's local storage, and never stored on the server.
 
 # Customization