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

Touch 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 an interface like you would use with a friend on your phone. This led me to create AI Agents that can interact with my website to provide high-quality, up-to-date, and context-aware information to users.

This series isn't about the exact implementation details of my AI Agent, I already have 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 details of my AI Agent.

This series focuses on general concepts to help you get started with your own AI Agent and integrate it with your MCP to give it more capabilities.

We won't build anything special because the agentic web is at an early stage. As I mentioned in my article about the rise of AI Agents, everything is yet to be built. There are no established patterns or ways of doing things. For now, the best approach is to build, experiment, evaluate, and iterate.

Through this series, we'll:

  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 Outside World Accessible: An AI Agent isn't complete without tools, so we'll connect the AI and the MCP server to create an Agent that can interact with the outside world.
  4. A powerful AI application made with Nitro and Nuxt UI: We'll build a user interface for our AI Agent to make it easy to interact with.
  5. Deploying our AI Agent to the world using Cloudflare: Finally, we'll deploy our AI Agent on Cloudflare. I chose this platform, but you can deploy wherever you prefer.

At the end, you'll have a full chat interface to talk with your AI Agent and all the required components to let your imagination run wild.

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. The truth is that they aren't that complicated and I will prove it with in-depth explanations and examples.

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

    MCP servers are popping out from everywhere and understanding them is key to unlock the full potential of AI Agents.

  3. 3. Pairing AI Agents with MCP to Make Outside World Accessible

    AI Agents with custom tools are powerful. By knowing how to integrate a MCP to an AI Agent, you can seriously unlock another level of capabilities.

  4. 4. A powerful AI application made with Nitro and Nuxt UI

    Having an AI Agent is a good start but integrating it within an application makes all the difference. Nuxt UI makes it easy.

  5. 5. Deploying our AI Agent to the world using Cloudflare

    It's time to deploy our AI Agent to the world using Cloudflare. Anyone will be able to access it and benefit from its capabilities.

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 obsessed with AI and its potential. I've struggled to find the right resources to understand how AI Agents work. After months of research and experimentation, I've started to grasp the core concepts and I'm excited to share my findings 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 [email protected].

Reactions

Discussions

Add a Comment

You need to be logged in to access this feature.

Login with GitHubLogin with Google
Back to Series
Support my work
Follow me on