docs: lesson 7 + 8 on mcp #108

softchris · 2025-04-10T20:17:02Z

No description provided.

lessons/07-mcp/README.md

DanWahlin · 2025-05-15T16:28:13Z

lessons/07-mcp/README.md

+In this chapter, we've learned the following:
+
+- Model Context Protocol, MCP, is a great way to offload capabilties into servers instead of putting all your features in one place. This allows for your apps to stay small and focused. The added bonus is that different teams can manage different servers also. Thanks to MCP being a protocol this additionally means that anyone out there looking to share capabilities and can do so in a common format.
+- Additionally we looked into how to consume an MCP Server using the Inspector tool or a written client.


The other chapters have something like this at the end. Let's add that for this one too especially given MCP will be very new to most people.

## Self-Study resources - [Retrieval-Augmented Generation and Indexes](https://learn.microsoft.com/azure/ai-studio/concepts/retrieval-augmented-generation) - **Sample apps**: * [Serverless AI Chat with RAG](https://github.com/Azure-Samples/serverless-chat-langchainjs/) * [Ask Youtube: A RAG-based Youtube Q&A API](https://github.com/Azure-Samples/langchainjs-quickstart-demo) - [Full-length workshop: Create your own ChatGPT with RAG](https://moaw.dev/workshop/gh:azure-samples/azure-openai-rag-workshop/docs/workshop-qdrant.md)

lessons/07-mcp/README.md

DanWahlin · 2025-05-28T16:23:18Z

lessons/08-mcp-advanced/README.md

@@ -0,0 +1,268 @@
+# Lesson 8: MCP Part II


Let's add a specific title here since "Part II" doesn't provide any insights into the topic for users and won't help with SEO. One idea would be:

Lesson 8: Enhancing MCP Clients with Large Language Models

DanWahlin · 2025-05-28T16:28:43Z

lessons/08-mcp-advanced/README.md

@@ -0,0 +1,268 @@
+# Lesson 8: MCP Part II
+
+In our previous lesson, we learned how to create an MCP Server and how this is a good way to separate an AI app from its capabilities. We saw how we could add capabilities like tools and resources. Additionally, we showed how the server could be consumed by either an inspector tool or a written client. We've only scratched the surface of what MCP can do, and in this chapter we'll add an LLM to the client so you can see how this creates a better user experience.


Minor rephrasing for this paragraph:

In the previous lesson, we built an MCP Server and explored how it helps decouple an AI application's logic from its capabilities. We demonstrated how to add tools and resources as capabilities, and how the server could be accessed by either an inspector tool or a custom client. That was just the beginning. In this chapter, we’ll take things a step further by integrating a large language model (LLM) into the client—unlocking a more powerful and intuitive user experience.

DanWahlin · 2025-05-28T17:48:36Z

lessons/08-mcp-advanced/README.md

+## Narrative: Hedwig "Hedy" Lamarr
+
+> [!NOTE] 
+> _Our story so far. You are a mechanic from 1860s London. You were working on your automaton and received a letter from Charles Babbage that ended up taking you to a library where you picked up a time travel device. Throughout your travels in time you've ended up in Florence, where you met Leonardo Da Vinci. You also went to the Aztec empire and this is where the story continues._


Do we want to change this up a bit since the Aztec empire was in chapter 4?

DanWahlin · 2025-05-28T17:49:57Z

lessons/08-mcp-advanced/README.md

