Tutorial: Build an agentic web app in Azure App Service with LangGraph or Foundry Agent Service (Node.js)

This tutorial demonstrates how to add agentic capability to an existing data-driven Express.js CRUD application. It does this using two different approaches: LangGraph and Foundry Agent Service.

If your web application already has useful features, like shopping, hotel booking, or data management, it's relatively straightforward to add agent functionality to your web application by wrapping those functionalities in a plugin (for LangGraph) or as an OpenAPI endpoint (for Foundry Agent Service). In this tutorial, you start with a simple to-do list app. By the end, you'll be able to create, update, and manage tasks with an agent in an App Service app.

LangGraph
Foundry Agent Service

Screenshot of a chat completion session with a LangGraph agent.

Both LangGraph and Foundry Agent Service enable you to build agentic web applications with AI-driven capabilities. LangGraph is similar to Microsoft Semantic Kernel and is an SDK, but Semantic Kernel doesn't support JavaScript currently. The following table shows some of the considerations and trade-offs:

Consideration	LangGraph	Foundry Agent Service
Performance	Fast (runs locally)	Slower (managed, remote service)
Development	Full code, maximum control	Low code, rapid integration
Testing	Manual/unit tests in code	Built-in playground for quick testing
Scalability	App-managed	Azure-managed, autoscaled
Security guardrails	Custom implementation required	Built-in content safety and moderation
Identity	Custom implementation required	Built-in agent ID and authentication
Enterprise	Custom integration required	Built-in Microsoft 365/Teams deployment and Microsoft 365 integrated tool calls.

In this tutorial, you learn how to:

Convert existing app functionality into a plugin for LangGraph.
Add the plugin to a LangGraph agent and use it in a web app.
Convert existing app functionality into an OpenAPI endpoint for Foundry Agent Service.
Call a Foundry agent in a web app.
Assign the required permissions for managed identity connectivity.

Prerequisites

An Azure account with an active subscription - Create an account for free.
GitHub account to use GitHub Codespaces - Learn more about GitHub Codespaces.

Open the sample with Codespaces

The easiest way to get started is by using GitHub Codespaces, which provides a complete development environment with all required tools preinstalled.

Navigate to the GitHub repository at https://github.com/Azure-Samples/app-service-agentic-langgraph-foundry-node.
Select the Code button, select the Codespaces tab, and select Create codespace on main.
Wait a few moments for your Codespace to initialize. When ready, you'll see a fully configured development environment in your browser.
Run the application locally:
```
npm install
npm run build
npm start
```
When you see Your application running on port 3000 is available, select Open in Browser and add a few tasks.

The agents aren't fully configured so they don't work yet. You'll configure them later.

Review the agent code

Both approaches use the same implementation pattern, where the agent is initialized on application start, and responds to user messages by POST requests.

LangGraph
Foundry Agent Service

The LangGraphTaskAgent is initialized in the constructor in src/agents/LangGraphTaskAgent.ts. The initialization code does the following:

Configures the AzureChatOpenAI client using environment variables.
Creates the prebuilt ReAct agent with a set of CRUD tools for task management (see LangGraph: How to use the prebuilt ReAct agent).
Sets up memory management (see LangGraph: How to add memory to the prebuilt ReAct agent).

    constructor(taskService: TaskService) {
        this.taskService = taskService;
        this.memory = new MemorySaver();
        try {
            const endpoint = process.env.AZURE_OPENAI_ENDPOINT;
            const deploymentName = process.env.AZURE_OPENAI_DEPLOYMENT_NAME;

            if (!endpoint || !deploymentName) {
                console.warn('Azure OpenAI configuration missing for LangGraph agent');
                return;
            }
            // Initialize Azure OpenAI client
            const credential = new DefaultAzureCredential();
            const azureADTokenProvider = getBearerTokenProvider(credential, "https://cognitiveservices.azure.com/.default");
            
            this.llm = new AzureChatOpenAI({
                azureOpenAIEndpoint: endpoint,
                azureOpenAIApiDeploymentName: deploymentName,
                azureADTokenProvider: azureADTokenProvider,
                azureOpenAIApiVersion: "2024-10-21"
            });
            // Define tools directly in the array
            const tools = [
                tool(
                    async ({ title, isComplete = false }) => {
                        const task = await this.taskService.addTask(title, isComplete);
                        return `Task created successfully: "${task.title}" (ID: ${task.id})`;
                    },
                    {
                        name: 'createTask',
                        description: 'Create a new task',
                        schema: z.object({
                            title: z.string(),
                            isComplete: z.boolean().optional()
                        }) as any
                    }
                ),
                tool(
                    async () => {
                        const tasks = await this.taskService.getAllTasks();
                        if (tasks.length === 0) {
                            return 'No tasks found.';
                        }
                        return `Found ${tasks.length} tasks:\n` + 
                               tasks.map(t => `- ${t.id}: ${t.title} (${t.isComplete ? 'Complete' : 'Incomplete'})`).join('\n');
                    },
                    {
                        name: 'getTasks',
                        description: 'Get all tasks',
                        schema: z.object({}) as any
                    }
                ),
                tool(
                    async ({ id }) => {
                        const task = await this.taskService.getTaskById(id);
                        if (!task) {
                            return `Task with ID ${id} not found.`;
                        }
                        return `Task ${task.id}: "${task.title}" - Status: ${task.isComplete ? 'Complete' : 'Incomplete'}`;
                    },
                    {
                        name: 'getTask',
                        description: 'Get a specific task by ID',
                        schema: z.object({
                            id: z.number()
                        }) as any
                    }
                ),
                tool(
                    async ({ id, title, isComplete }) => {
                        const updated = await this.taskService.updateTask(id, title, isComplete);
                        if (!updated) {
                            return `Task with ID ${id} not found.`;
                        }
                        return `Task ${id} updated successfully.`;
                    },
                    {
                        name: 'updateTask',
                        description: 'Update an existing task',
                        schema: z.object({
                            id: z.number(),
                            title: z.string().optional(),
                            isComplete: z.boolean().optional()
                        }) as any
                    }
                ),
                tool(
                    async ({ id }) => {
                        const deleted = await this.taskService.deleteTask(id);
                        if (!deleted) {
                            return `Task with ID ${id} not found.`;
                        }
                        return `Task ${id} deleted successfully.`;
                    },
                    {
                        name: 'deleteTask',
                        description: 'Delete a task',
                        schema: z.object({
                            id: z.number()
                        }) as any
                    }
                )
            ];

            // Create the ReAct agent with memory
            this.agent = createReactAgent({
                llm: this.llm,
                tools,
                checkpointSaver: this.memory,
                stateModifier: `You are an AI assistant that manages tasks using CRUD operations.
                
You have access to tools for creating, reading, updating, and deleting tasks.
Always use the appropriate tool for any task management request.
Be helpful and provide clear responses about the actions you take.

If you need more information to complete a request, ask the user for it.`
            });
        } catch (error) {
            console.error('Error initializing LangGraph agent:', error);
        }
    }

