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

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 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);
        }
    }

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

• Creates an AgentsClient using Azure credentials.
• Fetches the agent from Azure AI Foundry by name.
• Creates a new thread for the session.

constructor(taskService: TaskService) {
    this.taskService = taskService;
    
    // Initialize the agent directly in constructor
    const endpoint = process.env.AZURE_AI_FOUNDRY_PROJECT_ENDPOINT;
    const agentId = process.env.AZURE_AI_FOUNDRY_AGENT_ID;

    if (!endpoint || !agentId) {
        console.warn('Azure AI Foundry configuration missing. Set AZURE_AI_FOUNDRY_PROJECT_ENDPOINT and AZURE_AI_FOUNDRY_AGENT_ID');
        return;
    }

    try {
        // Create the client using Azure credentials
        this.client = new AgentsClient(endpoint, new DefaultAzureCredential());
        
        // Get the agent from Azure AI Foundry, then create thread
        this.client.getAgent(agentId).then((agent) => {
            this.agentId = agent.id;
            
            // Create a new thread for this session
            return this.client!.threads.create();
        }).then((thread) => {
            this.threadId = thread.id;
            console.log(`Foundry agent initialized with ID: ${this.agentId}, Thread: ${this.threadId}`);
        }).catch((error) => {
            console.error('Error initializing Foundry agent or creating thread:', error);
        });
        
    } catch (error) {
        console.error('Error initializing Foundry agent:', error);
    }
}

This initialization code doesn't define any functionality for the agent, because you would typically build the agent in the Azure AI 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 Azure AI 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 Azure AI Foundry, and description helps the agent determine how to call the API:

            },
            apis: ['./src/routes/*.ts'],
        });
        res.json(schema);
    } catch (error: any) {
        res.status(500).json({ error: error.message });
    }
});

/**
 * @swagger