AI Agents and MCP Server: Teaming Up for the Agentic Web

Explore the future of the web by building an AI application

Start the seriesSupport my work

Hey 👋,

For months, I've been exploring AI and the latest innovations. I've been fascinated by the idea of chatting with my website, literally chatting with it through an interface like the one you use to talk to a friend on your phone. That idea led me to create AI Agents that can interact with my website and provide users with high-quality, up-to-date, context-aware information.

This series is not about the exact implementation details of my AI Agent. I have already written two articles about that. The first covers the rise of AI Agents and their potential impact on the web. The second covers the technical implementation of my AI Agent.

Instead, this series focuses on the foundational concepts you need to get started with your own AI Agent and connect it to an MCP server for additional capabilities.

We will not build anything particularly elaborate because the agentic web is still at an early stage. As I mentioned in my article about the rise of AI Agents, everything remains to be built. There are no established patterns or definitive ways of working yet. For now, the best approach is to build, experiment, evaluate, and iterate.

Throughout this series, we will:

  1. Building an AI Agent Made Easy Thanks to the AI SDK: Using the AI SDK, we'll build our first AI Agent and understand what makes it different from a traditional AI.
  2. MCP to Provide Additional Capabilities to the AI Agent: With the official MCP SDK, we'll create an MCP server with a simple tool and interact with it.
  3. Pairing AI Agents with MCP to Make the Outside World Accessible: An AI Agent needs tools, so we'll connect the Agent to the MCP server and let it interact with the outside world.
  4. A Powerful AI Application Made with Nitro and Nuxt UI: We'll build a user interface that makes it easy to interact with our AI Agent.
  5. Deploying Our AI Agent to the World Using Cloudflare: Finally, we'll deploy the AI application and MCP server on Cloudflare. I chose this platform, but you can deploy them wherever you prefer.

By the end, you will have a complete chat interface for talking to your AI Agent, along with all the pieces you need to keep experimenting.

Our final AI application.
If you enjoy my content, please consider supporting my work!

All Articles

  1. 1. Building an AI Agent Made Easy Thanks to the AI SDK

    AI agents can be mysterious, but they are not as complicated as they seem. Let's prove it with in-depth explanations and examples.

  2. 2. MCP to Provide Additional Capabilities to the AI Agent

    MCP servers are popping up everywhere. Understanding them is key to unlocking the full potential of AI agents.

  3. 3. Pair AI Agents with MCP to Access the Outside World

    AI agents with custom tools are powerful. Connecting an MCP server to an agent unlocks another level of capability.

  4. 4. A Powerful AI Application Made with Nitro and Nuxt UI

    Having an AI agent is a good start, but integrating it into an application makes all the difference. Nuxt UI makes that easy.

  5. 5. Deploying Our AI Agent to the World Using Cloudflare

    Deploy the AI application and its MCP server on Cloudflare so people can use its capabilities online from any agent.

Meet the Instructor

PP

My name is Estéban Soubiran.

I'm a web engineer and technical writer who loves sharing with others.

For months, I've been fascinated by AI and its potential. I struggled to find the right resources to understand how AI Agents work. After researching and experimenting, I started to grasp the core concepts and I'm excited to share what I learned with you.

If you want to get in touch, you can always find me on Bluesky, X, and LinkedIn or shout out a mail to esteban@soubiran.dev.

Reactions

Discussions

Add a Comment

You need to be logged in to access this feature.

Login
Back to Series
Support my work
Follow me on