LLM에 손 발을 달아줄 인터페이스로 요즘 MCP 가 많이 거론이 되고 있습니다. 그래서 node.js 기반의 자바스크립트로 간단한 MCP Server를 구현해 보려고 합니다. 파이썬은 좀 많은 것 같기도 하고, 요즘 javascript를 자주 접하다 보니, 원리는 같을 것이라, 자바스크립트로 진행해보려고 합니다. 🙂
어떤 것을 할까 하다가 간단히 해결할 문제로 아래의 사항을 해결해 보려고 합니다.
그래도 많이 발전했네요, 현재 날짜 정도는 인식하고 있네요. 아마도 instruction 에 오늘 날짜를 제공하겠죠. 예전에는 데이터가 학습된 마지막 날짜를 기준으로 말하기도 했습니다. 벌써 태고적 전설 같은 이야기죠.
MCP 서버 구현
그래서, 간단히, 현재 시간을 알려주는 mcp server를 구현하고, 질문을 다시 해볼까 합니다.
먼저 프로젝트를 구성합니다.
mkdir time-mcp-server cd time-mcp-server npm init -y
자 이제, mcp 를 사용할 수 있는 SDK를 설치합니다. 아래 명령어를 사용합니다.
npm install @modelcontextprotocol/sdk
간단한 예제이니, 자바스크립트로 진행하겠습니다.
packages.json은 아래 처럼 간단히 구성했습니다.
{
"name": "time-mcp-server",
"version": "1.0.0",
"description": "MCP 서버 - MCP 클라이언트에게 정확한 시간 정보를 제공",
"main": "dist/index.js",
"type": "module",
"scripts": {
"dev": "node src/index.js",
"build": "mkdir -p dist && cp src/*.js dist/",
"start": "node dist/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"mcp",
"time",
"server"
],
"author": "",
"license": "ISC",
"dependencies": {
"@modelcontextprotocol/sdk": "^1.9.0"
}
}
src/index.js 파일을 생성하고 아래와 같이 입력합니다.
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
const server = new McpServer({
name: "Demo",
version: "1.0.0"
});
server.tool("time", {}, async () => ({
content: [{ type: "text", text: new Date().toISOString() }]
}));
const transport = new StdioServerTransport();
await server.connect(transport);
코드 구조를 보면 간단합니다.
McpServer를 생성하고, server.tool() 함수를 이용해서, MCP Client가 사용할 툴을 등록해 줍니다.
위의 코드에서는 time 이라는 도구를 제공하고 있습니다.
이렇게 준비가 되면, 띄우기만 하면 되는데요.
먼저 build를 하신후, 오류가 없다면,
npm run build
MCP 클라이언트 설정
Claud Desktop에서 어떻게 설정하는지 말씀드리겠습니다.
우선, Claude Desktop을 실행합니다.(맥 기준입니다)
설정 -> 개발자 화면에 진입합니다.
저는 미리 등록된 Demo 가 보이는데요. [설정 편집]을 찾아서 누르면 됩니다.
그러면, 설정 파일이 나오는데, 아래와 같이 입력하면 됩니다.
{
"mcpServers": {
"Demo": {
"command": "node",
"args": [
"/PATH/TO/dist/index.js"
]
}
}
}
이 설정파일을 해석하자면, Demo라는 MCP Server를 사용할꺼니까, node 를 실행하고 node의 파라미터로는 …/dist/index.js 를 넘겨라, 즉, index.js 를 실행해라 그 뜻입니다. /PATH/TO 는 당연히 절대경로를 넣으시면 됩니다.
설정 파일 입력이 끝났으면, 저장하고, Claude Desktop을 다시 띄웁니다.
특별히 에러가 없고, 프롬프트 하단에 망치 아이콘이 나온다면, 성공한 것입니다!! 🎉
이제 시간을 물어보겠습니다.
시, 분, 초까지 정확히 알려주네요~ (위에 보시면, time이라는 도구를 사용한 것을 알 수 있죠)
간단한 코드 몇줄로 LLM이 현실 감각을 찾았습니다. 😂
그런데, UTC기준으로 가져오네요, 글로벌 MCP Server라 그렇다고 생각하죠.
한국 시간으로 변환은 간단히 LLM에서 처리가 가능합니다.
아래와 같이 한국 시간을 잘 가져옵니다.
인터넷에 나와 있는 예제들이 복잡하고 어렵다면, 위와 같이 기초적인 코드를 수행해 보면서 MCP Server 구현 방법을 익힌다면, 여기에서 얼마든지 응용할 수 있을 것 같습니다.
그리고, 이제는 아이디어 싸움인 것 같습니다. 에어콘을 제어하는 것을 붙일 수도 있고, TV를 켜고 끈다던지 IoT와 연동해서 LLM을 사용하는 것도 얼마든지 가능합니다. 노션이나 구글 드라이브 슬랙과 연동되는 MCP Server는 벌써 나와있습니다.
아래 mcp server 예제 살펴봐도 좋을 것 같습니다. 인기가 얼마나 많은지, 결국 Open AI도 MCP 지원했다고 했죠.
