AI Agent with MCP tools using LangChain.js

⭐ If you like this sample, star it on GitHub — it helps a lot!

Overview • Architecture • Getting started • Deploy to Azure • Run locally • MCP tools • Resources

Overview

This project demonstrates how to build AI agents that can interact with real-world APIs using the Model Context Protocol (MCP). It features a complete burger ordering system with a serverless API, web interfaces, and an MCP server that enables AI agents to browse menus, place orders, and track order status. The agent uses LangChain.js to handle LLM reasoning and tool calling. The system consists of multiple interconnected services, as detailed in the Architecture section below.

The system is hosted on Azure Static Web Apps (web apps) and Azure Functions (API and MCP servers), with Azure Cosmos DB for NoSQL for data storage. You can use it as a starting point for building your own AI agents.

Key features

• LangChain.js agent with tool calling via MCP (Streamable HTTP transport)
• Multi-service, end‑to‑end architecture (web UIs, APIs, MCP server)
• User authentication with sessions history
• 100% serverless architecture, for cost-effective scaling
• Single-command deployment using Infrastructure as Code (IaC)

Architecture

Building AI applications can be complex and time-consuming, but using LangChain.js and Azure serverless technologies allows to greatly simplify the process. This application is a AI agent that can be access through different interfaces (web app, CLI) and that can call tools through MCP to interact with a burger ordering API.

The application is made from these main components:

Additionally, these optional and support components are included:

Getting started

There are multiple ways to get started with this project. The quickest way is to use GitHub Codespaces that provides a preconfigured environment for you. Alternatively, you can set up your local environment following the instructions below.

Deploy to Azure

Prerequisites

• Azure account: If you're new to Azure, get an Azure account for free to get free Azure credits to get started
• Azure account permissions: Your Azure account must have Microsoft.Authorization/roleAssignments/write permissions, such as Role Based Access Control Administrator, User Access Administrator, or Owner

Deploy with Azure Developer CLI

1. Open a terminal and navigate to the root of the project
2. Authenticate with Azure by running azd auth login
3. Run azd up to deploy the application to Azure. This will provision Azure resources and deploy all services
   • You will be prompted to select a base location for the resources
   • The deployment process will take a few minutes

Once deployment is complete, you'll see the URLs of all deployed services in the terminal.

azd env set AZURE_OPENAI_MODEL_CAPACITY 1

azd env set AZURE_OPENAI_ALT_ENDPOINT <your_openai_endpoint>
azd env set AZURE_OPENAI_API_KEY <your_openai_api_key>
azd env set AZURE_OPENAI_MODEL <your_openai_model>

Cost estimation

Pricing varies per region and usage, so it isn't possible to predict exact costs for your usage. However, you can use the Azure pricing calculator with pre-configured estimations to get an idea of the costs: Azure Pricing Calculator.

Clean up resources

To clean up all the Azure resources created by this sample:

azd down --purge

Use Ollama for local development

If you have a machine with enough resources, you can run this sample entirely locally without using any cloud resources. To do that, you first have to install Ollama and then run the following commands to download a model on your machine:

ollama pull qwen3:8b

After that create a .env file in the root of the project with the following content:

AZURE_OPENAI_API_ENDPOINT="http://localhost:11434/v1"
AZURE_OPENAI_MODEL="qwen3:8b"
AZURE_OPENAI_API_KEY="__not_used__"

You can now continue to the run locally section to start the application.

Run locally

After setting up your environment and either provisioned the Azure resources or set up Ollama, you can run the entire application locally:

# Install dependencies for all services
npm install

# Start all services locally
npm start

Starting the different services may take some time, you need to wait until you see the following message in the terminal: 🚀 All services ready 🚀

This will start:

• Agent Web App: http://localhost:4280
• Agent API: http://localhost:7072
• Burger Web App: http://localhost:5173
• Burger API: http://localhost:7071
• Burger MCP Server: http://localhost:3000

You can then open the Agent web app and ask things like:

• What spicy burgers do you have?
• Order two Classic Cheeseburgers with extra bacon.
• Show my recent orders

The agent will decide which MCP tool(s) to call, then come up with a response.

Available scripts

This project uses npm workspaces to manage multiple packages in a single repository. You can run scripts from the root folder that will apply to all packages, or you can run scripts for individual packages as indicated in their respective README files.

Common scripts (run from repo root):

MCP tools

The Burger MCP server provides these tools for AI agents:

Testing the MCP Server

Using the MCP Inspector

You can test the MCP server using the MCP Inspector:

1. Install and start MCP Inspector:

   npx -y @modelcontextprotocol/inspector
   

2. In your browser, open the MCP Inspector (the URL will be shown in the terminal)

3. Configure the connection:

   • Transport: Streamable HTTP
   • URL: http://localhost:3000/mcp

4. Click Connect and explore the available tools