When processing user messages, the agent is invoked using invoke() with the user's message and session configuration for conversation continuity:

const result = await this.agent.invoke(
    { 
        messages: [
            { role: 'user', content: message }
        ]
    },
    { 
        configurable: { 
            thread_id: currentSessionId 
        } 
    }
);

The FoundryTaskAgent uses a lazy initialization pattern in src/agents/FoundryTaskAgent.ts. The initialization code does the following:

Creates an AIProjectClient using Azure credentials.
Gets an OpenAI client from the project client.
Retrieves the agent by name.
Creates a new conversation for the session.

// Create the AI Project client
this.project = new AIProjectClient(endpoint, new DefaultAzureCredential());
this.openAIClient = await this.project.getOpenAIClient();
this.agentName = agentName;

// Create a conversation for this session
const conversation = await this.openAIClient.conversations.create({
    items: [],
});
this.conversationId = conversation.id;

console.log(`Foundry agent initialized with name: ${this.agentName}, Conversation: ${this.conversationId}`);

This initialization code doesn't define any functionality for the agent, because you would typically build the agent in the Foundry portal. As part of the example scenario, it also follows the OpenAPI pattern shown in Add an App Service app as a tool in Foundry Agent Service (Node.js), and makes its CRUD functionality available as an OpenAPI endpoint. This lets you add it to the agent later as a callable tool.

The OpenAPI code is defined in src/routes/api.ts. For example, the "GET /api/tasks" route defines operationId in the JSDoc Swagger comments, as required by the OpenAPI spec tool in Microsoft Foundry, and description helps the agent determine how to call the API:

/**
 * @swagger
 * /api/tasks:
 *   get:
 *     summary: Get all tasks
 *     operationId: getAllTasks
 *     responses:
 *       200:
 *         description: List of tasks
 */
router.get('/tasks', async (req: Request, res: Response) => {
    try {
        const tasks = await taskService.getAllTasks();
        res.json(tasks);
    } catch (error) {
        console.error('Error getting tasks:', error);
        res.status(500).json({ error: 'Failed to get tasks' });
    }
});

When processing user messages, the agent is invoked by adding the user's message to the conversation and calling responses.create() with the agent reference:

// Add the user message to the conversation
await this.openAIClient.conversations.items.create(this.conversationId, {
    items: [{ type: 'message', role: 'user', content: message }],
});

// Generate response using the agent
const response = await this.openAIClient.responses.create(
    {
        conversation: this.conversationId,
    },
    {
        body: { agent: { name: this.agentName, type: 'agent_reference' } },
    }
);

Deploy the sample application

The sample repository contains an Azure Developer CLI (AZD) template, which creates an App Service app with managed identity and deploys your sample application.

In the terminal, log into Azure using Azure Developer CLI:
```
azd auth login
```
Follow the instructions to complete the authentication process.
Deploy the Azure App Service app with the AZD template:
```
azd up
```

When prompted, give the following answers:

Question	Answer
Enter a new environment name:	Type a unique name.
Select an Azure Subscription to use:	Select the subscription.
Pick a resource group to use:	Select Create a new resource group.
Select a location to create the resource group in:	Select Sweden Central.
Enter a name for the new resource group:	Type Enter.

