Build a JavaScript AI Agent With LangGraph.js and MongoDB

As a web developer, building artificial intelligence into your web applications may seem daunting. As someone with zero background in AI/ML technologies, I totally understand. At first, it sounded so foreign to me. But I was quickly hooked when I saw how easy it is!

In this tutorial, we're going to dive into the exciting world of AI agents in JavaScript. Trust me, it's not as scary as it sounds! We're going to build something really cool using LangGraph.js and MongoDB.

So, what's the big deal with AI agents? And no, not Agent Smith. Imagine having a smart assistant that not only understands what you're saying but also remembers your previous conversations and can even utilize a number of "tools" to look up additional info, process data, and more. Pretty neat, right?

Enter LangGraph.js — your new best friend when it comes to building AI agents. Here's what makes it so awesome:

It can handle complex stuff: Want your AI to make decisions or repeat tasks? LangGraph.js has got your back with its loops and branching features.
It's got a great memory: No more "Oops, I forgot what we were talking about." LangGraph.js saves the state of your app after each step.
It plays well with humans: You can easily add human input to your AI workflows to monitor and alter the agent's approach.
It's super quick: With its streaming support, you get instant results. No more twiddling your thumbs waiting for responses.

These features make LangGraph.js an ideal choice for developing sophisticated AI agents that can maintain context and handle complex interactions. And, of course, LangGraph.js fits perfectly with LangChain.js, making it easy to integrate with other AI tools and libraries.

By integrating LangGraph.js with MongoDB, we can create AI agents that not only process and generate language but also store and retrieve information efficiently. This combination is particularly powerful for building applications that require context-aware conversations and data-driven decision-making.

This dynamic duo is perfect for building apps that need to have meaningful conversations and make smart decisions based on data. It's like creating your own J.A.R.V.I.S., minus the fancy holographic displays (for now, at least).

In this tutorial, we'll build an AI agent that can assist with HR-related queries using a database of employee information. Our agent will be able to:

Start new conversations and continue existing ones.
Look up employee information using MongoDB Atlas Vector Search.
Persist conversation state (LangGraph checkpoints) in MongoDB.

Let's get started by setting up our project!

If you are a visual learner, give the video version of this tutorial a watch!

Setting up the project

Prerequisites

Before we begin, make sure you have the following:

While we are using OpenAI for embeddings and Anthropic for conversations, you can easily swap these out to use any LLM combo of your choice.

Project initialization

If you prefer to follow along with the code, you can clone the repository from GitHub.

Our base project structure will look like this:

Code Snippet

Initialize a new Node.js project with TypeScript and install the required dependencies:

Code Snippet

Create a .env file in the root of your project and add your OpenAI and Anthropic API keys as well as your MongoDB Atlas connection string:

Code Snippet

Configuring MongoDB

Before we do anything, we need to create some synthetic data to work with. We'll use this data to seed our MongoDB database.

We'll use MongoDB Atlas as our database service. If you haven't already, create a cluster in MongoDB Atlas and obtain your connection string.

Connecting to the database

Learn how to set up your first MongoDB Atlas cluster.

Create an index.ts file in the root of your project. We'll establish a connection to MongoDB using the MongoDB driver:

Code Snippet

Start the server by running npx ts-node index.ts in your terminal. If you see the message "Pinged your deployment. You successfully connected to MongoDB!" you're good to go.

Seeding the database

To populate your database with synthetic employee data, let's create a seed-database.ts script. This script generates realistic employee records using OpenAI's GPT model and stores them in MongoDB along with their vector embeddings.

First, we import the necessary dependencies. We're using LangChain for AI-related functionality, MongoDB for database operations, and Zod for schema validation.

Code Snippet

Next, let's set up our MongoDB client and ChatOpenAI instance:

Code Snippet

Here, we create a MongoDB client using the connection string from our environment variables. We also initialize a ChatOpenAI instance with a specific model and temperature setting.