Using GitHub Copilot

To use the MCP server in local mode with GitHub Copilot, create a local .vscode/mcp.json configuration file in your project root:

{
  "servers": {
    "burger-mcp": {
      "type": "stdio",
      "command": "npm",
      "args": ["run", "start:local", "--workspace=burger-mcp"]
    }
  }
}

If you open that file

Then, you can use GitHub Copilot in agent mode to interact with the MCP server. For example, you can ask questions like "What burgers are available?" or "Place an order for a vegan burger" and Copilot will use the MCP server to provide answers or perform actions.

Resources

Here are some resources to learn more about the technologies used in this project:

• Model Context Protocol - More about the MCP protocol
• MCP for Beginners - A beginner-friendly introduction to MCP
• Generative AI with JavaScript - Learn how to build Generative AI applications with JavaScript
• Azure AI Travel Agents with Llamaindex.TS and MCP - Sample for building AI agents using Llamaindex.TS and MCP
• Serverless AI Chat with RAG using LangChain.js - Sample for building a serverless AI chat grounded on your own data with LangChain.js

You can also find more Azure AI samples here.

Troubleshooting

If you encounter issues while running or deploying this sample:

1. Dependencies: Ensure all required tools are installed and up to date
2. Ports: Make sure required ports (3000, 4280, 5173, 5174, 7071, 7072) are not in use
3. Azure Developer CLI: Verify you're authenticated with azd auth login
4. Node.js version: Ensure you're using Node.js 22 or higher

For more detailed troubleshooting, check the individual README files in each service directory.

FAQ

What is MCP (Model Context Protocol)?

MCP is a protocol that enables AI agents to interact with external tools and APIs in a standardized way. It provides a common interface for tools, making it easier to integrate different services and capabilities into AI agents. Learn more at modelcontextprotocol.io.

How does this project differ from other AI agent samples?

This sample focuses on MCP integration with LangChain.js in a serverless architecture. Unlike standalone agent examples, this project demonstrates:

• Multi-service architecture (web UIs, APIs, MCP server)
• Production-ready deployment on Azure
• Real-world use case (burger ordering system)
• Integration with popular AI tools (GitHub Copilot, Claude)

Which LLM providers are supported?

The agent supports any OpenAI-compatible endpoint:

• Azure OpenAI (default when deployed to Azure)
• GitHub Models (free alternative)
• Ollama (local development)
• Any other OpenAI-compatible API (set via AZURE_OPENAI_API_ENDPOINT)

What's the difference between local and cloud deployment?

Local development:

• Uses in-memory storage (data lost on restart)
• No cloud costs
• Requires local setup (Node.js, Docker)
• Perfect for testing and development

Azure deployment:

• Uses Azure Cosmos DB for persistent storage
• Production-ready with authentication
• Single-command deployment with azd up
• Scalable and cost-effective serverless architecture

How does the MCP server work?

The Burger MCP server exposes burger API operations as MCP tools:

• It translates API calls into MCP tool definitions
• AI agents can discover and call these tools automatically
• Uses Streamable HTTP transport for communication
• Works with MCP-compatible clients (Copilot, Claude, etc.)

Can I use this MCP server with other AI tools?

Yes! The MCP server is compatible with:

• GitHub Copilot (agent mode) - via .vscode/mcp.json config
• Claude Desktop - via MCP client configuration
• MCP Inspector - for testing and debugging
• Any MCP-compatible client

What are the prerequisites for deployment?

• Azure account with Microsoft.Authorization/roleAssignments/write permissions
• Azure Developer CLI (azd) 1.19+
• Node.js 22+ LTS
• Git for cloning the repository

How do I customize the MCP tools?

You can extend the MCP server by:

1. Adding new tool definitions in packages/burger-mcp
2. Implementing corresponding API endpoints in packages/burger-api
3. Updating the tool schema to expose new operations
4. Testing with MCP Inspector before deployment

Why am I getting "model capacity" errors on Azure?

If using Azure for Students or Free Trial, run:

azd env set AZURE_OPENAI_MODEL_CAPACITY 1

This ensures resources fit within free tier limits. You may also need to provide an alternative OpenAI endpoint.

Where can I get help?

• Join the Microsoft Foundry Discord
• Visit the Developer Forum
• Check the MCP for Beginners guide

Built for AI Agents

This project has been optimized for use with AI agents like GitHub Copilot. This includes:

• Built-in context engineering provided with AGENTS.md files to help AI agents understand and extend the codebase.
• Reusable prompts for common tasks.
• Custom instructions tailored for each service of the project.
• Custom Codebase Explorer chat mode for Copilot, to help you explore and understand the codebase.

To learn how to set up and use GitHub Copilot with this repository, check out the docs/copilot.md guide.

Getting Help

If you get stuck or have any questions about building AI apps, join:

If you have product feedback or errors while building visit: