Skip to content

Commit 0539e18

Browse files
anthonydmaysanthonydmays
authored
docs: adds supplemental lesson 5 (#827)
* docs: adds README for supplemental5 lesson Signed-off-by: Anthony D. Mays <[email protected]> * docs: adds README for supplemental5 lesson Signed-off-by: Anthony D. Mays <[email protected]> --------- Signed-off-by: Anthony D. Mays <[email protected]>
1 parent 96a7e19 commit 0539e18

File tree

4 files changed

+285
-1
lines changed

4 files changed

+285
-1
lines changed

‎slides/src/Slides/Lessons/Supplemental5.js‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
import htm from "htm";
2+
import { createElement } from "react";
3+
import { CodeSlide, DemoSlide, Lesson, QuestionsSlide } from "../Layouts/index.js";
4+
5+
const html = htm.bind(createElement);
6+
7+
function Supplemental5() {
8+
return html`
9+
<${Lesson} title="Agentic AI" lessonId="supplemental_5" subtitle="Supplemental 5">
10+
<section>
11+
<p>AI is evolving from <em>answering questions</em> to <em>taking actions</em>.</p>
12+
</section>
13+
<section>
14+
<p><em>Agentic AI</em> refers to AI systems that can <em>autonomously</em> make decisions and perform tasks.</p>
15+
</section>
16+
<section class="ml-bullet-slide">
17+
<h3>What makes an AI "agentic"?</h3>
18+
<ul>
19+
<li class="fragment">Can <em>plan</em> multi-step tasks</li>
20+
<li class="fragment">Can <em>use tools</em> to interact with systems</li>
21+
<li class="fragment">Can <em>adapt</em> based on feedback</li>
22+
<li class="fragment">Can <em>execute</em> without constant human guidance</li>
23+
</ul>
24+
</section>
25+
<section>
26+
<p>Instead of just chatting, agentic AI can <em>read files</em>, <em>run code</em>, <em>query databases</em>, and more.</p>
27+
</section>
28+
<section>
29+
<p>Think of it like a <em>junior developer</em> that can follow instructions and use your dev tools.</p>
30+
</section>
31+
<section>
32+
<p>But how does AI <em>safely</em> interact with all these different systems?</p>
33+
</section>
34+
<section>
35+
<p>That's where <em>MCP</em> comes in.</p>
36+
</section>
37+
<section>
38+
<p><em>Model Context Protocol (MCP)</em> is an open standard for connecting AI models to external tools and data.</p>
39+
</section>
40+
<section>
41+
<p>MCP lets AI <em>discover</em> and <em>use</em> capabilities without hardcoding every integration.</p>
42+
</section>
43+
<section class="ml-bullet-slide">
44+
<h3>MCP basic architecture</h3>
45+
<ul>
46+
<li class="fragment"><em>Host</em> - The AI application (like Claude Desktop, VS Code)</li>
47+
<li class="fragment"><em>Client</em> - Connects to MCP servers on behalf of the AI</li>
48+
<li class="fragment"><em>Server</em> - Exposes tools, resources, and prompts</li>
49+
</ul>
50+
</section>
51+
<section>
52+
<p>An <em>MCP server</em> is just a program that follows the protocol and provides capabilities.</p>
53+
</section>
54+
<section>
55+
<p>MCP supports <em>three transport mechanisms</em> for client-server communication.</p>
56+
</section>
57+
<section class="ml-bullet-slide">
58+
<h3>MCP Transport Types</h3>
59+
<ul>
60+
<li class="fragment"><em>stdio</em> - Standard input/output (for local processes)</li>
61+
<li class="fragment"><em>SSE</em> - Server-Sent Events (for remote HTTP servers)</li>
62+
<li class="fragment"><em>HTTP with Streaming</em> - Streamable HTTP (experimental)</li>
63+
</ul>
64+
</section>
65+
<section>
66+
<p><em>stdio</em> is the simplest transport—perfect for <em>local tools</em> on your machine.</p>
67+
</section>
68+
<${CodeSlide} lang="typescript" badge="stdio Transport" fontSize=".37em" lineNumbers=true>
69+
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
70+
71+
// Server reads from stdin, writes to stdout
72+
const transport = new StdioServerTransport();
73+
await server.connect(transport);
74+
75+
// Client launches the server process
76+
const client = new Client({
77+
name: "my-client",
78+
version: "1.0.0"
79+
});
80+
81+
await client.connect(new StdioClientTransport({
82+
command: "node",
83+
args: ["server.js"]
84+
}));
85+
<//>
86+
<section>
87+
<p><em>SSE</em> (Server-Sent Events) enables <em>remote MCP servers</em> accessible over HTTP.</p>
88+
</section>
89+
<${CodeSlide} lang="typescript" badge="SSE Transport" fontSize=".34em" lineNumbers=true>
90+
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
91+
92+
// Server sends events over HTTP
93+
const server = new Server({ name: "remote-tools", version: "1.0.0" },
94+
{ capabilities: { tools: {} } });
95+
96+
const transport = new SSEServerTransport("/messages", response);
97+
await server.connect(transport);
98+
99+
// Client connects to remote URL
100+
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
101+
102+
const client = new Client({ name: "my-client", version: "1.0.0" });
103+
await client.connect(new SSEClientTransport(
104+
new URL("https://example.com/sse")
105+
));
106+
<//>
107+
<section>
108+
<p><em>HTTP with Streaming</em> is an experimental transport for <em>bidirectional</em> communication.</p>
109+
</section>
110+
<${CodeSlide} lang="typescript" badge="Streamable HTTP" fontSize=".37em" lineNumbers=true>
111+
// Experimental - subject to change
112+
import { StreamableHTTPServerTransport } from
113+
"@modelcontextprotocol/sdk/server/streamable-http.js";
114+
115+
const transport = new StreamableHTTPServerTransport({
116+
sessionId: request.headers.get("x-session-id")
117+
});
118+
119+
await server.connect(transport);
120+
121+
// Supports full duplex streaming over HTTP
122+
<//>
123+
<section class="ml-bullet-slide">
124+
<h3>Choosing the right transport</h3>
125+
<ul style=${{"font-size": ".9em"}}>
126+
<li class="fragment"><em>stdio</em> - Local development tools, CLI utilities</li>
127+
<li class="fragment"><em>SSE</em> - Cloud services, shared team tools, web integrations</li>
128+
<li class="fragment"><em>Streamable HTTP</em> - Advanced use cases (still experimental)</li>
129+
</ul>
130+
</section>
131+
<${CodeSlide} lang="typescript" badge="MCP Server" fontSize=".30em" lineNumbers=true>
132+
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
133+
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
134+
135+
const server = new Server({
136+
name: "my-tool-server",
137+
version: "1.0.0"
138+
}, {
139+
capabilities: { tools: {} }
140+
});
141+
142+
// Define a tool the AI can use
143+
server.setRequestHandler("tools/list", async () => ({
144+
tools: [{
145+
name: "get_weather",
146+
description: "Get current weather for a location",
147+
inputSchema: {
148+
type: "object",
149+
properties: {
150+
location: { type: "string" }
151+
}
152+
}
153+
}]
154+
}));
155+
<//>
156+
<${CodeSlide} lang="typescript" badge="MCP Server" fontSize=".37em" lineNumbers=true>
157+
// Handle tool execution
158+
server.setRequestHandler("tools/call", async (request) => {
159+
if (request.params.name === "get_weather") {
160+
const { location } = request.params.arguments;
161+
// Fetch weather data...
162+
return {
163+
content: [{
164+
type: "text",
165+
text: \`Weather in \${location}: Sunny, 72°F\`
166+
}]
167+
};
168+
}
169+
});
170+
171+
const transport = new StdioServerTransport();
172+
await server.connect(transport);
173+
<//>
174+
<section>
175+
<p>The AI can now <em>discover</em> the weather tool and <em>call it</em> when needed.</p>
176+
</section>
177+
<section>
178+
<p>So how is MCP <em>different</em> from a regular API?</p>
179+
</section>
180+
<section class="ml-bullet-slide">
181+
<h3>MCP vs Traditional APIs</h3>
182+
<ul style=${{"font-size": ".9em"}}>
183+
<li class="fragment"><em>Discoverability</em> - MCP tools describe themselves; APIs need documentation</li>
184+
<li class="fragment"><em>Context</em> - MCP provides resources and prompts alongside tools</li>
185+
<li class="fragment"><em>Standardized</em> - One protocol for all integrations; APIs are unique</li>
186+
</ul>
187+
</section>
188+
<section class="ml-bullet-slide">
189+
<h3>MCP vs Traditional APIs</h3>
190+
<ul style=${{"font-size": ".9em"}}>
191+
<li class="fragment"><em>Stateful</em> - MCP maintains session context; REST is stateless</li>
192+
<li class="fragment"><em>AI-first</em> - Designed for autonomous agents, not human developers</li>
193+
</ul>
194+
</section>
195+
<section>
196+
<p>APIs are built for <em>developers</em> to integrate systems manually.</p>
197+
</section>
198+
<section>
199+
<p>MCP is built for <em>AI agents</em> to integrate systems autonomously.</p>
200+
</section>
201+
<${CodeSlide} lang="json" badge="MCP Tool Response" fontSize=".42em">
202+
{
203+
"content": [
204+
{
205+
"type": "text",
206+
"text": "Found 3 matching files"
207+
},
208+
{
209+
"type": "resource",
210+
"resource": {
211+
"uri": "file:///project/src/app.ts",
212+
"mimeType": "text/plain",
213+
"text": "// Source code here..."
214+
}
215+
}
216+
]
217+
}
218+
<//>
219+
<section>
220+
<p>MCP servers can be written in <em>any language</em> and run <em>locally</em> or <em>remotely</em>.</p>
221+
</section>
222+
<section>
223+
<p>Examples: <em>filesystem access</em>, <em>database queries</em>, <em>Git operations</em>, <em>web browsing</em>, <em>API calls</em>.</p>
224+
</section>
225+
<section>
226+
<p>With MCP, you can give AI <em>safe, controlled access</em> to your entire dev environment.</p>
227+
</section>
228+
<${DemoSlide} />
229+
<${QuestionsSlide} />
230+
<//>`;
231+
}
232+
233+
export default Supplemental5;

‎slides/src/Slides/Lessons/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import Supplemental1 from "./Supplemental1.js";
2828
import Supplemental2 from "./Supplemental2.js";
2929
import Supplemental3 from "./Supplemental3.js";
3030
import Supplemental4 from "./Supplemental4.js";
31+
import Supplemental5 from "./Supplemental5.js";
3132

3233
export {
3334
Lesson00,
@@ -59,6 +60,7 @@ export {
5960
Supplemental1,
6061
Supplemental2,
6162
Supplemental3,
62-
Supplemental4
63+
Supplemental4,
64+
Supplemental5
6365
};
6466

‎slides/src/Slides/Slides.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ function Slides() {
4343
<${lessons.Supplemental2} />
4444
<${lessons.Supplemental3} />
4545
<${lessons.Supplemental4} />
46+
<${lessons.Supplemental5} />
4647
</div>`;
4748
}
4849

‎supplemental5/README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Supplemental 5: Agentic AI ([Slides](https://code-differently.github.io/code-society-25-2/slides/#/supplemental_5))
2+
3+
## Pre-work
4+
5+
Please review the following resources before lecture:
6+
7+
### Recommended
8+
* [What is Agentic AI and How Does it Work? (Video)](https://www.youtube.com/watch?v=15_pppse4fY)
9+
10+
## Demo: MCP Server Implementation
11+
12+
The `fullstack_demo` project includes a working Model Context Protocol (MCP) server that demonstrates how AI agents can interact with a real application.
13+
14+
### What's Included
15+
16+
The demo shows how to:
17+
- Expose application functionality (todos) through MCP tools
18+
- Implement authentication for AI agents using Clerk
19+
- Support multiple transport types (stdio, SSE, HTTP)
20+
- Deploy an MCP server to production (Vercel)
21+
22+
### Code Location
23+
24+
📂 **MCP Server Route**: [`lib/javascript/fullstack_demo/src/app/[transport]/route.ts`](../lib/javascript/fullstack_demo/src/app/[transport]/route.ts)
25+
26+
This file demonstrates:
27+
- Creating MCP tools with `createMcpHandler`
28+
- Defining tool schemas with Zod validation
29+
- Implementing authentication with `withMcpAuth`
30+
- Handling different transport mechanisms
31+
32+
### Quick Start
33+
34+
```bash
35+
cd lib/javascript/fullstack_demo
36+
npm install
37+
npm run dev
38+
39+
# In another terminal, connect an AI agent
40+
npx -y mcp-remote http://localhost:3000/mcp
41+
```
42+
43+
### Full Documentation
44+
45+
For detailed setup instructions and architecture details, see:
46+
- [MCP Quick Start Guide](../lib/javascript/fullstack_demo/docs/MCP_QUICKSTART.md)
47+
- [MCP Server Setup](../lib/javascript/fullstack_demo/docs/MCP_SERVER_SETUP.md)
48+
- [Main README](../lib/javascript/fullstack_demo/README.md#mcp-server---ai-agent-integration)

0 commit comments

Comments
 (0)