added TS langchain tutorial #616
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Really solid foundation here! The interrupt-based auth flow and the core architecture look good. Main feedback is around making it easier for developers to customize into their own agent. Bonus points if they can later configure multi-user auth.
That said, let's get this version out as-is to get ourselves back up on LangChain's site as a reference while we further optimize this.
| ```ts filename="main.ts" | ||
| const agent = createAgent({ | ||
| systemPrompt: | ||
| "You are a helpful assistant that can use GMail tools. Your main task is to help the user with anything they may need.", |
There was a problem hiding this comment.
| "You are a helpful assistant that can use GMail tools. Your main task is to help the user with anything they may need.", | |
| "You are a helpful assistant that can use Gmail tools. Your main task is to help the user with anything they may need.", |
| const tool_name = value.tool_name; | ||
| const authorization_response = value.authorization_response; | ||
| console.log("⚙️: Authorization required for tool call", tool_name); | ||
| console.log("⚙️: Authorization URL", authorization_response.url); |
There was a problem hiding this comment.
| console.log("⚙️: Authorization URL", authorization_response.url); | |
| console.log("⚙️: Please authorize in your browser", authorization_response.url); |
| const authorization_response = value.authorization_response; | ||
| console.log("⚙️: Authorization required for tool call", tool_name); | ||
| console.log("⚙️: Authorization URL", authorization_response.url); | ||
| console.log("⚙️: Waiting for authorization to complete..."); |
There was a problem hiding this comment.
| console.log("⚙️: Waiting for authorization to complete..."); | |
| console.log("⚙️: Waiting for you to complete authorization..."); |
| const arcade = new Arcade(); | ||
|
|
||
| // Get the Arcade tools, you can customize the MCP Server (e.g. "github", "notion", "gmail", etc.) | ||
| const googleToolkit = await arcade.tools.list({ toolkit: "gmail", limit: 30 }); |
There was a problem hiding this comment.
It'd be great if this reference implementation of LangChain x Arcade is easily modifiable for a user to customize it to their own agent.
To that end - Is there a way to design this line so it's easy for a user to swap a toolkit in and out of this line?
I'm imagining a user will go to https://docs.arcade.dev/en/mcp-servers, pick Confluence for example, and not be sure how to type the toolkit name (e.g. "Confluence", "confluence", "confluencev1", etc)
There was a problem hiding this comment.
Also, is 30 the upper limit for tools you can add?
|
|
||
| ```ts filename="main.ts" | ||
| async function main() { | ||
| const config = { configurable: { thread_id: "1" } }; |
There was a problem hiding this comment.
What is the thread id? Would a user care to modify it if they were modifying this for their own implementation?
There was a problem hiding this comment.
The thread ID is a LangChain configuration that preserves the conversation history on the checkpointer (another LangChain abstraction for memory). It's explained in the text below step 8 "Write the main function"
| } from "@langchain/langgraph"; | ||
| import chalk from "chalk"; | ||
| import readline from "node:readline/promises"; | ||
|
|
There was a problem hiding this comment.
@nearestnabors 2 quick questions about how we structure example code in docs.
-
Right now we often put example code at the bottom of pages. I've been thinking it might be faster for developers if they could just copy the entire code block instead of piecing together samples. Have you seen other docs successfully put the full copyable example at the top (maybe minimized to save screen space) and then step through explaining it below?
-
Also, what do you think about putting all the modifiable variables at the top of example code? Like having a clear configuration section where someone can just change 6 values (user_id, toolkit_name, system_prompt, etc.) instead of hunting through the implementation to customize it. Makes it way easier to adapt the reference implementation to their use case, but curious if you've seen this work well or if there are downsides I'm not thinking about.
I'm picturing something like this at the top of the doc with // TO DO comments to signal that they're modifiable
arcade_user_id = [default_value]
toolkit_name = [default_value]
tool_limit = [default_value]
system_prompt = [default_value]
model_name = [default_value]
thread_id = [default_value]
There was a problem hiding this comment.
Great questions, @vfanelle!
- What's super effective in my experience is to add a CTA to "get the full example" at the top of the doc, like we do with pre-requisites. This could take several forms:
- "Jump to the complete code" -> anchor link to the bottom of the page. Pro: we don't have to change much about how we've been doing things. Cons: Jumps people around on the page.
- "Copy the complete code" -> copies the code from the bottom of the page. Pro: we don't have to change much about how we've been doing things. Cons: Finicky to implement.
- "Fork the code" -> Would take people to a GitHub repo/sub page of a repo. Pro: we could actually set the code up to be tested in said repo and "transpiled" to the page, keeping it evergreen! Con: Setting this up would be a lot of work. But this would be the first step in that direction.
Which do you think would work the best @vfanelle?
- I like putting the variables at the top. That seems useful to me, though it is an uncommon pattern. If @torresmateo feels otherwise, I would like to hear from him.
Preview: https://docs-git-mateo-dev-140-update-langgraph-quicks-dd3904-arcade-ai.vercel.app/en/home/langchain/use-arcade-with-langchain
This PR revamps combines the existing tutorials into the new way LangChain teaches agent building. The main points are:
createAgentfunction instead of LangGraph constructsinterruptfunctionality (i.e., "the LangChain way")Note to @vfanelle and @nearestnabors :
Note
Adds a new TS guide for using Arcade tools in LangChain agents (createAgent, tool wrapping, authorization via interrupts) and updates docs index.
app/en/home/langchain/use-arcade-with-langchain/page.mdxdetailing how to:tools, and bind user IDs.createAgent,MemorySaver, and stream outputs.interruptand resume withCommand.main.ts), setup steps, and run instructions.public/llms.txt(git-sha/timestamp) and add link under LangChain:use-arcade-with-langchain.md.Written by Cursor Bugbot for commit 7e22a52. This will update automatically on new commits. Configure here.