In the AZD output, find the URL of your app and navigate to it in the browser. The URL looks like this in the AZD output:
```
 Deploying services (azd deploy)

   (✓) Done: Deploying service web
   - Endpoint: <URL>
 
```
Open the autogenerated OpenAPI schema at the https://....azurewebsites.net/api/schema path. You need this schema later.

You now have an App Service app with a system-assigned managed identity.

Create and configure the Microsoft Foundry resource

LangGraph
Foundry Agent Service

In the Foundry portal, make sure the top New Foundry radio button is set to active and create a project.
Deploy a model of your choice (see Microsoft Foundry Quickstart: Create resources).
From top of the model playground, copy the model name.
The easiest way to get the Azure OpenAI endpoint is still from the classic portal. Select the New Foundry radio button, then Azure OpenAI, and then copy the URL in Azure OpenAI endpoint for later.

In the Foundry portal, make sure the top New Foundry radio button is set to active and create a project.
In the home page, copy the Project endpoint for later.
Select Start building > Create agent and follow the prompt.
In the new agent's playground, create an OpenAPI tool to call your web app by selecting Tools > Add > Custom > OpenAPI tool > Create. In the Setup pane, add an action with the OpenAPI spec tool. Use the OpenAPI schema that you get from the deployed web app and anonymous authentication. For detailed steps, see How to use the OpenAPI spec tool.

Your application code is already configured to include the server's url and operationId, which are needed by the agent. For more information, see Connect to OpenAPI Specification.
Be sure to select Save.
Select Try in playground and test your Foundry agent with prompts like "Show me all the tasks" and "Please add a task."

If you get a valid response, the agent is making tool calls to the OpenAPI endpoint on your deployed web app.

From the top menu of the new Foundry portal, select Operate, then select Admin. In the row for your Foundry project, you should see two links. The one in the Name column is the Foundry project resource, and the one in the Parent resource column is the Foundry resource.
Select the Foundry resource in the Parent resource and then select Manage this resource in the Azure portal. From the Azure portal, you can assign role-based access for the resource to the deployed web app.
Add the following role for the App Service app's managed identity:

Target resource Required role Needed for

Foundry Cognitive Services OpenAI User The chat completion service in Microsoft Agent Framework.

For instructions, see Assign Azure roles using the Azure portal.

Target resource	Required role	Needed for
Foundry	Cognitive Services OpenAI User	The chat completion service in Microsoft Agent Framework.

From the top menu of the new Foundry portal, select Operate, then select Admin. In the row for your Foundry project, you should see two links. The one in the Name column is the Foundry project resource, and the one in the Parent resource column is the Foundry resource.
Select the Foundry project resource in the Name column and then select Manage this resource in the Azure portal. From the Azure portal, you can assign role-based access for the resource to the deployed web app.
Add the following role for the App Service app's managed identity:

Target resource Required role Needed for

Foundry Project Azure AI User Reading and calling the Foundry agent.

For instructions, see Assign Azure roles using the Azure portal.

Target resource	Required role	Needed for
Foundry Project	Azure AI User	Reading and calling the Foundry agent.

Configure connection variables in your sample application

Open .env. Using the values you copied earlier from the Foundry portal, configure the following variables:

LangGraph
Foundry Agent Service

Variable	Description
`AZURE_OPENAI_ENDPOINT`	Azure OpenAI endpoint (copied from the classic Foundry portal).
`AZURE_OPENAI_DEPLOYMENT_NAME`	Model name in the deployment (copied from the model playground in the new Foundry portal).

Note

To keep the tutorial simple, you'll use these variables in .env instead of overwriting them with app settings in App Service.

Variable	Description
`AZURE_AI_FOUNDRY_PROJECT_ENDPOINT`	Microsoft Foundry project endpoint from the new Foundry portal.
`AZURE_AI_FOUNDRY_AGENT_NAME`	Agent name (from the agent playground in the Foundry portal).

Note

To keep the tutorial simple, you'll use these variables in .env instead of overwriting them with app settings in App Service.

Sign in to Azure with the Azure CLI:
```
az login
```
This allows the Azure Identity client library in the sample code to receive an authentication token for the logged in user. Remember that you added the required role for this user earlier.
Run the application locally:
```
npm run build
npm start
```
When you see Your application running on port 3000 is available, select Open in Browser.
Select the LangGraph Agent link and the Foundry Agent link to try out the chat interface. If you get a response, your application is connecting successfully to the Microsoft Foundry resource.
Back in the GitHub codespace, deploy your app changes.
```
azd up
```
Navigate to the deployed application again and test the chat agents.

LangGraph
Foundry Agent Service

Screenshot of a chat completion session with a LangGraph agent.

Clean up resources

When you're done with the application, you can delete the App Service resources to avoid incurring further costs:

azd down --purge

Since the AZD template doesn't include the Microsoft Foundry resources, you need to delete them manually if you want.

More resources

Feedback

Din il-paġna kienet utli?

Last updated on 2025-12-16