arcade-mcp/examples/langgraph-ts

Arcade LangGraph.js Agent

This project is based on the LangChain React Agent JS repository.

This template showcases a LangGraph.js agent integrated with Arcade tools, designed for LangGraph Studio. The agent uses the ReAct pattern to execute API calls and access various tools through the Arcade API.

What it does

The Arcade LangGraph agent:

1. Takes a user query as input
2. Reasons about the query and decides on an action using Arcade tools
3. Executes the chosen action through the Arcade API
4. Observes the result of the action
5. Repeats steps 2-4 until it can provide a final answer

This approach creates a flexible agent that can interact with multiple services like Google, GitHub, and other external tools through Arcade's unified API.

Getting Started

1. Clone this repository

2. Create a .env file:

   cp .env.example .env
   

3. Add your API keys to the .env file:

   OPENAI_API_KEY=your-openai-api-key
   ARCADE_API_KEY=your-arcade-api-key
   

4. Install dependencies:

   pnpm install
   

5. Run the development server:

   pnpm dev
   

How it works

The core logic is defined in src/graph.ts

1. Loads Arcade tools for multiple toolkits (e.g., Gmail)
2. Creates a model with the tools bound to it
3. Routes messages between tool calls and model reasoning
4. Compiles everything into a graph you can invoke and deploy

Project Structure

• src/graph.ts - Main graph implementation showing how to create and use a LangGraph agent with Arcade tools
• src/configuration.ts - Configurable parameters for the agent
• src/prompts.ts - Default prompts used by the agent

Customization

To use different Arcade toolkits or queries:

1. Modify the toolkit string in arcade.tools.list in src/graph.ts to include the desired toolkit (e.g., ["gmail", "github", "notion"])
2. Change the default model in src/configuration.ts
3. Update the system prompt in src/prompts.ts

Currently supported Arcade toolkits:

• GitHub
• Gmail
• Notion
• Reddit
• X
• And many more

You can check out our Integrations documentation for more information on how to integrate with other tools.

You can also create your own custom tools and integrate them with LangGraph. Check out our Custom Tools documentation for more information.

Development

While iterating on your graph, you can edit past state and rerun your app from past states to debug specific nodes. Local changes will be automatically applied via hot reload.

You can create an entirely new thread, clearing previous history, using the + button in the top right of the LangGraph Studio interface.

Authorization Flow

The integration handles authorization requirements for Arcade tools:

• When a tool requires authentication, an authorization URL is generated
• This URL can be presented to the user to complete the authorization process

Prerequisites

• Node.js (v18+)
• pnpm
• Arcade account with API key
• OpenAI API key or other compatible LLM