Skip to content

Commit ad677a0

Browse files
authored
Merge branch 'main' into softchris-patch-2
2 parents 3bad904 + f6e3e20 commit ad677a0

File tree

12 files changed

+730
-37
lines changed

12 files changed

+730
-37
lines changed

02-Security/readme.md

Lines changed: 102 additions & 21 deletions
Large diffs are not rendered by default.

03-GettingStarted/README.md

Lines changed: 389 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,392 @@ This section consists of several lessons:
66

77
- **Client with LLM**, an even better way of writing a client is by adding an LLM to it so it can "negotiate" with your server on what to do, [to the lesson](/03-GettingStarted/03-llm-client/README.md)
88

9-
- **Consuming a server GitHub Copilot Agent mode in Visual Studio Code**. Here, we're looking at running our MCP Server from within Visual Studio Code, [to the lesson](/03-GettingStarted/04-vscode/README.md)
9+
- **Consuming a server GitHub Copilot Agent mode in Visual Studio Code**. Here, we're looking at running our MCP Server from within Visual Studio Code, [to the lesson](/03-GettingStarted/04-vscode/README.md)
10+
11+
The Model Context Protocol (MCP) is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications - it provides a standardized way to connect AI models to different data sources and tools.
12+
13+
## Learning Objectives
14+
15+
By the end of this lesson, you will be able to:
16+
17+
- Set up development environments for MCP in C#, Java, Python, TypeScript, and JavaScript
18+
- Build and deploy basic MCP servers with custom features (resources, prompts, and tools)
19+
- Create host applications that connect to MCP servers
20+
- Test and debug MCP implementations
21+
- Understand common setup challenges and their solutions
22+
- Connect your MCP implementations to popular LLM services
23+
24+
## Setting Up Your MCP Environment
25+
26+
Before you begin working with MCP, it's important to prepare your development environment and understand the basic workflow. This section will guide you through the initial setup steps to ensure a smooth start with MCP.
27+
28+
### Prerequisites
29+
30+
Before diving into MCP development, ensure you have:
31+
32+
- **Development Environment**: For your chosen language (C#, Java, Python, TypeScript, or JavaScript)
33+
- **IDE/Editor**: Visual Studio, Visual Studio Code, IntelliJ, Eclipse, PyCharm, or any modern code editor
34+
- **Package Managers**: NuGet, Maven/Gradle, pip, or npm/yarn
35+
- **API Keys**: For any AI services you plan to use in your host applications
36+
37+
## To set up an MCP Client and MCP Server in Visual Studio Code, follow these steps:
38+
39+
Getting started with MCP in Visual Studio Code is a straightforward process that enables rapid prototyping and testing of AI-powered tools. By following the steps below, you'll set up both an MCP client and server, allowing you to explore the protocol's capabilities in a hands-on way. Let's walk through the essential setup process.
40+
41+
1. **Install Required Dependencies**:
42+
43+
- Ensure you have Python (version 3.12.9 or later) and Node.js (version 22.14.0 or later) installed on your machine.
44+
- Install MCP server packages using npm:
45+
46+
```bash
47+
npm install -g @modelcontextprotocol/server-filesystem
48+
npm install -g @modelcontextprotocol/server-postgres
49+
```
50+
51+
2 **Configure MCP Servers**:
52+
- Open your workspace in Visual Studio Code.
53+
- Create a `.vscode/mcp.json` file in your workspace folder to configure MCP servers. Example configuration:
54+
```json
55+
{
56+
"servers": {
57+
"mcp-server-time": {
58+
"command": "python",
59+
"args": ["-m", "mcp_server_time", "--local-timezone=Europe/London"],
60+
"env": {}
61+
}
62+
}
63+
}
64+
```
65+
66+
4. **Enable MCP Discovery**:
67+
- Go to `File -> Preferences -> Settings` in Visual Studio Code.
68+
- Search for "MCP" and enable `chat.mcp.discovery.enabled` in the settings.json file.
69+
70+
5. **Start MCP Server**:
71+
- Run the MCP server locally using the configured command.
72+
- Test the server by sending requests through the Copilot Agent Mode in Visual Studio Code.
73+
74+
6. **Use MCP Client**:
75+
- Open the Copilot Chat window in Visual Studio Code.
76+
- Switch to Agent Mode and interact with the MCP server tools.
77+
78+
79+
### Official SDKs
80+
81+
MCP provides official SDKs for multiple languages:
82+
- [C# SDK](https://github.com/modelcontextprotocol/csharp-sdk) - Maintained in collaboration with Microsoft
83+
- [Java SDK](https://github.com/modelcontextprotocol/java-sdk) - Maintained in collaboration with Spring AI
84+
- [TypeScript SDK](https://github.com/modelcontextprotocol/typescript-sdk) - The official TypeScript implementation
85+
- [Python SDK](https://github.com/modelcontextprotocol/python-sdk) - The official Python implementation
86+
- [Kotlin SDK](https://github.com/modelcontextprotocol/kotlin-sdk) - The official Kotlin implementation
87+
- [Swift SDK](https://github.com/modelcontextprotocol/swift-sdk) - Maintained in collaboration with Loopwork AI
88+
- [Rust SDK](https://github.com/modelcontextprotocol/rust-sdk) - The official Rust implementation
89+
90+
### Installation and Setup
91+
92+
### Visual Studio Code GitHub Copilot
93+
94+
<table>
95+
<table>
96+
<tr>
97+
<th align="left">GitHub</th>
98+
<td><a href="https://github.com/microsoft/vscode">https://github.com/microsoft/vscode</a></td>
99+
</tr>
100+
<tr>
101+
<th align="left">Website</th>
102+
<td><a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></td>
103+
</tr>
104+
</table>
105+
<table>
106+
<tr><th align="left">License</th><td>MIT</td></tr>
107+
<tr><th align="left">Type</th><td>Desktop app, Web app</td></tr>
108+
<tr><th align="left">Platforms</th><td>Windows, MacOS, Linux, Web</td></tr>
109+
<tr><th align="left">Pricing</th><td>Freemium (GitHub Copilot subscription)</td></tr>
110+
<tr><th align="left">Programming Languages</th><td>TypeScript</td></tr>
111+
</table>
112+
113+
Visual Studio Code integrates MCP with GitHub Copilot through [agent mode](https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode), allowing direct interaction with MCP-provided tools within your agentic coding workflow. Configure servers in Claude Desktop, workspace or user settings, with guided MCP installation and secure handling of keys in input variables to avoid leaking hard-coded keys.
114+
115+
**Key Features:**
116+
- Support for stdio and server-sent events (SSE) transport
117+
- Per-session selection of tools per agent session for optimal performance
118+
- Easy server debugging with restart commands and output logging
119+
- Tool calls with editable inputs and always-allow toggle
120+
- Integration with existing Visual Studio Code extension system to register MCP servers from extensions
121+
122+
#### Command-line configuration
123+
124+
You can also use the Visual Studio Code command-line interface to add an MCP server to your user profile or to a workspace.
125+
126+
To add an MCP server to your user profile, use the --add-mcp command line option, and provide the JSON server configuration in the form {\"name\":\"server-name\",\"command\":...}.
127+
128+
```
129+
code --add-mcp "{\"name\":\"my-server\",\"command\": \"uvx\",\"args\": [\"mcp-server-fetch\"]}"
130+
```
131+
<details>
132+
<summary>Screenshots</summary>
133+
134+
![Guided MCP server configuration in Visual Studio Code](../images/03-GettingStarted/chat-mode-agent.png)
135+
![Tool selection per agent session](../images/03-GettingStarted/agent-mode-select-tools.png)
136+
![Easily debug errors during MCP development](../images/03-GettingStarted/mcp-list-servers.png)
137+
</details>
138+
139+
#### TypeScript/JavaScript
140+
141+
To get started with MCP development in TypeScript or JavaScript, install the official SDKs using npm as shown below:
142+
143+
```bash
144+
# For server development
145+
npm install @modelcontextprotocol/typescript-server-sdk
146+
147+
# For client development
148+
npm install @modelcontextprotocol/typescript-client-sdk
149+
```
150+
151+
#### Python
152+
153+
To get started with MCP development in Python, install the official SDKs using pip as shown below:
154+
155+
```bash
156+
# For server development
157+
pip install mcp-server-sdk
158+
159+
# For client development
160+
pip install mcp-client-sdk
161+
```
162+
163+
#### C#
164+
165+
To get started with MCP development in C#, install the official SDK using one of the following methods:
166+
167+
```bash
168+
# Using NuGet Package Manager
169+
Install-Package ModelContextProtocol.SDK
170+
171+
# Using .NET CLI
172+
dotnet add package ModelContextProtocol.SDK
173+
```
174+
175+
#### Java
176+
To get started with MCP development in Java, add the official SDK to your project using Maven or Gradle as shown below:
177+
178+
```bash
179+
# Using Maven
180+
<dependency>
181+
<groupId>io.modelcontextprotocol</groupId>
182+
<artifactId>mcp-sdk</artifactId>
183+
<version>latest</version>
184+
</dependency>
185+
186+
# Using Gradle
187+
implementation 'io.modelcontextprotocol:mcp-sdk:latest'
188+
```
189+
190+
### Basic MCP Server Structure
191+
192+
An MCP server typically includes:
193+
194+
- **Server Configuration**: Setup port, authentication, and other settings
195+
- **Resources**: Data and context made available to LLMs
196+
- **Tools**: Functionality that models can invoke
197+
- **Prompts**: Templates for generating or structuring text
198+
199+
Here's a simplified example in TypeScript:
200+
201+
```typescript
202+
import { Server, Tool, Resource } from "@modelcontextprotocol/typescript-server-sdk";
203+
204+
// Create a new MCP server
205+
const server = new Server({
206+
port: 3000,
207+
name: "Example MCP Server",
208+
version: "1.0.0"
209+
});
210+
211+
// Register a tool
212+
server.registerTool({
213+
name: "calculator",
214+
description: "Performs basic calculations",
215+
parameters: {
216+
expression: {
217+
type: "string",
218+
description: "The math expression to evaluate"
219+
}
220+
},
221+
handler: async (params) => {
222+
const result = eval(params.expression);
223+
return { result };
224+
}
225+
});
226+
227+
// Start the server
228+
server.start();
229+
```
230+
231+
In the preceding code we:
232+
233+
- Import the necessary classes from the MCP TypeScript SDK.
234+
- Create and configure a new MCP server instance.
235+
- Register a custom tool (`calculator`) with a handler function.
236+
- Start the server to listen for incoming MCP requests.
237+
238+
## Testing and Debugging
239+
240+
Before you begin testing your MCP server, it's important to understand the available tools and best practices for debugging. Effective testing ensures your server behaves as expected and helps you quickly identify and resolve issues. The following section outlines recommended approaches for validating your MCP implementation.
241+
242+
### Testing MCP Servers
243+
244+
MCP provides tools to help you test and debug your servers:
245+
246+
#### Using MCP Inspector
247+
248+
The [MCP Inspector](https://github.com/modelcontextprotocol/inspector) is a visual testing tool that helps you:
249+
250+
1. **Discover Server Capabilities**: Automatically detect available resources, tools, and prompts
251+
2. **Test Tool Execution**: Try different parameters and see responses in real-time
252+
3. **View Server Metadata**: Examine server info, schemas, and configurations
253+
254+
```bash
255+
# Installing MCP Inspector
256+
npm install -g @modelcontextprotocol/inspector
257+
258+
# Running the Inspector
259+
mcp-inspector
260+
```
261+
262+
When you run the above commands, the MCP Inspector will launch a local web interface in your browser. You can expect to see a dashboard displaying your registered MCP servers, their available tools, resources, and prompts. The interface allows you to interactively test tool execution, inspect server metadata, and view real-time responses, making it easier to validate and debug your MCP server implementations.
263+
264+
#### Manual Testing
265+
266+
You can test MCP servers directly using HTTP requests:
267+
268+
```bash
269+
# Example: Test server metadata
270+
curl http://localhost:3000/v1/metadata
271+
272+
# Example: Execute a tool
273+
curl -X POST http://localhost:3000/v1/tools/execute \
274+
-H "Content-Type: application/json" \
275+
-d '{"name": "calculator", "parameters": {"expression": "2+2"}}'
276+
```
277+
278+
#### Unit Testing
279+
280+
Create unit tests for your tools and resources to ensure they work as expected:
281+
282+
```javascript
283+
// Example using Jest
284+
test('Calculator tool returns correct result', async () => {
285+
const response = await calculatorTool.handler({ expression: '5+5' });
286+
expect(response.result).toBe(10);
287+
});
288+
```
289+
290+
### Common Setup Issues and Solutions
291+
292+
| Issue | Possible Solution |
293+
|-------|-------------------|
294+
| Connection refused | Check if server is running and port is correct |
295+
| Tool execution errors | Review parameter validation and error handling |
296+
| Authentication failures | Verify API keys and permissions |
297+
| Schema validation errors | Ensure parameters match the defined schema |
298+
| Server not starting | Check for port conflicts or missing dependencies |
299+
| CORS errors | Configure proper CORS headers for cross-origin requests |
300+
| Authentication issues | Verify token validity and permissions |
301+
302+
## Deploying MCP Servers
303+
304+
Deploying your MCP server allows others to access its tools and resources beyond your local environment. There are several deployment strategies to consider, depending on your requirements for scalability, reliability, and ease of management. Below you'll find guidance for deploying MCP servers locally, in containers, and to the cloud.
305+
306+
### Local Development
307+
308+
For local development and testing, you can run MCP servers directly on your machine:
309+
310+
1. **Start the server process**: Run your MCP server application
311+
2. **Configure networking**: Ensure the server is accessible on the expected port
312+
3. **Connect clients**: Use local connection URLs like `http://localhost:3000`
313+
314+
```bash
315+
# Example: Running a TypeScript MCP server locally
316+
npm run start
317+
# Server running at http://localhost:3000
318+
```
319+
320+
### Container Deployment
321+
322+
For production deployments, containerization offers several advantages:
323+
324+
1. **Create a Dockerfile**:
325+
326+
```dockerfile
327+
FROM node:18
328+
WORKDIR /app
329+
COPY package*.json ./
330+
RUN npm install
331+
COPY . .
332+
EXPOSE 3000
333+
CMD ["npm", "start"]
334+
```
335+
336+
2. **Build and run the container**:
337+
338+
```bash
339+
# Build the container
340+
docker build -t my-mcp-server .
341+
342+
# Run the container
343+
docker run -p 3000:3000 my-mcp-server
344+
```
345+
346+
### Cloud Deployment
347+
348+
MCP servers can be deployed to various cloud platforms:
349+
350+
1. **Serverless Functions**: Deploy lightweight MCP servers as serverless functions
351+
2. **Container Services**: Use services like Azure Container Apps, AWS ECS, or Google Cloud Run
352+
3. **Kubernetes**: Deploy and manage MCP servers in Kubernetes clusters for high availability
353+
354+
```bash
355+
# Example: Deploying to Azure Container Apps
356+
az containerapp create \
357+
--name my-mcp-server \
358+
--resource-group my-resources \
359+
--image my-registry/my-mcp-server:latest \
360+
--target-port 3000 \
361+
--ingress external
362+
```
363+
364+
365+
## Key Takeaways
366+
367+
- Setting up an MCP development environment is straightforward with language-specific SDKs
368+
- Building MCP servers involves creating and registering tools with clear schemas
369+
- MCP clients connect to servers and models to leverage extended capabilities
370+
- Testing and debugging are essential for reliable MCP implementations
371+
- Deployment options range from local development to cloud-based solutions
372+
373+
## Samples
374+
375+
- [Java Calculator](./samples/java/calculator/README.md)
376+
- [.Net Calculator](./samples/csharp/)
377+
- [JavaScript Calculator](./samples/javascript/README.md)
378+
- [TypeScript Calculator](./samples/typescript/README.md)
379+
- [Python Calculator](./samples/python/)
380+
381+
## Exercise
382+
383+
Create a simple MCP server with a tool of your choice:
384+
1. Implement the tool in your preferred language (.NET, Java, Python, or JavaScript)
385+
2. Define input parameters and return values
386+
3. Build a simple client that uses your tool
387+
4. Test the implementation with various inputs
388+
389+
## Additional Resources
390+
391+
- [MCP GitHub Repository](https://github.com/microsoft/mcp-for-beginners)
392+
393+
---
394+
395+
## What's next
396+
397+
Next: [Practical Implementation](/04-PracticalImplementation/README.md)

0 commit comments

Comments
 (0)