Overview

Duration: 1

Hey there! This codelab introduces you to WebMCP - the very early W3C draft submitted by Google and Microsoft to enable better AI agents in the browser. In the shortest, and as per the draft report: the WebMCP API enables web applications to provide JavaScript-based tools to AI agents.

You can read the draft report here: https://webmachinelearning.github.io/webmcp/

Requirements

Duration: 3

In order to follow this codelab, you'll need the following:

Python on local machine
Chrome: Version 146.0.7672.0 or higher.
Gemini API Key, obtain a free one here - https://ai.dev/apikey

Enable WebMCP on your browser:

Open Chrome and navigate to chrome://flags/#enable-webmcp-testing
Set the flag to Enabled.
Relaunch Chrome to apply the changes.

Additionally, you can install this extension by Google to test out WebMCP:

This codelab assumes you're on a Linux environment (Mac/Windows WSL/linux distros, etc.). If you're on Windows or any other operating system, you may have to substitute some of the commands to make them work.

Setup Repo

Duration: 3

Let's setup our repository for the day.

We'll be working with this repository - https://github.com/xprilion/webmcp-train-your-baby-dragon

Clone it using:

git@github.com:xprilion/webmcp-train-your-baby-dragon.git

Switch to main branch

git checkout main

Assuming you've Python on your device,

python -m http.server

With this done, you should be able to navigate to http://localhost:8000 to see the web page rendered.

Fill in the blanks

Duration: 20

At this point, the repo has a bunch of blanks in it, your task - fill them!

Conclusion

Duration: 2

Congratulations on making it here! 🎉

In the duration of the codelab you've learnt -

How to implement WebMCP on your websites

What's Next?

Duration: 1

You can explore the solved codebase here: