-
TypeScript로 MCP Server 만들기Language/React 2025. 3. 9. 12:44
프로젝트 설정
프로젝트 생성
$ mkdir mcp-typescript-250309 $ cd mcp-typescript-250309 $ mkdir src $ cd src
라이브러리 설지
$ npm install express @modelcontextprotocol/sdk zod $ npm install -D typescript ts-node $ npm install --save-dev @types/express
소스코드
- server.ts
import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js"; import { z } from "zod"; import express from "express"; import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"; let transport: SSEServerTransport; // Create an MCP server const server = new McpServer({ name: "Demo", version: "1.0.0" }); // Add an addition tool console.log("서버에 add 도구를 등록합니다..."); // 도구 이름: add // 설명: 두 숫자를 더합니다 // 매개변수: // - a: 첫 번째 숫자 // - b: 두 번째 숫자 // 반환값: 두 숫자의 합 server.tool( "add", { a: z.number(), b: z.number() }, async ({ a, b }) => { console.log(`[ADD TOOL] 입력값: a=${a}, b=${b}`); const result = a + b; console.log(`[ADD TOOL] 결과: ${result}`); return { content: [{ type: "text", text: String(result) }] }; } ); // Add a dynamic greeting resource server.resource( "greeting", new ResourceTemplate("greeting://{name}", { list: undefined }), async (uri, { name }) => ({ contents: [{ uri: uri.href, text: `Hello, ${name}!` }] }) ); const app = express(); app.get("/sse", async (req, res) => { transport = new SSEServerTransport("/messages", res); await server.connect(transport); }); app.post("/messages", async (req, res) => { // Note: to support multiple simultaneous connections, these messages will // need to be routed to a specific matching transport. (This logic isn't // implemented here, for simplicity.) await transport.handlePostMessage(req, res); }); app.listen(8001, () => { console.log("서버가 8001 포트에서 실행 중입니다."); console.log("add 도구를 테스트하려면 클라이언트에서 연결하세요."); // 서버 시작 시 add 도구 테스트 // console.log("add 도구 자동 테스트를 시작합니다..."); // setTimeout(async () => { // try { // // add 도구를 직접 호출하여 테스트 // const testParams = { a: 1, b: 5 }; // console.log(`테스트 파라미터: a=${testParams.a}, b=${testParams.b}`); // // 테스트용 함수 직접 호출 // const testAddFn = async ({ a, b }) => { // console.log(`[ADD TOOL] 입력값: a=${a}, b=${b}`); // const result = a + b; // console.log(`[ADD TOOL] 결과: ${result}`); // return { // content: [{ type: "text", text: String(result) }] // }; // }; // const result = await testAddFn(testParams); // console.log("테스트 결과:", result); // } catch (error) { // console.error("테스트 중 오류 발생:", error); // } // }, 1000); // 1초 후 테스트 실행 });
Curser IDE에서 실행 및 테스트
MCP Server 추가 (sse)
MCP Server 추가 > mcp-typescript-250309 Chat해서 확인해 보기
1+15은? (mcp-typescript-250309, add)
1+15은? (mcp-typescript-250309, add)
참고)
https://github.com/modelcontextprotocol/typescript-sdk
https://github.com/tzolov/mcp-everything-server-docker-image/tree/main
'Language > React' 카테고리의 다른 글
Cursor에서 Figma to React rule 적용 (0) 2025.03.10 React로 Gauge Chart 만들기 (1) 2025.02.27 InfiniteScroll 컴포넌트 간단구현 (1) 2025.02.24 env-cmd란? (1) 2024.12.06 react-hook-form을 사용하여 배열 형태 input 사용 (0) 2024.12.02