+> [!NOTE] 
+> While we recommend going through the story (it's fun!), [click here](#interact-with-hedy-lamarr) if you'd prefer to jump straight to the technical content.
+
+You once again travelled back to Ada's mansion. This time Ada was meeting you at the main gates.


US English versus British English but normally it's "traveled" with one L outside of the UK. :-)

DanWahlin · 2025-05-28T17:51:01Z

lessons/08-mcp-advanced/README.md

+
+**Ada Lovelace**: Well, how did it go?
+
+**You**: Good I think, we managed to get this app working, you showing the progress to Ada.


Not sure I understand this sentence - the "you showing the progress to Ada" part since Ada just talked to you. Can this be rephrased?

DanWahlin · 2025-05-28T17:52:57Z

lessons/08-mcp-advanced/README.md

+
+**You**: Good I think, we managed to get this app working, you showing the progress to Ada.
+
+**Ada Lovelace**: She takes the device up, tries it out and fiddles it and to herself murmurs, mm hm, ah I see, yeah, yeah no good. It won't do I'm afraid, she states a bit louder, lacks a certain finesse.


This needs to be rephrased. The "and fiddles it" doesn't flow. Maybe something like:

**Ada Lovelace**: She picks up the device, examines it closely, and mutters to herself, "Mmm-hmm… ah, I see… yeah… no, this won’t do." Then, speaking more audibly, she says, "I’m afraid it’s not quite right—it lacks a certain finesse."

DanWahlin · 2025-05-28T17:55:53Z

lessons/08-mcp-advanced/README.md

+
+**Ada Lovelace**: Right, I know just the person to help us. In fact, I'll come with you for this one, been too long since we met. *Time Beetle, Hollywood please, 1940, residence of Hedy Lamarr*.
+
+Everything went dark, colors swirling, moments later your eyes start to make out a scene, a man sitting by a piano next to a woman with dark brown and curly hair both speaking in an excited way gesticulating. 


Let's remove "gesticulating" since many reading this in English who don't have that as their first language may be confused.

Everything fades to black. Swirling colors rush past, and moments later, your vision begins to focus. You see a man seated at a piano, animatedly talking with a woman who has dark brown, curly hair. Both are gesturing excitedly as they speak.

DanWahlin · 2025-05-28T17:56:32Z

lessons/08-mcp-advanced/README.md

+  <img src="./assets/hedy-invention.jpeg" alt="Hedy Lamarr" width="600" />
+</div>
+
+The woman turned around to face Ada standing next to you to exclaim "Ada it is you, it's been far too long".


"Ada, it's you! It's been far too long".

DanWahlin · 2025-05-28T17:57:12Z

lessons/08-mcp-advanced/README.md

+
+**Ada Lovelace**: Hedwig dearest, working on your latest invention I assume?
+
+**Hedy Lamarr**: Yes, in fact George and I think we're on to something "frequency hopping" I probably shouldn't say anymore, who knows who's listening.


**Hedy Lamarr**: Yes, in fact George and I think we're on to something - "frequency hopping". I probably shouldn't say anymore, who knows who's listening.

DanWahlin · 2025-05-28T17:57:41Z

lessons/08-mcp-advanced/README.md

+
+**Hedy Lamarr**: I see, what can I do for you?
+
+**Ada Lovelace**: Actually, we need this device to work a bit better, ideas?


**Ada Lovelace**: Actually, we need this device to work a bit better. Any ideas?

DanWahlin · 2025-05-28T17:59:11Z

lessons/08-mcp-advanced/README.md

+
+**Ada Lovelace**: Actually, we need this device to work a bit better, ideas?
+
+**Hedy Lamarr**: She picked up the device, looked at it from different angles, and you say you've already separated the features from the communication part?


Since this mixes action with dialog we need quotes around part of it I think. Maybe something like:

**Hedy Lamarr**: She picked up the device and looked at it from different angles. "You say you've already separated the features from the communication part?"

DanWahlin · 2025-05-28T18:01:06Z

lessons/08-mcp-advanced/README.md

+
+**You**: Time Beetle, how do we do this?
+
+**Time Beetle**: You can improve the client you've created before with a large language model, LLM.


Time Beetle: You can enhance the client you created earlier by integrating a large language model, or LLM.

DanWahlin · 2025-05-28T18:14:41Z

lessons/08-mcp-advanced/README.md

+
+**Time Beetle**: You can improve the client you've created before with a large language model, LLM.
+
+> Hedy Lamarr was an extraordinary figure, known both for her Hollywood stardom and her remarkable contributions to technology. Born in Vienna, Austria, in 1914, she became a famous actress in the 1930s and 1940s, often referred to as the "most beautiful woman in the world".


Let's shorten this to the following:

Hedy Lamarr was an extraordinary figure, known both for her Hollywood stardom and her remarkable contributions to technology. Born in Vienna, Austria, in 1914, she became a famous actress in the 1930s and 1940s.

DanWahlin · 2025-05-28T18:15:40Z

lessons/08-mcp-advanced/README.md

+>
+> However, beyond her acting career, Lamarr was also a brilliant inventor. During World War II, she co-invented a radio guidance system for Allied torpedoes with composer George Antheil. This system used spread spectrum and frequency hopping technology to prevent the Axis powers from jamming the signals. Although it wasn't used during the war, this technology later became the foundation for modern wireless communication, including Wi-Fi, Bluetooth, and GPS.
+>
+> Lamarr's contributions to technology were not fully recognized during her lifetime, but today she is celebrated as a pioneer in the field. Her story is a fascinating blend of glamour and genius, showing that true innovation can come from the most unexpected places


Missing a period after "places" at the end of the paragraph.

DanWahlin · 2025-05-28T18:16:47Z

lessons/08-mcp-advanced/README.md

+> However, beyond her acting career, Lamarr was also a brilliant inventor. During World War II, she co-invented a radio guidance system for Allied torpedoes with composer George Antheil. This system used spread spectrum and frequency hopping technology to prevent the Axis powers from jamming the signals. Although it wasn't used during the war, this technology later became the foundation for modern wireless communication, including Wi-Fi, Bluetooth, and GPS.
+>
+> Lamarr's contributions to technology were not fully recognized during her lifetime, but today she is celebrated as a pioneer in the field. Her story is a fascinating blend of glamour and genius, showing that true innovation can come from the most unexpected places
+> Read more here about [Hedy Lamarr](https://en.wikipedia.org/wiki/Hedy_Lamarr) and here about [Marvin Minsky](https://en.wikipedia.org/wiki/Marvin_Minsky)


I don't see Marvin mentioned above so do we want to have a link to him here? Feels out of place. A link to george Antheil might work though since he's mentioned in the previous note.

He's mentioned in the part where Hedy speaks about selling war bonds, I can make that stand out a bit more where it's mentioned though

DanWahlin · 2025-05-28T18:18:39Z

lessons/08-mcp-advanced/README.md

+
+**Time Beetle**: "As I was saying, let's talk about how we can create a client that uses a large language model (LLM) to interact with the MCP server. The benefits are that it provides a better user experience and allows you to use natural language to interact with the server."
+
+How it would work on high level then is to have:


Here's how it would work at a high level:

DanWahlin · 2025-05-28T18:19:48Z

lessons/08-mcp-advanced/README.md

+**Time Beetle**: "As I was saying, let's talk about how we can create a client that uses a large language model (LLM) to interact with the MCP server. The benefits are that it provides a better user experience and allows you to use natural language to interact with the server."
+
+How it would work on high level then is to have:
+


Minor tweaks to make this flow better:

1. Client interacts with the MCP server to ask about available tools and resources. 1. At prompt time, the user writes a natural language prompt, which is then sent to the LLM in the client. 1. Client figures out which tool or which resource to call based on the prompt and the available tools and resources.

DanWahlin · 2025-05-28T18:22:22Z

lessons/08-mcp-advanced/README.md

+
+**You**: "Yes, it does! But how do I do that?"
+
+**Time Beetle**: "Let's improve the client we created earlier, let's describe the code changes in steps:


There's an end quote missing here.

Please check the consistency of when quotes are being used and when they aren't across all of the dialog sections. Sometimes they're there and sometimes they're not.

DanWahlin · 2025-05-28T18:23:37Z

lessons/08-mcp-advanced/README.md

+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+
+// import openai


I'm not sure what this comment is tied to code-wise? I don't see an import for the openai package.

DanWahlin · 2025-05-28T18:37:58Z

lessons/08-mcp-advanced/README.md

+// 3. instantiate openai client
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+  model: "gpt-3.5-turbo",


Totally fine to use gpt-3.5-turbo of course but do we want to go with a more modern/current option especially given that this is using GitHub models (free)?

good point, I'll try using gpt-4o-mini, it should be available

DanWahlin · 2025-05-28T18:40:31Z

lessons/08-mcp-advanced/README.md

+**Time Beetle**: "Glad you like it. It should be said though, that you might want to decide if you only want to show a tools response or if you want to show a generic response from the LLM as well. So your user might benefit from the following response strategy:
+
+- **Tools only**: If the LLM response is a tool, then call the tool and return the result.
+- **LLM only**: If the LLM response is not a tool, then return the LLM response as is.


Might add quotes around "as is".

- **LLM only**: If the LLM response is not a tool, then return the LLM response "as is".

DanWahlin · 2025-05-28T18:43:37Z

lessons/08-mcp-advanced/README.md

+
+> [!TIP]
+> For example, you can give the server the capability to retrieve information from an external web API, such as Wikipedia:  
+> `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(topic)}`


This should be "name" rather than "topic" right?

DanWahlin · 2025-05-28T18:45:57Z

lessons/08-mcp-advanced/solutions/solution-quiz.md

+
+   * **B. Creates a more natural conversation between user and server.**
+
+   While it's easier to maintain the client and the server by separating responsibilities, the great value of having the LLM on the client is that the user doesn't have to explicitly invoke server capabilities but can in a more seamless way either receive generic LLM responses or responses from an MCP Server.


A rephrased version of the paragraph:

Separating the client and server makes maintenance easier by clearly dividing responsibilities. However, the real advantage of placing the LLM on the client is that users can interact more naturally—without needing to explicitly call server capabilities. Instead, they can receive either general LLM responses or responses powered by the MCP Server, all in a seamless experience.

DanWahlin · 2025-05-28T18:46:59Z

lessons/08-mcp-advanced/README.md

+
+## Summary
+
+In this chapter, we've learned the following:


Let's change "we" to "you" where possible throughout the chapter. Makes it more personal. Having said that, if the other chapters still use "we" then leave it for consistency.

In this chapter, you've learned the following:

DanWahlin · 2025-05-28T18:47:55Z

lessons/08-mcp-advanced/README.md

+
+In this chapter, we've learned the following:
+
+- Clients augmented with an LLM provides a better user experience.


- Clients augmented with an LLM provide a better user experience

DanWahlin · 2025-05-28T18:48:18Z

lessons/08-mcp-advanced/README.md

+In this chapter, we've learned the following:
+
+- Clients augmented with an LLM provides a better user experience.
+- Responses from a server needs to be converted to a format the LLM can understand as a tool.


- Responses from a server need to be converted to a format the LLM can understand as a tool.

Chris and others added 2 commits April 10, 2025 21:16

first draft

9b269a1

adding support for client with llm

d0895c6

softchris changed the title ~~docs: lesson 7 - mcp~~ WIP: docs: lesson 7 - mcp Apr 11, 2025

softchris added 5 commits May 1, 2025 21:07

adding lesson 7

3547f19

completing lesson 7

ce7d880

completing lesson 8

e45c1d2

finishing lesson 8

292089c

first commit on lesson 9

eec34f9

softchris changed the title ~~WIP: docs: lesson 7 - mcp~~ docs: lesson 7 - mcp May 15, 2025

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 15, 2025

View reviewed changes

lessons/07-mcp/README.md Outdated Show resolved Hide resolved

DanWahlin reviewed May 28, 2025

View reviewed changes

softchris added 2 commits May 28, 2025 19:38

changes based on review

d2171bd

small fixes

d670b30

softchris merged commit 5a04324 into microsoft:main May 28, 2025
1 check passed

jkleinsc mentioned this pull request May 29, 2025

Malformed JSON in characters.json #132

Open

		@@ -0,0 +1,268 @@
		# Lesson 8: MCP Part II

		In our previous lesson, we learned how to create an MCP Server and how this is a good way to separate an AI app from its capabilities. We saw how we could add capabilities like tools and resources. Additionally, we showed how the server could be consumed by either an inspector tool or a written client. We've only scratched the surface of what MCP can do, and in this chapter we'll add an LLM to the client so you can see how this creates a better user experience.


		Ada Lovelace: Well, how did it go?

		You: Good I think, we managed to get this app working, you showing the progress to Ada.


		You: Good I think, we managed to get this app working, you showing the progress to Ada.

		Ada Lovelace: She takes the device up, tries it out and fiddles it and to herself murmurs, mm hm, ah I see, yeah, yeah no good. It won't do I'm afraid, she states a bit louder, lacks a certain finesse.


		Ada Lovelace: Right, I know just the person to help us. In fact, I'll come with you for this one, been too long since we met. Time Beetle, Hollywood please, 1940, residence of Hedy Lamarr.

		Everything went dark, colors swirling, moments later your eyes start to make out a scene, a man sitting by a piano next to a woman with dark brown and curly hair both speaking in an excited way gesticulating.


		Ada Lovelace: Hedwig dearest, working on your latest invention I assume?

		Hedy Lamarr: Yes, in fact George and I think we're on to something "frequency hopping" I probably shouldn't say anymore, who knows who's listening.


		Hedy Lamarr: I see, what can I do for you?

		Ada Lovelace: Actually, we need this device to work a bit better, ideas?


		Ada Lovelace: Actually, we need this device to work a bit better, ideas?

		Hedy Lamarr: She picked up the device, looked at it from different angles, and you say you've already separated the features from the communication part?


		You: Time Beetle, how do we do this?

		Time Beetle: You can improve the client you've created before with a large language model, LLM.


		Time Beetle: You can improve the client you've created before with a large language model, LLM.

		> Hedy Lamarr was an extraordinary figure, known both for her Hollywood stardom and her remarkable contributions to technology. Born in Vienna, Austria, in 1914, she became a famous actress in the 1930s and 1940s, often referred to as the "most beautiful woman in the world".


		Time Beetle: "As I was saying, let's talk about how we can create a client that uses a large language model (LLM) to interact with the MCP server. The benefits are that it provides a better user experience and allows you to use natural language to interact with the server."

		How it would work on high level then is to have:


		You: "Yes, it does! But how do I do that?"

		Time Beetle: "Let's improve the client we created earlier, let's describe the code changes in steps:


		* B. Creates a more natural conversation between user and server.

		While it's easier to maintain the client and the server by separating responsibilities, the great value of having the LLM on the client is that the user doesn't have to explicitly invoke server capabilities but can in a more seamless way either receive generic LLM responses or responses from an MCP Server.


		In this chapter, we've learned the following:

		- Clients augmented with an LLM provides a better user experience.

docs: lesson 7 + 8 on mcp #108

docs: lesson 7 + 8 on mcp #108

Uh oh!

Conversation

softchris commented Apr 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DanWahlin May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DanWahlin May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DanWahlin May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DanWahlin May 28, 2025 •

edited

Loading

DanWahlin May 28, 2025 •

edited

Loading

DanWahlin May 28, 2025 •

edited

Loading

DanWahlin May 28, 2025 •

edited

Loading