|
|
<?xml version="1.0" encoding="UTF-8"?> |
|
|
<svg width="800px" height="420px" viewBox="0 0 800 420" version="1.1" xmlns="http://www.w3.org/2000/svg"> |
|
|
<style> |
|
|
.box { |
|
|
fill: #1e1e2e; |
|
|
stroke: #7e53f1; |
|
|
stroke-width: 2; |
|
|
rx: 8; |
|
|
ry: 8; |
|
|
} |
|
|
.title { |
|
|
font-family: 'Arial', sans-serif; |
|
|
font-size: 18px; |
|
|
font-weight: bold; |
|
|
fill: white; |
|
|
text-anchor: middle; |
|
|
} |
|
|
.code { |
|
|
font-family: 'Consolas', 'Monaco', monospace; |
|
|
font-size: 12px; |
|
|
fill: #e0e0e0; |
|
|
} |
|
|
.comment { |
|
|
font-family: 'Consolas', 'Monaco', monospace; |
|
|
font-size: 12px; |
|
|
fill: #7ca85a; |
|
|
} |
|
|
.keyword { |
|
|
font-family: 'Consolas', 'Monaco', monospace; |
|
|
font-size: 12px; |
|
|
fill: #569cd6; |
|
|
} |
|
|
.string { |
|
|
font-family: 'Consolas', 'Monaco', monospace; |
|
|
font-size: 12px; |
|
|
fill: #ce9178; |
|
|
} |
|
|
.function { |
|
|
font-family: 'Consolas', 'Monaco', monospace; |
|
|
font-size: 12px; |
|
|
fill: #dcdcaa; |
|
|
} |
|
|
.type { |
|
|
font-family: 'Consolas', 'Monaco', monospace; |
|
|
font-size: 12px; |
|
|
fill: #4ec9b0; |
|
|
} |
|
|
.variable { |
|
|
font-family: 'Consolas', 'Monaco', monospace; |
|
|
font-size: 12px; |
|
|
fill: #9cdcfe; |
|
|
} |
|
|
.arrow { |
|
|
stroke: #7e53f1; |
|
|
stroke-width: 2; |
|
|
fill: none; |
|
|
marker-end: url(#arrowhead); |
|
|
} |
|
|
.label { |
|
|
font-family: 'Arial', sans-serif; |
|
|
font-size: 14px; |
|
|
font-weight: bold; |
|
|
fill: #7e53f1; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<defs> |
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> |
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#7e53f1" /> |
|
|
</marker> |
|
|
</defs> |
|
|
|
|
|
|
|
|
<text x="400" y="30" font-family="Arial" font-size="24" font-weight="bold" text-anchor="middle">MCP Server Implementation in TypeScript</text> |
|
|
|
|
|
|
|
|
<rect x="50" y="60" width="340" height="160" class="box" /> |
|
|
<text x="220" y="85" class="title">Server Setup</text> |
|
|
|
|
|
<text x="70" y="115" class="keyword">import</text> |
|
|
<text x="115" y="115" class="code">{ McpServer } </text> |
|
|
<text x="195" y="115" class="keyword">from</text> |
|
|
<text x="230" y="115" class="string">"@modelcontextprotocol/sdk/server/mcp.js"</text> |
|
|
<text x="480" y="115" class="code">;</text> |
|
|
|
|
|
<text x="70" y="135" class="keyword">import</text> |
|
|
<text x="115" y="135" class="code">{ StdioServerTransport } </text> |
|
|
<text x="285" y="135" class="keyword">from</text> |
|
|
<text x="320" y="135" class="string">"@modelcontextprotocol/sdk/server/stdio.js"</text> |
|
|
<text x="580" y="135" class="code">;</text> |
|
|
|
|
|
<text x="70" y="155" class="keyword">import</text> |
|
|
<text x="115" y="155" class="code">{ z } </text> |
|
|
<text x="130" y="155" class="keyword">from</text> |
|
|
<text x="165" y="155" class="string">"zod"</text> |
|
|
<text x="190" y="155" class="code">;</text> |
|
|
|
|
|
<text x="70" y="185" class="comment">// Create an MCP server</text> |
|
|
<text x="70" y="205" class="keyword">const</text> |
|
|
<text x="105" y="205" class="variable">server</text> |
|
|
<text x="145" y="205" class="code">= </text> |
|
|
<text x="155" y="205" class="keyword">new</text> |
|
|
<text x="180" y="205" class="type">McpServer</text> |
|
|
<text x="240" y="205" class="code">({</text> |
|
|
|
|
|
<text x="90" y="225" class="variable">name</text> |
|
|
<text x="120" y="225" class="code">: </text> |
|
|
<text x="130" y="225" class="string">"Demo"</text> |
|
|
<text x="165" y="225" class="code">,</text> |
|
|
|
|
|
<text x="90" y="245" class="variable">version</text> |
|
|
<text x="135" y="245" class="code">: </text> |
|
|
<text x="145" y="245" class="string">"1.0.0"</text> |
|
|
|
|
|
<text x="70" y="265" class="code">});</text> |
|
|
|
|
|
|
|
|
<rect x="50" y="240" width="340" height="160" class="box" /> |
|
|
<text x="220" y="265" class="title">Tool Definition</text> |
|
|
|
|
|
<text x="70" y="295" class="comment">// Add a tool with Zod schema validation</text> |
|
|
<text x="70" y="315" class="variable">server</text> |
|
|
<text x="110" y="315" class="code">.</text> |
|
|
<text x="115" y="315" class="function">tool</text> |
|
|
<text x="140" y="315" class="code">(</text> |
|
|
|
|
|
<text x="90" y="335" class="string">"add"</text> |
|
|
<text x="120" y="335" class="code">,</text> |
|
|
|
|
|
<text x="90" y="355" class="code">{ </text> |
|
|
<text x="100" y="355" class="variable">a</text> |
|
|
<text x="105" y="355" class="code">: </text> |
|
|
<text x="110" y="355" class="variable">z</text> |
|
|
<text x="117" y="355" class="code">.</text> |
|
|
<text x="122" y="355" class="function">number</text> |
|
|
<text x="165" y="355" class="code">(), </text> |
|
|
<text x="175" y="355" class="variable">b</text> |
|
|
<text x="180" y="355" class="code">: </text> |
|
|
<text x="185" y="355" class="variable">z</text> |
|
|
<text x="192" y="355" class="code">.</text> |
|
|
<text x="197" y="355" class="function">number</text> |
|
|
<text x="240" y="355" class="code">() },</text> |
|
|
|
|
|
<text x="90" y="375" class="keyword">async</text> |
|
|
<text x="125" y="375" class="code">({ </text> |
|
|
<text x="135" y="375" class="variable">a</text> |
|
|
<text x="142" y="375" class="code">, </text> |
|
|
<text x="150" y="375" class="variable">b</text> |
|
|
<text x="157" y="375" class="code"> }) => ({</text> |
|
|
|
|
|
<text x="110" y="395" class="variable">content</text> |
|
|
<text x="155" y="395" class="code">: [{ </text> |
|
|
<text x="170" y="395" class="variable">type</text> |
|
|
<text x="195" y="395" class="code">: </text> |
|
|
<text x="205" y="395" class="string">"text"</text> |
|
|
<text x="240" y="395" class="code">, </text> |
|
|
<text x="250" y="395" class="variable">text</text> |
|
|
<text x="275" y="395" class="code">: </text> |
|
|
<text x="285" y="395" class="function">String</text> |
|
|
<text x="320" y="395" class="code">(</text> |
|
|
<text x="325" y="395" class="variable">a</text> |
|
|
<text x="332" y="395" class="code"> + </text> |
|
|
<text x="342" y="395" class="variable">b</text> |
|
|
<text x="349" y="395" class="code">) }]</text> |
|
|
|
|
|
<text x="70" y="415" class="code">}));</text> |
|
|
|
|
|
|
|
|
<rect x="410" y="60" width="340" height="120" class="box" /> |
|
|
<text x="580" y="85" class="title">Server Connection</text> |
|
|
|
|
|
<text x="430" y="115" class="comment">// Connect using STDIO transport</text> |
|
|
<text x="430" y="135" class="keyword">const</text> |
|
|
<text x="465" y="135" class="variable">transport</text> |
|
|
<text x="525" y="135" class="code">= </text> |
|
|
<text x="535" y="135" class="keyword">new</text> |
|
|
<text x="560" y="135" class="type">StdioServerTransport</text> |
|
|
<text x="685" y="135" class="code">();</text> |
|
|
|
|
|
<text x="430" y="155" class="keyword">await</text> |
|
|
<text x="465" y="155" class="variable">server</text> |
|
|
<text x="505" y="155" class="code">.</text> |
|
|
<text x="510" y="155" class="function">connect</text> |
|
|
<text x="555" y="155" class="code">(</text> |
|
|
<text x="560" y="155" class="variable">transport</text> |
|
|
<text x="615" y="155" class="code">);</text> |
|
|
|
|
|
|
|
|
<rect x="410" y="200" width="340" height="200" class="box" /> |
|
|
<text x="580" y="225" class="title">Runtime Flow</text> |
|
|
|
|
|
|
|
|
<rect x="450" y="250" width="120" height="40" fill="#4a6cf7" rx="5" ry="5" opacity="0.7" /> |
|
|
<text x="510" y="275" font-family="Arial" font-size="14" fill="white" text-anchor="middle">AI Application</text> |
|
|
|
|
|
<rect x="450" y="350" width="120" height="40" fill="#7e53f1" rx="5" ry="5" opacity="0.7" /> |
|
|
<text x="510" y="375" font-family="Arial" font-size="14" fill="white" text-anchor="middle">MCP Server</text> |
|
|
|
|
|
<rect x="600" y="350" width="120" height="40" fill="#ff594f" rx="5" ry="5" opacity="0.7" /> |
|
|
<text x="660" y="375" font-family="Arial" font-size="14" fill="white" text-anchor="middle">External Tool</text> |
|
|
|
|
|
|
|
|
<path d="M 510 290 L 510 350" class="arrow" /> |
|
|
<path d="M 570 370 L 600 370" class="arrow" /> |
|
|
|
|
|
<text x="480" y="320" class="label">1. Call</text> |
|
|
<text x="585" y="360" class="label">2. Execute</text> |
|
|
</svg> |
