Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Notes Manageradd a note about meeting notes with tags work and important"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP Server: Notes Manager (TypeScript Starter)
A simple MCP (Model Context Protocol) server that manages notes. This is the companion repository for the Gheware DevOps AI YouTube tutorial: "Build Your Own MCP Server (TypeScript)".
What You'll Learn
How to create an MCP server from scratch
Implementing TOOLs (operations AI can perform)
Implementing RESOURCEs (data AI can read)
Testing with Claude Desktop and MCP Inspector
Features
Tools (AI Operations)
Tool | Description |
| Create a new note with title, content, and tags |
| List all notes with IDs and titles |
| Search notes by title, content, or tags |
| Delete a note by ID |
Resources (AI Data Access)
URI | Description |
| JSON list of all notes |
| Individual note by ID |
Quick Start
Prerequisites
Node.js 18+
npm or yarn
Claude Desktop (for testing)
Installation
# Clone the repository
git clone https://github.com/brainupgrade-in/mcp-server-typescript-starter.git
cd mcp-server-typescript-starter
# Install dependencies
npm install
# Build the project
npm run buildTest with MCP Inspector
npm run inspectorThis opens a browser-based inspector to test your tools and resources.
Configure Claude Desktop
Add this to your Claude Desktop config file:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json
{
"mcpServers": {
"notes": {
"command": "node",
"args": ["/absolute/path/to/mcp-server-typescript-starter/dist/index.js"]
}
}
}Restart Claude Desktop after saving.
Usage Examples
Once connected to Claude Desktop, try these prompts:
"Add a note about Docker networking with tags devops and docker"
"List all my notes"
"Search for notes about devops"
"Delete the welcome note"Project Structure
mcp-server-typescript-starter/
├── src/
│ └── index.ts # Main MCP server code
├── dist/ # Compiled JavaScript (after build)
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── README.md # This fileCode Walkthrough
1. Server Setup
const server = new Server(
{ name: "notes-manager", version: "1.0.0" },
{ capabilities: { tools: {}, resources: {} } }
);2. Defining a Tool
server.setRequestHandler(ListToolsRequestSchema, async () => ({
tools: [{
name: "add_note",
description: "Create a new note",
inputSchema: {
type: "object",
properties: {
title: { type: "string", description: "Note title" },
content: { type: "string", description: "Note content" }
},
required: ["title", "content"]
}
}]
}));3. Handling Tool Calls
server.setRequestHandler(CallToolRequestSchema, async (request) => {
const { name, arguments: args } = request.params;
if (name === "add_note") {
// Create the note...
return { content: [{ type: "text", text: "Note created!" }] };
}
});4. Exposing Resources
server.setRequestHandler(ListResourcesRequestSchema, async () => ({
resources: [{
uri: "notes://list",
name: "All Notes",
mimeType: "application/json"
}]
}));Next Steps
Add persistence (save notes to a file or database)
Implement Prompts (pre-defined instruction templates)
Add authentication for multi-user support
Deploy as a standalone service
Resources
Video Tutorial
Watch the full tutorial on Gheware DevOps AI:
Build Your Own MCP Server ← This tutorial
License
MIT License - Feel free to use this as a starting point for your own MCP servers!
Made with ❤️ by Gheware DevOps AI