MCP TypeScript Starter
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., "@MCP TypeScript StarterShow me the available tools and resources."
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 TypeScript Starter
A feature-complete Model Context Protocol (MCP) server template in TypeScript. This starter demonstrates all major MCP features with clean, production-ready code.
📚 Documentation
Related MCP server: MCP Server Template
✨ Features
Category | Feature | Description |
Tools |
| Basic tool with annotations |
| Tool with structured output schema | |
| Tool that invokes LLM sampling | |
| Tool with 5-second progress updates | |
| Dynamically loads a new tool | |
Resources |
| Static informational resource |
| File-based markdown resource | |
Templates |
| Personalized greeting |
| Data lookup by ID | |
Prompts |
| Greeting in various styles |
| Code review with focus areas |
🚀 Quick Start
Prerequisites
npm or pnpm
Installation
# Clone the repository
git clone https://github.com/SamMorrowDrums/mcp-typescript-starter.git
cd mcp-typescript-starter
# Install dependencies
npm install
# Build
npm run buildRunning the Server
stdio transport (for local development):
npm run start:stdioHTTP transport (for remote/web deployment):
npm run start:http
# Server runs on http://localhost:3000🔧 VS Code Integration
This project includes VS Code configuration for seamless development:
Open the project in VS Code
The MCP configuration is in
.vscode/mcp.jsonBuild with
Ctrl+Shift+B(orCmd+Shift+Bon Mac)Test the server using VS Code's MCP tools
Using DevContainers
Install the Dev Containers extension
Open command palette: "Dev Containers: Reopen in Container"
Everything is pre-configured and ready to use!
📁 Project Structure
.
├── src/
│ ├── tools.ts # Tool definitions (hello, get_weather, ask_llm, etc.)
│ ├── resources.ts # Resource and template definitions
│ ├── prompts.ts # Prompt definitions
│ ├── server.ts # Server orchestration (combines all modules)
│ ├── stdio.ts # stdio transport entrypoint
│ └── http.ts # HTTP transport entrypoint
├── .vscode/
│ ├── mcp.json # MCP server configuration
│ ├── tasks.json # Build/run tasks
│ └── extensions.json
├── .devcontainer/
│ └── devcontainer.json
├── package.json
├── tsconfig.json
├── .prettierrc # Prettier configuration
└── eslint.config.js🛠️ Development
# Development mode with live reload
npm run dev
# Build for production
npm run build
# Format code
npm run format
# Lint
npm run lint
# Clean build
npm run clean && npm run buildLive Reload
The npm run dev command uses tsx watch for instant reloads during development.
Changes to any .ts file will automatically restart the server.
🔍 MCP Inspector
The MCP Inspector is an essential development tool for testing and debugging MCP servers.
Running Inspector
npx @modelcontextprotocol/inspector -- npx tsx src/stdio.tsWhat Inspector Provides
Tools Tab: List and invoke all registered tools with parameters
Resources Tab: Browse and read resources and templates
Prompts Tab: View and test prompt templates
Logs Tab: See JSON-RPC messages between client and server
Schema Validation: Verify tool input/output schemas
Debugging Tips
Start Inspector before connecting your IDE/client
Use the "Logs" tab to see exact request/response payloads
Test tool annotations are exposed correctly
Verify progress notifications appear for
long_task
📖 Feature Examples
Tool with Annotations
server.tool(
"hello",
{
title: "Say Hello",
description: "A friendly greeting tool",
annotations: { readOnlyHint: true },
},
{ name: z.string() },
async ({ name }) => ({
content: [{ type: "text", text: `Hello, ${name}!` }],
})
);Resource Template
server.resourceTemplate(
"greeting://{name}",
{ name: "Personalized Greeting", mimeType: "text/plain" },
async ({ name }) => ({
contents: [{
uri: `greeting://${name}`,
text: `Hello, ${name}!`,
}],
})
);Tool with Progress Updates
server.tool(
"long_task",
{ title: "Long Task" },
{ taskName: z.string() },
async ({ taskName }, { sendProgress }) => {
for (let i = 0; i < 5; i++) {
await sendProgress({ progress: i / 5, total: 1.0 });
await sleep(1000);
}
return { content: [{ type: "text", text: "Done!" }] };
}
);🔐 Environment Variables
Copy .env.example to .env and configure:
cp .env.example .envVariable | Description | Default |
| HTTP server port |
|
🤝 Contributing
Contributions welcome! Please ensure your changes maintain feature parity with other language starters.
📄 License
MIT License - see LICENSE for details.
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/SamMorrowDrums/mcp-typescript-starter'
If you have feedback or need assistance with the MCP directory API, please join our Discord server