Now, let's define our employee schema using Zod:

Code Snippet

const EmployeeSchema = z.object({
  employee_id: z.string(),
  first_name: z.string(),
  last_name: z.string(),
  date_of_birth: z.string(),
  address: z.object({
    street: z.string(),
    city: z.string(),
    state: z.string(),
    postal_code: z.string(),
    country: z.string(),
  }),
  contact_details: z.object({
    email: z.string().email(),
    phone_number: z.string(),
  }),
  job_details: z.object({
    job_title: z.string(),
    department: z.string(),
    hire_date: z.string(),
    employment_type: z.string(),
    salary: z.number(),
    currency: z.string(),
  }),
  work_location: z.object({
    nearest_office: z.string(),
    is_remote: z.boolean(),
  }),
  reporting_manager: z.string().nullable(),
  skills: z.array(z.string()),
  performance_reviews: z.array(
    z.object({
      review_date: z.string(),
      rating: z.number(),
      comments: z.string(),
    })
  ),
  benefits: z.object({
    health_insurance: z.string(),
    retirement_plan: z.string(),
    paid_time_off: z.number(),
  }),
  emergency_contact: z.object({
    name: z.string(),
    relationship: z.string(),
    phone_number: z.string(),
  }),
  notes: z.string(),
});

type Employee = z.infer<typeof EmployeeSchema>;

const parser = StructuredOutputParser.fromZodSchema(z.array(EmployeeSchema));

Maybe this schema is too detailed, but it shows the power of what we can do with LLMs. As far as the LLM is concerned, this is a walk in the park.

This schema defines the structure of our employee data. We use Zod to ensure type safety and create a parser that will help us generate structured data from the AI's output.

This really is a game changer. We can now use this schema to generate data that is both realistic and consistent.

Next, let's implement the function to generate synthetic data:

Code Snippet

This function uses the ChatOpenAI instance along with some prompt engineering to generate synthetic employee data based on our schema.

Now, let's create a function to generate a summary for each employee:

Code Snippet

This function takes an employee object and creates a concise summary of their information using the various metadata created by the LLM. We'll use this summary to create embeddings for each employee.

Finally, let's implement the main function to seed the database:

Code Snippet

async function seedDatabase(): Promise<void> {
  try {
    await client.connect();
    await client.db("admin").command({ ping: 1 });
    console.log("Pinged your deployment. You successfully connected to MongoDB!");

const db = client.db("hr_database");
    const collection = db.collection("employees");

await collection.deleteMany({});
    
    const syntheticData = await generateSyntheticData();

const recordsWithSummaries = await Promise.all(
      syntheticData.map(async (record) => ({
        pageContent: await createEmployeeSummary(record),
        metadata: {...record},
      }))
    );
    
    for (const record of recordsWithSummaries) {
      await MongoDBAtlasVectorSearch.fromDocuments(
        [record],
        new OpenAIEmbeddings(),
        {
          collection,
          indexName: "vector_index",
          textKey: "embedding_text",
          embeddingKey: "embedding",
        }
      );

console.log("Successfully processed & saved record:", record.metadata.employee_id);
    }

console.log("Database seeding completed");

} catch (error) {
    console.error("Error seeding database:", error);
  } finally {
    await client.close();
  }
}

seedDatabase().catch(console.error);

This function connects to the MongoDB database, generates synthetic data, creates summaries for each employee, and then stores the data in the database using MongoDB Atlas Vector Search. It also handles error logging and ensures the database connection is closed when the operation is complete.

To seed the database, run the following command:

Code Snippet

This script creates a collection of employee records in the hr_database.

Go to your MongoDB Atlas dashboard and check out the data that has been generated. It's really amazing! You'll find the same structure as the schema we defined earlier along with the summary and vector embeddings for the summary.

Next, we need to set up a vector index for similarity search, which we'll use later in our AI agent.

Setting up the MongoDB Atlas Vector Search index

