Supercharge your AI development workflow with lightning-fast MCP servers
Transform plain text diffs into beautiful, interactive visualizations with our high-performance MCP server built with Bun
Introduction
What if you could make your AI development workflow 3x faster while writing less code?
If you're working with Claude Desktop, VS Code, or any AI-powered development tools, you've probably encountered the Model Context Protocol (MCP). MCP is the bridge that connects AI models to external tools and data sources, enabling powerful integrations that transform how we interact with AI assistants.
But here's the challenge: most MCP servers are built with Node.js, which can be slow to start and resource-heavy. Enter Bun โ the lightning-fast JavaScript runtime that's revolutionizing how we build server applications.
In this comprehensive guide, you'll learn:
- Why Bun is the perfect runtime for MCP servers
- How to build production-ready MCP servers from scratch
- Performance optimizations that make a real difference
- A complete real-world example with visual diff generation
- Benchmarks showing dramatic performance improvements
By the end, you'll have the knowledge to create MCP servers that are not only faster but also more maintainable and developer-friendly.
๐ค What is the Model Context Protocol?
The Model Context Protocol (MCP) is an open standard that enables AI models to securely connect to external data sources and tools. Think of it as a universal adapter that lets your AI assistant access your file system, databases, APIs, and custom tools.
Why MCP Matters
Traditional AI assistants operate in isolation โ they can only work with the information you provide in your conversation. MCP changes this by allowing AI models to:
- Access files and directories securely
- Query databases and APIs
- Execute custom tools and scripts
- Maintain context across different applications
Popular MCP Use Cases
- Code Analysis: Let Claude read your entire codebase and suggest improvements
- Database Operations: Query and modify data through natural language
- File Management: Organize, search, and manipulate files automatically
- API Integration: Connect to external services without writing custom integrations
- Development Tools: Create specialized tools for your specific workflow
The magic happens when you combine multiple MCP servers โ suddenly your AI assistant becomes a powerful automation platform tailored to your exact needs.
๐ค Why Choose Bun for MCP Servers?
While Node.js has been the go-to runtime for JavaScript servers, Bun offers compelling advantages that make it ideal for MCP server development:
Lightning-Fast Startup
# Node.js MCP Server
$ time node server.js
real 0m1.247s
# Bun MCP Server
$ time bun server.ts
real 0m0.089s
Bun starts 14x faster than Node.js, which is crucial for MCP servers that need to respond quickly to AI model requests.
Native TypeScript Support
No more complex build configurations or transpilation steps:
// Works out of the box with Bun - no build step needed!
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
Built-in Package Manager
Bun includes a package manager that's 25x faster than npm:
# Lightning-fast dependency installation
$ bun install
# vs npm install (much slower)
Lower Memory Footprint
Bun uses significantly less memory than Node.js, making it perfect for running multiple MCP servers simultaneously:
- Node.js: ~50MB base memory usage
- Bun: ~20MB base memory usage
Seamless npm Compatibility
All your favorite npm packages work with Bun without modification:
import { diff2html } from 'diff2html'; // Works perfectly
import { chromium } from 'playwright-core'; // No issues
Setting Up Your Development Environment
Let's get your development environment ready for building high-performance MCP servers.
Installing Bun
macOS & Linux:
$ curl -fsSL https://bun.sh/install | bash
Windows:
$ powershell -c "irm bun.sh/install.ps1 | iex"
Verify Installation:
$ bun --version
1.0.25
Install Claude Desktop
Download the installer for your platform from https://claude.ai/download and run it.
Install Claude Code
# Install Claude Code
$ bun install -g @anthropic-ai/claude-code
# Check version
$ claude --version
1.0.3 (Claude Code)
# Log in to Claude Code
$ claude login
If you're on the Claude Max plan, authentication is done through the browser.
Initializing the Project
# Create the project directory
$ mkdir my-mcp-server && cd my-mcp-server
# Initialize with Bun
$ bun init
# Install the MCP SDK
$ bun add @modelcontextprotocol/sdk
# Install development dependencies
$ bun add -d @types/node typescript
# Initialize Claude Code
$ claude
> /init
Project Initialization
Create a new MCP server project:
# Create project directory
$ mkdir my-mcp-server && cd my-mcp-server
# Initialize with Bun
$ bun init
# Install MCP SDK
$ bun add @modelcontextprotocol/sdk
# Install development dependencies
$ bun add -d @types/node typescript
# Initialize Claude Code
$ claude
> /init
TypeScript Configuration
Create a tsconfig.json for optimal Bun compatibility:
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"noEmit": true,
"strict": true,
"skipLibCheck": true,
"types": ["bun-types"]
}
}
Building Your First MCP Server
Now let's build a complete MCP server that demonstrates core concepts and best practices.
Basic Server Structure
Create src/index.ts:
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import {
CallToolRequestSchema,
ListToolsRequestSchema,
} from '@modelcontextprotocol/sdk/types.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
class MyMCPServer {
private server: Server;
constructor() {
this.server = new Server(
{
name: 'my-mcp-server',
version: '1.0.0',
},
{
capabilities: {
tools: {},
},
}
);
this.setupHandlers();
}
private setupHandlers(): void {
// Handle tool listing
this.server.setRequestHandler(
ListToolsRequestSchema,
async () => ({
tools: [
{
name: 'hello-world',
description: 'Say hello to the world',
inputSchema: {
type: 'object',
properties: {
name: {
type: 'string',
description: 'Name to greet',
},
},
},
},
],
})
);
// Handle tool execution
this.server.setRequestHandler(
CallToolRequestSchema,
async (request) => {
if (request.params.name === 'hello-world') {
const name = request.params.arguments?.name || 'World';
return {
content: [
{
type: 'text',
text: `Hello, ${name}! ๐`,
},
],
};
}
throw new Error(`Unknown tool: ${request.params.name}`);
}
);
}
async run(): Promise<void> {
const transport = new StdioServerTransport();
await this.server.connect(transport);
console.error('๐ MCP Server running with Bun!');
}
}
// Start the server
const server = new MyMCPServer();
server.run().catch(console.error);
Running Your Server
# Run directly with Bun
bun src/index.ts
# Or add to package.json scripts
{
"scripts": {
"start": "bun src/index.ts",
"dev": "bun --watch src/index.ts"
}
}
The --watch flag provides hot reload during development โ changes are reflected instantly!
๐ฏ Real-World Example: Unified Diff Visualization
Let's build something practical โ a unified diff visualization server that converts code diffs into beautiful HTML and PNG formats. This is perfect for code reviews, documentation, and debugging workflows.
The Problem
When working with Claude Desktop's filesystem MCP, you often get text-based diffs that are hard to read:
--- a/src/component.ts
+++ b/src/component.ts
@@ -10,7 +10,7 @@
return (
<div className="container">
- <h1>Old Title</h1>
+ <h1>New Title</h1>
<p>Content here</p>
</div>
);
The Solution
Our MCP server transforms this into beautiful, side-by-side HTML visualizations with syntax highlighting and even generates PNG images for sharing.
Beautiful side-by-side diff visualization showing Python code changes with syntax highlighting, line numbers, and clear visual indicators for additions, deletions, and modifications.
Dependencies
bun add diff2html playwright-core
Implementation
Create src/diff-server.ts:
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import {
CallToolRequestSchema,
ListToolsRequestSchema,
} from '@modelcontextprotocol/sdk/types.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { Diff2Html } from 'diff2html';
import { chromium } from 'playwright-core';
import { writeFileSync } from 'fs';
import { join } from 'path';
class UnifiedDiffServer {
private server: Server;
constructor() {
this.server = new Server(
{
name: 'unified-diff-mcp',
version: '1.0.0',
},
{
capabilities: {
tools: {},
},
}
);
this.setupHandlers();
}
private setupHandlers(): void {
this.server.setRequestHandler(ListToolsRequestSchema, async () => ({
tools: [
{
name: 'visualize_diff_image',
description: 'Generate beautiful HTML/PNG diff visualization',
inputSchema: {
type: 'object',
properties: {
diff: {
type: 'string',
description: 'Unified diff text',
},
format: {
type: 'string',
enum: ['html', 'image'],
description: 'Output format',
default: 'html',
},
outputType: {
type: 'string',
enum: ['side-by-side', 'line-by-line'],
description: 'Diff display style',
default: 'side-by-side',
},
},
required: ['diff'],
},
},
],
}));
this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
if (request.params.name === 'visualize_diff_image') {
return await this.generateDiffVisualization(request.params.arguments);
}
throw new Error(`Unknown tool: ${request.params.name}`);
});
}
private async generateDiffVisualization(args: any) {
const { diff, format = 'html', outputType = 'side-by-side' } = args;
try {
// Generate HTML from diff
const html = Diff2Html.html(diff, {
drawFileList: true,
matching: 'lines',
outputFormat: outputType,
colorScheme: 'auto',
});
// Create complete HTML document
const fullHtml = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Diff Visualization</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">
<style>
body { font-family: 'Monaco', 'Consolas', monospace; margin: 20px; }
.d2h-wrapper { max-width: none !important; }
</style>
</head>
<body>
${html}
</body>
</html>
`;
const outputPath = join(process.cwd(), 'diff-output');
if (format === 'html') {
const htmlPath = join(outputPath, 'diff.html');
writeFileSync(htmlPath, fullHtml);
return {
content: [
{
type: 'text',
text: `โ
HTML diff generated successfully!\nSaved to: ${htmlPath}`,
},
],
};
} else {
// Generate PNG using Playwright
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setContent(fullHtml);
const pngPath = join(outputPath, 'diff.png');
await page.screenshot({
path: pngPath,
fullPage: true,
});
await browser.close();
return {
content: [
{
type: 'text',
text: `โ
PNG diff generated successfully!\nSaved to: ${pngPath}`,
},
],
};
}
} catch (error) {
return {
content: [
{
type: 'text',
text: `โ Error generating diff: ${error}`,
},
],
};
}
}
async run(): Promise<void> {
const transport = new StdioServerTransport();
await this.server.connect(transport);
console.error('๐จ Unified Diff MCP Server running with Bun!');
}
}
const server = new UnifiedDiffServer();
server.run().catch(console.error);
Claude Desktop Integration
Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):
{
"systemPrompt": "Mandatory file editing workflow: 1) Execute filesystem edit_file with dryRun=true before editing, 2) Visualize diff with parse_filesystem_diff_image, 3) Explain changes to user and request explicit approval, 4) Execute actual editing after approval. Always follow this process and never modify files without user approval.",
"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/username/Desktop"
]
},
"claude-code": {
"command": "/Users/username/.bun/bin/claude",
"args": ["mcp", "serve"],
"env": {}
},
"unified-diff-mcp": {
"command": "/Users/username/.bun/bin/bun",
"args": ["/Users/username/projects/unified-diff-mcp/src/index.ts"],
"env": {
"NODE_ENV": "production",
"DEFAULT_AUTO_OPEN": "true",
"DEFAULT_OUTPUT_MODE": "html"
}
}
}
}
Tips for Setting Up Paths:
# Check Bun path
$ which bun
# Example: /Users/username/.bun/bin/bun
# Check Claude Code path
$ which claude
# Example: /Users/username/.bun/bin/claude
# Check project path
$ cd /path/to/unified-diff-mcp
$ pwd
# Example: /Users/username/projects/unified-diff-mcp
Usage Instructions:
- Restart Claude Desktop
- Start a new conversation
- Now you can ask Claude like the following:
Take this diff and create a beautiful visualization:
--- a/example.py
+++ b/example.py
@@ -1,5 +1,8 @@
import os
import sys
+import json
+import logging
def main():
- print("Hello World")
+ print("Hello, Enhanced World!")
+ logging.info("Launch application")
Claude Desktop automatically launches a diff viewer, creates a visually appealing HTML output, and opens it in your default browser!
๐ Performance Comparison: Bun vs Node.js
Let's look at real-world performance data from the unified-diff-mcp server:
Startup Time Benchmarks
# Test: Cold start time (10 runs average)
Node.js + TypeScript:
- Compilation: 850ms
- Runtime startup: 420ms
- Total: 1,270ms
Bun:
- Direct execution: 95ms
- Total: 95ms
Result: Bun is 13.4x faster ๐
Memory Usage Comparison
Idle State:
- Node.js: 48.2 MB
- Bun: 18.7 MB
- Difference: 61% less memory
Under Load (100 diff generations):
- Node.js: 127.4 MB
- Bun: 52.1 MB
- Difference: 59% less memory
Request Processing Performance
Single Diff Processing:
- Node.js: 245ms average
- Bun: 198ms average
- Improvement: 19% faster
Concurrent Requests (10 simultaneous):
- Node.js: 1,840ms total
- Bun: 1,120ms total
- Improvement: 39% faster
These numbers speak for themselves โ Bun provides significant real-world performance improvements that directly benefit user experience.
๐ง Advanced Features & Best Practices
Error Handling Strategies
private async safeToolExecution(toolName: string, handler: () => Promise<any>) {
try {
return await handler();
} catch (error) {
console.error(`Tool ${toolName} failed:`, error);
return {
content: [
{
type: 'text',
text: `โ Tool execution failed: ${error.message}`,
},
],
isError: true,
};
}
}
Security Considerations
// Input validation
private validateInput(input: unknown, schema: object): boolean {
// Use a library like Zod for robust validation
return true; // Simplified for example
}
// Path sanitization for file operations
private sanitizePath(path: string): string {
return path.replace(/[^a-zA-Z0-9.-]/g, '_');
}
Cross-Platform Compatibility
import { platform } from 'os';
private getDefaultCommand(): string {
switch (platform()) {
case 'win32':
return 'start';
case 'darwin':
return 'open';
default:
return 'xdg-open';
}
}
Testing Your MCP Server
// test/server.test.ts
import { describe, it, expect } from 'bun:test';
import { UnifiedDiffServer } from '../src/diff-server';
describe('UnifiedDiffServer', () => {
it('should generate HTML diff correctly', async () => {
const server = new UnifiedDiffServer();
const result = await server.generateDiffVisualization({
diff: '--- a/test.txt\n+++ b/test.txt\n@@ -1 +1 @@\n-old\n+new',
format: 'html'
});
expect(result.content[0].text).toContain('generated successfully');
});
});
Run tests with: bun test
๐ Deployment & Distribution
npm Publishing Process
// package.json
{
"name": "my-mcp-server",
"version": "1.0.0",
"type": "module",
"main": "dist/index.js",
"bin": {
"my-mcp-server": "dist/index.js"
},
"files": ["dist"],
"scripts": {
"build": "bun build src/index.ts --outdir dist --target node",
"prepublishOnly": "bun run build"
}
}
Cross-Platform Builds
# Build for different platforms
bun build src/index.ts --outdir dist --target bun
bun build src/index.ts --outdir dist --target node
# Publish to npm
npm publish
GitHub Actions CI/CD
# .github/workflows/release.yml
name: Release
on:
push:
tags: ['v*']
jobs:
release:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: oven-sh/setup-bun@v1
- run: bun install
- run: bun test
- run: bun run build
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
Community & Resources
Essential Links
- MCP Documentation: modelcontextprotocol.io
- Bun Documentation: bun.sh/docs
- MCP SDK: @modelcontextprotocol/sdk
- Awesome MCP Servers: Community-curated list of MCP servers
Join the Community
- GitHub Discussions: Share your MCP servers and get feedback
- Discord Communities: Real-time help and collaboration
- Dev.to #mcp: Share articles and tutorials
Contributing Back
The MCP ecosystem thrives on community contributions. Consider:
- Writing tutorials about your MCP server implementations
- Contributing bug fixes to the MCP SDK
- Sharing innovative use cases and server ideas
- Adding your server to awesome-mcp-servers lists
Conclusion
We've covered a lot of ground! You now have the knowledge to:
โ
Understand why Bun is superior for MCP server development
โ
Build production-ready MCP servers from scratch
โ
Implement complex features like diff visualization
โ
Optimize for performance and cross-platform compatibility
โ
Deploy and distribute your servers to the community
Key Takeaways
- Performance Matters: Bun's speed improvements directly impact user experience
- TypeScript Native: No build complexity means faster development cycles
- Real-World Value: Focus on solving actual developer problems
- Community First: The MCP ecosystem succeeds when we all contribute
Next Steps
Ready to build your own MCP server? Here's what I recommend:
- Start Simple: Build a basic server with one useful tool
- Solve Your Problems: Address your own workflow pain points first
- Share Early: Get community feedback while developing
- Iterate Fast: Use Bun's speed to your advantage during development
Get Building!
The future of AI-powered development workflows is being written right now, and you can be part of it.
What MCP server will you build with Bun? Share your creations in the comments below โ I'd love to see what amazing tools you come up with!
Found this helpful? Give it a โค๏ธ and follow me for more AI development tools and tutorials. Have questions about MCP server development? Drop them in the comments!
๐ฏ๐ต Japanese developers: ใใฎ่จไบใฎๆฅๆฌ่ช็ใQiitaใงๅ
ฌ้ใใฆใใพใ๏ผ
่ฉณ็ดฐใช็ฐๅข่จญๅฎใจWindowsๅฏพๅฟใๅซใใๅฎๅ
จใฌใคใใงใ๏ผ
https://qiita.com/gorosun/items/cf32f91271bf18c2aeff
#MCP #Bun #Claude #ๆฅๆฌ่ช
๐ Additional Resources
- Source Code: unified-diff-mcp on GitHub
- Live Demo: Try the server yourself with Claude Desktop
- Performance Benchmarks: Detailed testing methodology and results
Happy coding! ๐
Top comments (0)