Course description

What you'll build and be able to do

This course walks you through one concrete project, the Task Assistant, step by step. By the end you have a Next.js (App Router) app with an AI agent that manages a task list through tools: first local typed tools, then the same tools served by your own MCP server, which the agent reaches as an MCP client.

The agent calls typed tools described with Zod, validates the arguments the model sends, pauses for your approval before it creates, changes or deletes anything, and stops at configurable step and cost limits. The MCP server refuses any change without a one-time approval token and records every change in an audit log.

Every lesson builds on the same project, and every line of code is typed and explained. The model is called through the official openai npm package, configured from environment variables, so the code works with any OpenAI-compatible provider.

You learn: tool calling and the agent loop, typed tools with Zod, building an MCP server and client with the official TypeScript SDK (@modelcontextprotocol/server and @modelcontextprotocol/client), testing with the MCP Inspector and Vitest, and the security checklist for running an MCP server.

The course is for web developers who know JavaScript or TypeScript and some React. You do not need prior experience with Next.js, AI agents or MCP: each piece is introduced when the project needs it. At the end you have a working agent you understand line by line, the full source code, and tests you can run, so you can adapt the same patterns to your own projects and tools.

What will i learn?

• Create a Next.js App Router project in TypeScript with a server-only client for any OpenAI-compatible model.
• Build a chat route and a streaming chat UI that make real model calls, with clear errors.
• Define typed tools with Zod and reject invalid arguments from the model before anything runs.
• Write an agent loop that offers tools, runs the one the model picks, returns results and stops at a step limit.
• Build an MCP server in TypeScript with the official SDK (@modelcontextprotocol/server) and test it with the MCP Inspector.
• Connect a Next.js app to your MCP server as an MCP client (@modelcontextprotocol/client) and switch the agent to its tools.
• Add a human approval step before any change, enforced on the server with one-time approval tokens and an audit log.
• Add memory, timeouts, retries and a cost budget, then evaluate the agent with a Vitest suite.
• Run the app and MCP server in production and apply the security checklist for MCP servers.