To set up the vector index, follow the steps outlined in our How to Index Fields for Vector Search documentation.

Be sure to name your index “vector_index” and select the employees collection. This is the JSON definition for the index:

Code Snippet

Building the AI agent with LangGraph.js

Now that we have our database set up, let's create our AI agent using LangGraph.js. We'll define the agent structure, implement tools for employee lookup, and set up the conversation flow.

Agent structure

Let's create a new file to define the agent called agent.ts. Here are the key components:

Code Snippet

This is the full list of imports for the agent. It's a mix of LangChain, LangGraph, Zod, and MongoDB libraries.

To use this code within our application, we will set up a function that will be exported from this file. We'll also start by defining the MongoDB connection and collection:

Code Snippet

Defining the agent state

Next, we'll use LangGraph's StateGraph and Annotation to define our agent's state. This will help us manage the conversation state and keep track of the conversation history.

Code Snippet

The GraphState keeps track of the conversation messages.

Implementing tools

We'll implement an employee lookup tool that uses MongoDB Atlas Vector Search:

Code Snippet

This tool uses MongoDB Atlas Vector Search to find relevant employee information based on the query. It returns a list of employees with their details.

The tool leverages vector embeddings to perform semantic search. This approach enables the agent to understand the intent behind the query and retrieve relevant information accordingly.

The n parameter allows you to customize the number of results returned, with a default of 10. This flexibility enables users to retrieve more or fewer results based on their specific needs.

Creating the tools node

Now, we'll define our tools and create a toolNode to manage the tools and their execution. In this example, we are only using a single tool, but you can add more tools as needed.

Code Snippet

Defining our chat model

We'll use the ChatAnthropic model from LangChain.js for our chat model and bind it with our tools.

Again, you can change this out to any other LLM model you’d like to use.

Code Snippet

Defining the function that calls the model

Some prompt engineering will go into this function which is our main entry point for the agent.

Code Snippet

async function callModel(state: typeof GraphState.State) {
  const prompt = ChatPromptTemplate.fromMessages([
    [
      "system",
      `You are a helpful AI assistant, collaborating with other assistants. Use the provided tools to progress towards answering the question. If you are unable to fully answer, that's OK, another assistant with different tools will help where you left off. Execute what you can to make progress. If you or any of the other assistants have the final answer or deliverable, prefix your response with FINAL ANSWER so the team knows to stop. You have access to the following tools: {tool_names}.\n{system_message}\nCurrent time: {time}.`,
    ],
    new MessagesPlaceholder("messages"),
  ]);

const formattedPrompt = await prompt.formatMessages({
    system_message: "You are helpful HR Chatbot Agent.",
    time: new Date().toISOString(),
    tool_names: tools.map((tool) => tool.name).join(", "),
    messages: state.messages,
  });

const result = await model.invoke(formattedPrompt);

return { messages: [result] };
}

The callModel function is responsible for formatting the prompt, invoking the model, and returning the result. It takes the current state of the conversation and uses it to format the prompt. It then invokes the model and returns the result. The result is an array of messages, which is what the GraphState expects. The GraphState will then update the state with the new messages. This is a simple example, but it can be extended to handle more complex conversations.

Helping the agent to decide when to quit

Next, we'll define a function that decides whether the agent should call a tool or stop and reply to the user.

Code Snippet

The shouldContinue function grabs the last message from the state and checks if it has a tool call. If it does, it returns "tools," which will be handled by the tools node. If it doesn't, it returns "end," which will be handled by the end node.

Defining the conversation flow

We'll use LangGraph to define our conversation flow:

Code Snippet

This sets up a simple back-and-forth between the agent and its tools. Let's break down the workflow:

The conversation starts with the "agent" node.
The agent processes the user's input and decides whether to use a tool or end the conversation.
If a tool is needed, control is passed to the "tools" node, where the selected tool is executed.
The result from the tool is sent back to the "agent" node.
The agent interprets the tool's output and formulates a response or decides on the next action.
This cycle continues until the agent determines that no further action is needed (shouldContinue returns "end").

