---
id: getting-started-with-agents
title: Getting Started with Agents using LangChain
sidebar_label: Getting Started with Agents
description: Building a Travel Itinerary Assistant with LangGraph and LangChain Client
keywords:
  - tutorial
  - agents
  - langgraph
  - langchain
  - openai
  - orchestration
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import useBaseUrl from '@docusaurus/useBaseUrl';

## Introduction

In this tutorial, you'll build a simple travel assistant agent using a LangChain Client, either `OrchestrationClient` or `AzureOpenAiChatClient` from the `@sap-ai-sdk/langchain` package alongside `LangGraph`.
The agent creates an itinerary based on current weather conditions and supports follow-up queries.

The assistant performs these steps:

- Accepts a user travel request.
- Calls a weather tool to fetch the current weather.
- Creates a weather-aware 3-item itinerary, including restaurant recommendations.
- Asks for human input (via interruption) when confirmation is required.

## Prerequisites

Refer to the prerequisites outlined [here](../../overview-cloud-sdk-for-ai-js#prerequisites).

This tutorial assumes a basic understanding of TypeScript, LLMs, and LangChain concepts.

## Installation

Install the following dependencies:

```bash
npm install @sap-ai-sdk/langchain langchain @langchain/langgraph @langchain/core @langchain/mcp-adapters @modelcontextprotocol/sdk zod
```

## Define Tools

The following tools are defined:

- `get_weather` for returning weather by city.
- `get_restaurants` for city-based restaurant recommendations.

:::info
The `get_restaurants` tool uses mocked data for simplicity.
Replace with real API calls to integrate live data.
:::

```js reference referenceLinkText=" " title="Restaurant tool definition"
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L23-L42
```

Set up an MCP server and define the `get_weather` tool using the free [Open-Meteo](https://open-meteo.com/) Weather API to fetch weather data.

```js reference referenceLinkText=" " title="Weather MCP Server"
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/mcp/weather-mcp-server.ts
```

To access tools defined in the MCP server, set up LangChain's [MCP Adapter](https://langchain-ai.github.io/langgraphjs/agents/mcp/?h=mcp#use-mcp-tools).

```js reference referenceLinkText=" " title="MCP Adapter"
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/mcp/mcp-adapter.ts
```

## Setup the Agent

Initialize the client and add tools using the `buildTools()` method.
Set up a `ToolNode` for routing tool calls.

<!-- vale off -->

<Tabs 
  groupId="client"
  defaultValue="orchestration"
  values={[
    {label: "Orchestration Client", value: "orchestration"},
    {label: "OpenAI Client", value: "openai"}
  ]}>

<TabItem value="openai">
  ```js reference referenceLinkText=" " title="Initialize Client"
  https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L44-L56
  ```
</TabItem>

<TabItem value="orchestration">

```ts
import { OrchestrationClient } from '@sap-ai-sdk/langchain';
import { ToolNode } from '@langchain/langgraph/prebuilt';
import { getMcpTools } from '../mcp/mcp-adapter.js';

const tools = [...getMcpTools, getRestaurantsTool];

// Create a model
const model = new OrchestrationClient({
  llm: {
    model_name: 'gpt-4o',
    model_params: {
      temperature: 0.7
    }
  }
});

// create a model with access to the tools
const modelWithTools = model.bindTools(tools);

const toolNode = new ToolNode(tools);
```

</TabItem>
</Tabs>

<!-- vale on -->

## Define Agent Logic and LangGraph Flow

Configure a `StateGraph` that routes between `agent` → `tool` → `agent`, and uses intelligent routing to determine when to ask for human input or end the conversation.

```js reference referenceLinkText=" " title="Configure Agent flow"
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L58-L89
```

## Build the Workflow

```js reference referenceLinkText=" " title="Build the workflow"
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L91-L101
```

:::note
Using [`MemorySaver`](https://langchain-ai.github.io/langgraphjs/how-tos/persistence/?h=memory+saver#add-memory) allows sharing context across multiple interactions in a single conversational thread (`conv-1`).
In this example, it enables the agent to remember the previously mentioned city.
:::

<img
  src={useBaseUrl('img/Langgraph-State.png')}
  alt="LangGraph Flow"
  className="center"
/>

## Run the assistant

The following example simulates a full interaction, with detailed console output at each step:

1. The assistant receives an initial itinerary request and fetches weather data.
2. It creates a weather-aware itinerary with restaurant recommendations and asks for user feedback.
3. It handles follow-up requests and modifications based on user input.
4. The conversation continues until the user is satisfied.

```js reference referenceLinkText=" " title="Call the agent with initial message"
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L103-L119
```

When the agent receives the initial request, it first determines that it needs both weather and restaurant data to create a comprehensive itinerary.
The LLM response includes tool calls to gather this information:

```json
"tool_calls": [
  {
    "id": "call_bnMuoAGpN6zUnpEm1DwqykvV",
    "name": "get_weather",
    "args": {
      "city": "Paris"
    },
    "type": "tool_call"
  },
  {
    "id": "call_NnlDugZMjAd4JrSqBa4lFpHE",
    "name": "get_restaurants",
    "args": {
      "city": "Paris"
    },
    "type": "tool_call"
  }
]
```

The agent executes these tool calls through the `tools` node to gather the necessary data, then returns to the agent node to generate a natural language response with the complete itinerary.

```js reference referenceLinkText=" "
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L121-L122
```

```console
Assistant: Here's a 3-item itinerary for your visit to Paris:

1. **Morning: Explore the Louvre Museum**
   - Start your day by visiting the world-renowned Louvre Museum. Take your time to explore its vast collection of art and history.
   - Weather: 22°C, Mild and pleasant – perfect for a stroll through the museum and its gardens.

2. **Afternoon: Lunch at Le Comptoir du Relais**
   - Enjoy a delicious lunch at Le Comptoir du Relais, a popular Parisian restaurant known for its authentic French cuisine.
   - After lunch, you can take a leisurely walk around the nearby Saint-Germain-des-Prés area, soaking in the Parisian ambiance.

3. **Evening: Dinner at L'As du Fallafel**
   - Head to L'As du Fallafel for dinner, where you can savor some of the best falafel in the city. It's a unique spot that offers a taste of multicultural Paris.
   - You can conclude your evening with a walk in the vibrant Marais district, where the restaurant is located.

Would you like to make any changes to this itinerary or add something else?
```

After presenting the itinerary, the graph pauses at the `askHuman` node and waits for the human's response.

```bash
next:  [ 'askHuman' ]
```

Provide the response by invoking the graph with a `new Command({ resume: <follow_up_question>" })` input:

```js reference referenceLinkText=" "
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L124-L129
```

The assistant responds with an updated itinerary:

```console
Assistant: Here's an updated itinerary with more outdoor activities:

1. **Morning: Visit the Eiffel Tower and Picnic at Champ de Mars**
   - Start your day with a visit to the iconic Eiffel Tower. You can either marvel at its structure from below or take a ride to the top for breathtaking views of Paris.
   - Weather: 22°C, Mild and pleasant – ideal for an outdoor picnic.
   - After the visit, enjoy a relaxing picnic at the nearby Champ de Mars park, where you can unwind and soak in the views.

2. **Afternoon: Stroll Along the Seine River**
   - Spend your afternoon walking along the Seine River. You can admire the beautiful bridges and architecture, and maybe even catch a boat tour for a different perspective of the city.
   - Stop by a local café for a light lunch or grab a snack from one of the nearby street vendors.

3. **Evening: Dinner at Breizh Café**
   - Conclude your day with dinner at Breizh Café, known for its delicious crêpes. It's located in a charming area where you can enjoy a pleasant outdoor dining experience.
   - After dinner, take a leisurely walk through the lively streets of the Marais district and enjoy the evening atmosphere.

Does this itinerary suit your preferences, or would you like further adjustments?
```

The agent loop ends when the user expresses satisfaction with the proposed itinerary.

```js reference referenceLinkText=" "
https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts#L131-L138
```

```console
Assistant: I'm glad you like the itinerary! If you have any more questions or need further assistance while planning your trip, feel free to reach out. Enjoy your time in Paris! Safe travels! 🌟
```

## Full Code

<details>
  <summary>Travel Itinerary Planner Agent</summary>

<Tabs>
  <TabItem value="Itinerary Planner">
    ```js reference referenceLinkText="View on GitHub"
    https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/travel-itinerary-agent.ts
    ```
  </TabItem>
  <TabItem value="MCP Adapter">
    ```js reference referenceLinkText="View on GitHub"
    https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/mcp/mcp-adapter.ts
    ```
  </TabItem>
  <TabItem value="Weather MCP Server">
    ```js reference referenceLinkText="View on GitHub"
    https://github.com/SAP/ai-sdk-js/blob/v1-main/sample-code/src/tutorials/mcp/weather-mcp-server.ts
    ```
  </TabItem>
</Tabs>

</details>

## Summary

This tutorial demonstrates how to implement a simple agent workflow using:

- The `AzureOpenAiChatClient` with `bindTools()` method to integrate external capabilities.
- Defining a LangGraph `StateGraph` for branching logic and conditional tool use.
- Interrupting the flow with a human tool via `interrupt()` and handling it inside the graph.
- Maintaining context across interactions with `MemorySaver`.

Explore additional capabilities and patterns in [LangGraph documentation](https://langchain-ai.github.io/langgraphjs/tutorials/quickstart/).
