Skip to content

Fix-tables-and-toc #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 15, 2025
Merged

Fix-tables-and-toc #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3abf3b
update coming soon pages
burtenshaw May 15, 2025
d1d07ca
use inline and table style for protocol diagram
burtenshaw May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions units/en/_toctree.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
- title: "3. Use Case: Advanced MCP Development"
sections:
- local: unit3/introduction
title: Introduction
title: Coming Soon

- title: "Bonus Units"
sections:
- local: unit4/introduction
title: Introduction
title: Coming Soon
177 changes: 63 additions & 114 deletions units/en/unit1/communication-protocol.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,143 +129,92 @@ In the previous section, we discussed the lifecycle of a single interaction betw

The MCP protocol defines a structured interaction lifecycle between Clients and Servers:

<style>
.diagram {
margin: 20px 0;
font-family: monospace;
}
.client {
background-color: lightgreen;
}
.server {
background-color: lightblue;
}
.client, .server {
display: inline-block;
width: 50px;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 0px;
}
.arrow {
display: inline-block;
width: 100px;
text-align: center;
color: #666;
position: relative;
}
.arrow::before {
content: "→";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
.arrow.reverse::before {
content: "←";
}
.message {
display: block;
margin: 5px 0 20px 0;
color: #333;
}
</style>

### Initialization

The Client connects to the Server and they exchange protocol versions and capabilities, and the Server responds with its supported protocol version and capabilities.

<div class="diagram">
<div class="client">💻</div>
<div class="arrow">
<span class="message">initialize</span>
</div>
<div class="server">🌐</div>
<br>
<div class="client">💻</div>
<div class="arrow reverse">
<span class="message">response</span>
</div>
<div class="server">🌐</div>
<br>
<div class="client">💻</div>
<div class="arrow">
<span class="message">initialized</span>
</div>
<div class="server">🌐</div>
</div>
<table style="width: 100%;">
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">→<br>initialize</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">←<br>response</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">→<br>initialized</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
</table>

The Client confirms the initialization is complete via a notification message.

### Discovery

The Client requests information about available capabilities and the Server responds with a list of available tools.

<div class="diagram">
<div class="client">💻</div>
<div class="arrow">
<span class="message">tools/list</span>
</div>
<div class="server">🌐</div>
<br>
<div class="client">💻</div>
<div class="arrow reverse">
<span class="message">response</span>
</div>
<div class="server">🌐</div>
</div>
<table style="width: 100%;">
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">→<br>tools/list</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">←<br>response</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
</table>

This process could be repeated for each tool, resource, or prompt type.

### Execution

The Client invokes capabilities based on the Host's needs.

<div class="diagram">
<div class="client">💻</div>
<div class="arrow">
<span class="message">tools/call</span>
</div>
<div class="server">🌐</div>
<br>
<div class="client">💻</div>
<div class="arrow reverse">
<span class="message">notification (optional progress)</span>
</div>
<div class="server">🌐</div>
<br>
<div class="client">💻</div>
<div class="arrow reverse">
<span class="message">response</span>
</div>
<div class="server">🌐</div>
</div>
<table style="width: 100%;">
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">→<br>tools/call</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">←<br>notification (optional progress)</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">←<br>response</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
</table>

### Termination

The connection is gracefully closed when no longer needed and the Server acknowledges the shutdown request.

<div class="diagram">
<div class="client">💻</div>
<div class="arrow">
<span class="message">shutdown</span>
</div>
<div class="server">🌐</div>
<br>
<div class="client">💻</div>
<div class="arrow reverse">
<span class="message">response</span>
</div>
<div class="server">🌐</div>
<br>
<div class="client">💻</div>
<div class="arrow">
<span class="message">exit</span>
</div>
<div class="server">🌐</div>
</div>
<table style="width: 100%;">
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">→<br>shutdown</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">←<br>response</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
<tr>
<td style="background-color: lightgreen; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">💻</td>
<td style="text-align: center;">→<br>exit</td>
<td style="background-color: lightblue; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">🌐</td>
</tr>
</table>

The Client sends the final exit message to complete the termination.

Expand Down
4 changes: 3 additions & 1 deletion units/en/unit3/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
# Introduction
# Coming Soon

This will be another use case that dives deeper into the MCP protocol and how to use it in more complex ways.
6 changes: 5 additions & 1 deletion units/en/unit4/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
# Advanced Topics, Security, and the Future of MCP
# Coming Soon

This unit will be a collaboration with partners from the AI community.

If you're building tools for MCP, please reach out to us and we'll add you to the unit. Open a [discussion](https://huggingface.co/spaces/mcp-course/README/discussions) on the hub organization.