This workflow allows for flexible and dynamic conversations, where the agent can use multiple tools in sequence, if necessary, to fulfill the user's request. The StateGraph structure ensures that the conversation maintains context and can handle complex, multi-step interactions efficiently.

Adding memory to the agent

We'll use the MongoDBSaver checkpoint saver from LangGraph to add memory to our agent.

Code Snippet

This will save the state of the conversation to a MongoDB database. We'll also compile the graph and include the MongoDB checkpointer to create an application that can be run.

Running the agent

Finally, we'll run the agent:

Code Snippet

This will run the agent and return the final response. Here's a breakdown of what's happening:

We invoke the compiled workflow (app.invoke()) with the initial state containing the user's query.
The recursionLimit is set to 15 to prevent infinite loops.
We pass a thread_id in the configurable options, which allows for conversation persistence across multiple interactions.
The workflow runs through its nodes (agent and tools) until a final state is reached.
We extract the last message from the final state, which contains the agent's final response.
This final response is both logged to the console and returned from the function.

Creating the Express.js server

Now, let's set up an Express.js server to expose our AI agent via API endpoints. We'll do this in the index.ts file:

Code Snippet

import 'dotenv/config';
import express, { Express, Request, Response } from "express";
import { MongoClient } from "mongodb";
import { callAgent } from './agent';

const app: Express = express();
app.use(express.json());

// Initialize MongoDB client
const client = new MongoClient(process.env.MONGODB_ATLAS_URI as string);

