MCP TypeScript Starter
Click on "Deploy 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: template-mcp
β¨ 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 deployed
Maintenance
Related MCP Connectors
A simple Typescript MCP server built using the official MCP Typescript SDK and smithery/cli. Thisβ¦
A TypeScript MCP server for Home Assistant, enabling programmatic management of entities, automatiβ¦
An MCP server that let you interact with Cycloid.io Internal Development Portal and Platform
Nifty's MCP server β exposes tasks, projects, messages, and files as tools for AI agents.
Related MCP Servers
- AlicenseAqualityNot gradedmaintenanceA production-ready TypeScript template for building MCP servers with dual transport support (stdio/HTTP), OAuth 2.1 foundations, SQLite caching, observability, and security features including PII sanitization and rate limiting.46 npm-
- FlicenseAqualityDmaintenanceA TypeScript MCP server template with Zod validation, dual transport (stdio/HTTP), and modular architecture for building MCP-compatible tools, resources, and prompts.11-
- FlicenseCqualityCmaintenanceA TypeScript template for building MCP servers with placeholder tools and dual transport support (stdio + SSE).5-
- FlicenseCqualityDmaintenanceA TypeScript template for building MCP servers with stdio/SSE transport and easy tool registration.5-