create-agent-chat-app

# LangGraph.js ReAct Memory Agent This repo provides a simple example of a ReAct-style agent with a tool to save memories, implemented in JavaScript. This is a straightforward way to allow an agent to persist important information for later use. In this implementation, we save all memories scoped to a configurable `userId`, enabling the bot to learn and remember a user's preferences across different conversational threads. ![Memory Diagram](./static/memory_graph.png) ## Getting Started This quickstart will get your memory service deployed on [LangGraph Cloud](https://langchain-ai.github.io/langgraph/cloud/). Once created, you can interact with it from any API. Assuming you have already [installed LangGraph Studio](https://github.com/langchain-ai/langgraph-studio?tab=readme-ov-file#download), to set up: 1. Create a `.env` file. ```bash cp .env.example .env ``` 2. Define required API keys in your `.env` file.  ### Setup Model The defaults values for `model` are shown below: ```yaml model: anthropic/claude-3-7-sonnet-latest ``` Follow the instructions below to get set up, or pick one of the additional options. #### Anthropic To use Anthropic's chat models: 1. Sign up for an [Anthropic API key](https://console.anthropic.com/) if you haven't already. 2. Once you have your API key, add it to your `.env` file: ``` ANTHROPIC_API_KEY=your-api-key ``` #### OpenAI To use OpenAI's chat models: 1. Sign up for an [OpenAI API key](https://platform.openai.com/signup). 2. Once you have your API key, add it to your `.env` file: ``` OPENAI_API_KEY=your-api-key ```  3. Open in LangGraph studio. Navigate to the `memory_agent` graph and have a conversation with it! Try sending some messages saying your name and other things the bot should remember. Assuming the bot saved some memories, create a _new_ thread using the `+` icon. Then chat with the bot again - if you've completed your setup correctly, the bot should now have access to the memories you've saved! You can review the saved memories by clicking the "memory" button. ![Memories Explorer](./static/memories.png) ## How it works This chat bot reads from your memory graph's `Store` to easily list extracted memories. If it calls a tool, LangGraph will route to the `store_memory` node to save the information to the store. ## How to evaluate Memory management can be challenging to get right, especially if you add additional tools for the bot to choose between. To tune the frequency and quality of memories your bot is saving, we recommend starting from an evaluation set, adding to it over time as you find and address common errors in your service. We have provided a few example evaluation cases in [the test file here](./tests/agent.int.test.ts). As you can see, the metrics themselves don't have to be terribly complicated, especially not at the outset. ## How to customize 1. Customize memory content: we've defined a simple memory structure `content: string, context: string` for each memory, but you could structure them in other ways. 2. Provide additional tools: the bot will be more useful if you connect it to other functions. 3. Select a different model: We default to anthropic/claude-3-7-sonnet-latest. You can select a compatible chat model using provider/model-name via configuration. Example: openai/gpt-4. 4. Customize the prompts: We provide a default prompt in the [prompts.ts](src/memory_agent/prompts.ts) file. You can easily update this via configuration.