async function startServer() {
  try {
    await client.connect();
    await client.db("admin").command({ ping: 1 });
    console.log("Pinged your deployment. You successfully connected to MongoDB!");

app.get('/', (req: Request, res: Response) => {
      res.send('LangGraph Agent Server');
    });

app.post('/chat', async (req: Request, res: Response) => {
      const initialMessage = req.body.message;
      const threadId = Date.now().toString(); 
      try {
        const response = await callAgent(client, initialMessage, threadId);
        res.json({ threadId, response });
      } catch (error) {
        console.error('Error starting conversation:', error);
        res.status(500).json({ error: 'Internal server error' });
      }
    });

app.post('/chat/:threadId', async (req: Request, res: Response) => {
      const { threadId } = req.params;
      const { message } = req.body;
      try {
        const response = await callAgent(client, message, threadId);
        res.json({ response });
      } catch (error) {
        console.error('Error in chat:', error);
        res.status(500).json({ error: 'Internal server error' });
      }
    });

startServer();

This sets up two main endpoints:

/chat for starting a new conversation
/chat/:threadId for continuing an existing conversation

The /chat endpoint handles the initial message and starts a new conversation. It generates a unique thread ID for each conversation and passes it to the callAgent function.

The /chat/:threadId endpoint handles subsequent messages in an existing conversation. It passes the thread ID to the callAgent function to continue the conversation.

Testing the AI agent

Now that we have our server set up, we can test our AI agent:

Start the server.

Code Snippet

2. Use a tool like cURL or Postman to send requests to the /chat endpoint with the initial message.

Code Snippet

This will start a new conversation and return the agent's response. Here's an example response:

Code Snippet

{
  "threadId": "1695905400000",
  "response": "Now that we have gathered information about potential team members, let's analyze the results and build a team for the iOS app development project. I'll also identify any talent gaps we may have.

FINAL ANSWER:

Based on the employee information we've gathered, here's the proposed team for building an iOS app, along with identified talent gaps:

1. iOS Developer:
    - We don't have a dedicated iOS developer in our search results. This is a significant talent gap that needs to be addressed.

2. UI/UX Designer:
    - Linda Green (Employee ID: E003)
      Skills: Adobe Photoshop, Illustrator, UX/UI Design
      Strengths: Outstanding creativity and design skills, always meets deadlines with high-quality work
      Note: Part-time employee, works remotely

3. Frontend Developer:
    - Isabella Lopez (Employee ID: E009)
      Skills: JavaScript, HTML, CSS
      Strengths: Great attention to detail and coding skills, enthusiastic about new technologies and frameworks
      Note: While not an iOS developer, her frontend skills could be valuable for the app's web components or for learning iOS development

4. Project Manager:
    - James Brown (Employee ID: E004)
      Skills: Agile, Scrum, Leadership
      Strengths: Excellent leadership and team management skills, highly experienced in project management

5. Backend Developer:
    - Alice Johnson (Employee ID: E001)
      Skills: Java, Python, SQL
      Strengths: Strong team player with excellent problem-solving skills, meets project deadlines

Talent Gaps and Recommendations:

1. iOS Developer: This is the most critical gap. We need to either:
    a) Hire a dedicated iOS developer with experience in Swift and Xcode.
    b) Provide intensive iOS development training to Isabella Lopez or Alice Johnson, leveraging their existing programming skills.

2. Mobile-specific UI/UX Design: While Linda Green has UX/UI design skills, we should ensure she has experience with mobile app design, specifically for iOS. If not, consider providing additional training or hiring a specialist in iOS app design.

3. iOS-specific Project Management: James Brown should familiarize himself with iOS app development lifecycle and any specific methodologies used in mobile app projects.

4. Quality Assurance: We don't have a dedicated QA specialist for mobile apps. Consider either hiring one or training an existing team member in iOS app testing.

5. DevOps for iOS: Ensure that one of the team members (possibly Alice Johnson) can handle the iOS app deployment process, including working with the App Store and managing continuous integration/continuous deployment (CI/CD) for iOS apps.

6. Full-time UI/UX Designer: Since Linda Green is part-time, consider either increasing her hours or hiring an additional full-time UI/UX designer to ensure consistent availability throughout the project.

To address these gaps, the company should consider a combination of hiring new talent, providing specialized training to existing employees, and possibly engaging freelancers or consultants for specific iOS development needs. This will ensure a well-rounded team capable of successfully developing and launching an iOS app."

The server should respond with the agent's message. You can continue the conversation by sending additional messages to the /chat/:threadId endpoint.

Code Snippet

Congratulations! You've successfully built an AI agent using LangGraph.js and MongoDB.

Conclusion

There you have it; we've created a sophisticated AI agent with the help of LangGraph.js and MongoDB! This agent can hold a conversation, remember what is being talked about, look up information about employees, and give a smart response to HR-related questions.

The combination of LangGraph.js for conversational flow control and MongoDB to store and retrieve memory offers a great way forward for you to build some amazing AI applications. This example can be layered with additional tools, more sophisticated conversation flows, or connectors to other data sources such as images, audio, and video.

LangGraph is a powerful tool that can enhance your AI agent development. If you're already familiar with Node.js and MongoDB, you have a solid foundation to create sophisticated AI agents capable of handling diverse tasks during interactions. By leveraging these technologies together, you can build intelligent systems that provide valuable recommendations and insights.

If you have any questions or need assistance, please check out the MongoDB community forums.

TypeScript

Build a JavaScript AI Agent With LangGraph.js and MongoDB

Setting up the project

Prerequisites

Project initialization

Configuring MongoDB

Connecting to the database

Seeding the database

Setting up the MongoDB Atlas Vector Search index

Building the AI agent with LangGraph.js

Agent structure

Defining the agent state

Implementing tools

Creating the tools node

Defining our chat model

Defining the function that calls the model

Helping the agent to decide when to quit

Defining the conversation flow

Adding memory to the agent

Running the agent

Creating the Express.js server

Testing the AI agent

Conclusion

Top Comments in Forums

Related

myLeG

What to Expect from Realm JavaScript v12

Type Safety With Prisma & MongoDB

Trends Analyser

Table of Contents