<div id="readability-page-1" class="page"><div>
                <div id="SE-4c23511d-fd14-4da4-b2d2-c59b05cf6d6f">
                                    <p id="SE-97b86cd4-1be8-4b25-85f2-998fc37e6e67"><span id="SE-c5cced46-8976-4587-95e4-f01323b2ef19">안녕하세요 멍개입니다.</span></p><p id="SE-fb12ade6-cf70-4f0f-a3e8-d59b57fb3be0"><span id="SE-3f1bce27-183b-4036-922a-b124b42efdf7">​</span></p><p id="SE-abf05ac2-b200-4287-a155-77c0f8ba8df6"><span id="SE-9c174612-6738-4b43-94dd-c49f7b454ff3">이번 포스트에서는 Cursor와 Claude와 같이 MCP를 제공하는 도구의 원리를 이해하기 위해 MCP Client를 직접 구축해보겠습니다.</span></p><p id="SE-831c2661-2863-4e5c-9984-72e8fc0461fd"><span id="SE-9e8f326b-5a4a-4417-894d-f7197791fc4e">​</span></p><p id="SE-396ea1f2-5a98-4fad-ac45-39e49a3c6998"><span id="SE-bb74a491-c922-403d-b45c-eef343b9f4f4">지난 시간에 MCP가 어떤 구조로 되어있는지 다뤄보았습니다.</span></p><p id="SE-d2d25487-80eb-4d4e-af5d-4e7ba1fca7c3"><span id="SE-70eb0e0e-66b5-4fb1-b9b1-3040bad08060">​</span></p>
                            </div>                <div id="SE-16af2be1-1344-47a1-9482-47b5cbed6772">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-16af2be1-1344-47a1-9482-47b5cbed6772&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMjQy/MDAxNzQzOTI3NTY1MDk2.NEFS49GN0u_jwpfaqxY-ZqvPaXfPj9cMvRIEHvHSBG4g.S2GYQVmGvUw5loeodimFIkxsPoAdHgKwB8ycfN21rIYg.PNG/%EC%A0%9C%EB%AA%A9_%EC%97%86%EB%8A%94_%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8.drawio_(2).png&quot;, &quot;originalWidth&quot; : &quot;669&quot;, &quot;originalHeight&quot; : &quot;361&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMjQy/MDAxNzQzOTI3NTY1MDk2.NEFS49GN0u_jwpfaqxY-ZqvPaXfPj9cMvRIEHvHSBG4g.S2GYQVmGvUw5loeodimFIkxsPoAdHgKwB8ycfN21rIYg.PNG/%EC%A0%9C%EB%AA%A9_%EC%97%86%EB%8A%94_%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8.drawio_(2).png?type=w800" data-width="669" data-height="361" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-27ed8541-a44a-48e7-9eb4-9e245459a337">
                                    <p id="SE-82715ef3-e928-43b6-82d8-95ba4fa2e987"><span id="SE-da76b86c-7aeb-424c-9daf-31cdf28c9b51">Host는 실제로 사용자가 조작하는 어플리케이션을 의미합니다. 대표적으로 Cursor, Claude가 있습니다. 또한 최근에는 visual studio code에서도 MCP를 사용할 수 있도록 업데이트가 되었습니다. 본 포스트에서는 stdio / sse 방식으로 구성된 MCP Server를 구성하고 MCP Client로 연결하여 사용하는 방법을 javascript로 알아보겠습니다.</span></p><p id="SE-efec2bb8-8059-4041-9ae2-37f5ee36784f"><span id="SE-e61b574f-a4fd-4940-a07a-0f4ff6406515">​</span></p><p id="SE-243badc3-2a97-404f-aaf9-306518a24ce4"><span id="SE-04fda562-3030-4a32-b850-4ed31f399849">MCP Server는 stdio와 SSE 방식으로 제공할 수 있습니다. Server는 일반적인 서버를 의미하며 stdio는 MCP Client가 동작하는 환경에서 로컬에서 해당 서버를 구동하는 방식입니다.</span></p><p id="SE-024ba716-6ef4-4c2c-aa38-39ead46b8e08"><span id="SE-27c91471-6a25-4bce-9191-b1eca7abac3c">​</span></p><p id="SE-0eccbb17-c26a-4ad5-a87d-85010f452746"><span id="SE-07686371-f84f-4aea-aa1b-07deb6a12aff">​</span></p><p id="SE-e8726b46-0140-4f6d-baf9-7c45e68d7b5f"><span id="SE-94d09fc4-e181-4cae-ad33-abc53c00d6ba">​</span></p><p id="SE-d3c2344d-59b1-46a3-9282-778f12be35f5"><span id="SE-9e670239-4d70-4c98-ba44-e3b00eac2598"><b>● stdio</b></span></p><p id="SE-0ae2af91-94c0-41f7-bc72-2c22495d68f1"><span id="SE-408b4a17-1c9c-453a-a1f7-2c50bab99df0">MCP Server는 </span><span id="SE-8d69c3ce-013f-4dd9-ade8-dda10e3e722f">타입스크립트로도 개발할 수 있습니다. 하지만 MCP Server가 stdio 방식이라면 javascript로 변환해야 합니다.</span></p><p id="SE-6ac24999-de0c-4aba-a1d8-ab16efcc42bc"><span id="SE-a87db189-8668-4752-b306-5e7c1e032e1d">​</span></p><p id="SE-4ed7ea99-2cd9-47d0-b1a6-89901b27c7cf"><span id="SE-d78cbf8c-dd32-4658-98bc-a1d8458e607f">여기서는 MCP Server와 MCP Client를 fastmcp를 이용하여 구현합니다.</span></p>
                            </div>                                                <div id="SE-f30b7794-e59c-4910-b994-344f88f086a9">
                                    <p>// server.mjs
import { FastMCP } from "fastmcp";
import { z } from "zod"; // Or any validation library that supports Standard Schema

const server = new FastMCP({
  name: "My Server",
  version: "1.0.0",
});

server.addTool({
  name: "add",
  description: "Add two numbers",
  parameters: z.object({
    a: z.number(),
    b: z.number(),
  }),
  execute: async (args) =&gt; {
    return String(args.a + args.b);
  },
});

server.start({
  transportType: "stdio",
});</p>
                                </div>                <div id="SE-6cbedb4e-28d6-45fa-8e5e-3d090ad1634f">
                                    <p id="SE-4d411391-a583-4fc8-99d1-a7b44db2a225"><span id="SE-96337254-fe53-48f6-b279-99eca32b2e14">이렇게 만든 MCP Server는 cursor에 등록후 사용가능합니다.</span></p><p id="SE-563fe349-e976-4f17-b6dc-1922990b76b2"><span id="SE-68f7f797-1e23-41ac-ba4b-a0587a522b07"><b>​</b></span></p><p id="SE-cfd504c6-6152-43ea-b938-5999e86a5489"><span id="SE-c2e52f48-2102-47c2-92f1-af56d846a20c"><b>· Cursor에서 MCP Server 추가</b></span></p><p id="SE-552a76c7-b72f-47a3-ade0-a4b74492e3ca"><span id="SE-bd24a602-8c42-408d-8e89-209598871461">MCP Server 코드가 작성된 파일의 경로를 넣을땐 절대경로를 기준으로 넣는것이 좋습니다.</span></p>
                            </div>                <div id="SE-2c8b4c39-2e7e-4458-99ec-0f4d0c8894f8">
                                    <p>{
    "mcpServers": {
      "my-server-typescript-stdio": {
        "command": "node",
        "args": ["/Users/jeongtaepark/Desktop/mcp_client/ts/server.mjs"]
      }
    }
  }</p>
                                </div>                <div id="SE-ee01cd27-21ac-424f-aa06-3c6a5855c668">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-ee01cd27-21ac-424f-aa06-3c6a5855c668&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMjQx/MDAxNzQzOTM3NTcxODQ3.N04JxWpF5UjQGOq1SQsImWR0G_Hmwbcw8g2D3Y97zk0g._vZUUwan1eBZs_mTbYZT_94pcaDcjtwBu-5aOevQNTAg.PNG/Screenshot_2025-04-06_at_20.05.26.png&quot;, &quot;originalWidth&quot; : &quot;2622&quot;, &quot;originalHeight&quot; : &quot;1214&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMjQx/MDAxNzQzOTM3NTcxODQ3.N04JxWpF5UjQGOq1SQsImWR0G_Hmwbcw8g2D3Y97zk0g._vZUUwan1eBZs_mTbYZT_94pcaDcjtwBu-5aOevQNTAg.PNG/Screenshot_2025-04-06_at_20.05.26.png?type=w800" data-width="693" data-height="320" alt="">
                                    </a>
                                </p>
                        </div>
                                <div id="SE-f1037626-aeb0-4155-95eb-07b9a21c0076">
                                    <p>// client.mjs

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

async function main() {
  const transport = new StdioClientTransport({
    command: "node",
    args: ["server.mjs"]
  });

  const client = new Client(
    {
      name: "example-client",
      version: "1.0.0"
    },
    {
      capabilities: {
        prompts: {},
        resources: {},
        tools: {}
      }
    }
  );

  await client.connect(transport);

  const tools = await client.listTools();
  console.log(tools);

  /*
  출력결과
  {
    tools: [
      {
        name: 'add',
        description: 'Add two numbers',
        inputSchema: [Object]
      }
    ]
  }
  */

  const res = await client.callTool({
    name: "add",
    arguments: {
      a: 1,
      b: 2
    }
  });
  console.log(res);

  /*
  출력결과
  { content: [ { type: 'text', text: '3' } ] }
  */
}

main();</p>
                                </div>                <div id="SE-e36d9581-65bf-442c-8de8-61ba433bf3ec">
                                    <p>$ node client.mjs

{
  tools: [
    {
      name: 'add',
      description: 'Add two numbers',
      inputSchema: [Object]
    }
  ]
}
{ content: [ { type: 'text', text: '3' } ] }</p>
                                </div>                <div id="SE-c2c7ee0b-b39a-4f42-96ba-593c1cd57a57">
                                    <p id="SE-6f7f1154-7874-4a54-9fbc-9b43a32c4737"><span id="SE-8f33ef6d-bcd0-417a-8e3d-b84bad7c521a"><b>● SSE</b></span></p><p id="SE-effb90dd-feea-4211-b846-0b8fd5252f07"><span id="SE-8c6dba88-8823-4e11-83c4-209572a774b6">SSE는 Server Sent Event를 의미하며 자세한 내용은 다음 포스트에서 확인할 수 있습니다.</span></p><p id="SE-ffe46d01-0ce1-4d75-b78e-8ab6135d2940"><span id="SE-8d078e9a-5cd9-4d6d-bb09-fead24799943">​</span></p><p id="SE-91ae0c32-0f45-403b-922f-ec5067592504"><span id="SE-80af7532-445e-46cd-95d6-d7683ef63b9f"><a href="https://blog.naver.com/pjt3591oo/223274970013" data-linktype="text" data-linkdata="{&quot;id&quot;: &quot;SE-80af7532-445e-46cd-95d6-d7683ef63b9f&quot;, &quot;link&quot;: &quot;https://blog.naver.com/pjt3591oo/223274970013&quot;}" target="_blank">https://blog.naver.com/pjt3591oo/223274970013</a></span></p>
                            </div>                
                                <div id="SE-4d28e6aa-c767-4196-b8f6-29487fec679f">
                                    <p>import { FastMCP } from "fastmcp";
import { z } from "zod"; // Or any validation library that supports Standard Schema

const server = new FastMCP({
  name: "My Server",
  version: "1.0.0",
});

server.addTool({
  name: "add",
  description: "Add two numbers",
  parameters: z.object({
    a: z.number(),
    b: z.number(),
  }),
  execute: async (args) =&gt; {
    console.log(args);
    return String(args.a + args.b);
  },
});

server.start({
  transportType: "sse",
  sse: {
    endpoint: "/sse",
    port: 8080,
  },
});</p>
                                </div>                <div id="SE-a93eb496-30f4-4cd1-9fa1-47a3ec55223c">
                            <p id="SE-cf23afb3-8aed-438d-887a-7cde0d6eb728"><span id="SE-81fc3d47-eddf-41c2-9ef8-0c7861106cbf">다음과 같이 MCP Server를 실행할 수 있습니다.</span></p>
                        </div>                <div id="SE-c0c8de1d-7104-4a77-8725-52b6eaa03f46">
                                    <p>$ node server.remote.mjs                                                          ─╯

server is running on SSE at http://localhost:8080/sse</p>
                                </div>                <div id="SE-265afb9f-e151-4663-8374-14a7aa992255">
                                    <p id="SE-d515884c-2265-494c-98c8-507efa9eb1fe"><span id="SE-bb7e6acf-a392-4697-a2b4-c7a6aa97db1d"><b>· Cursor에서 MCP Server 추가</b></span></p><p id="SE-100857fa-8802-4aa5-91ef-e541692880f5"><span id="SE-b609b141-8ce9-4f00-afd7-c101a4ea6647">SSE 형태의 MCP Server는 다음과 같이 url 정보를 이용하여 추가할 수 있습니다.</span></p>
                            </div>                <div id="SE-41dcae72-51ad-4ee6-938b-e541d896f6a6">
                                    <p>{
    "mcpServers": {
      "my-server-typescript-stdio": {
        "command": "node",
        "args": ["/Users/jeongtaepark/Desktop/mcp_client/ts/server.mjs"]
      },
      "my-server-typescript-remote": {
        "url": "http://localhost:8080/sse"
      }
    }
  }</p>
                                </div>                <div id="SE-44ca5a7b-45ad-4aca-816f-b40d390b1131">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-44ca5a7b-45ad-4aca-816f-b40d390b1131&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMjAx/MDAxNzQzOTM4NDE0OTcy.JTC8SHURz8DE0gLy_ZLJvsdSCyiIMOX7ZjwpIwIRdJ0g.gST6q_fskMEyb3ZTJezuEES49d1SFDBUiSN300BHLRwg.PNG/Screenshot_2025-04-06_at_20.19.26.png&quot;, &quot;originalWidth&quot; : &quot;2844&quot;, &quot;originalHeight&quot; : &quot;1340&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMjAx/MDAxNzQzOTM4NDE0OTcy.JTC8SHURz8DE0gLy_ZLJvsdSCyiIMOX7ZjwpIwIRdJ0g.gST6q_fskMEyb3ZTJezuEES49d1SFDBUiSN300BHLRwg.PNG/Screenshot_2025-04-06_at_20.19.26.png?type=w800" data-width="693" data-height="326" alt="">
                                    </a>
                                </p>
                        </div>
                                <div id="SE-02803d45-f4bf-41a6-980f-626ed67436fd">
                                    <p>// client.remote.mjs
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

async function main() {
  const transport = new SSEClientTransport(
    new URL("http://localhost:8080/sse"), 
    );

  const client = new Client({
    name: "example-client",
    version: "1.0.0"
  }, {
    capabilities: {
      prompts: {},
      resources: {},
      tools: {}
    }
  });

  await client.connect(transport);

  const res = await client.callTool({
    name: "add",
    arguments: {
      a: 1,
      b: 2
    }
  });
  console.log(res);
}

main();</p>
                                </div>                <div id="SE-8c5a94ee-7c71-44d7-b734-b18486d2d41d">
                                    <p>$ node client.remote.mjs

{
  tools: [
    {
      name: 'add',
      description: 'Add two numbers',
      inputSchema: [Object]
    }
  ]
}
{ content: [ { type: 'text', text: '3' } ] }</p>
                                </div>                <div id="SE-da1cb730-d295-4bc6-baeb-490f69978286">
                                    <p id="SE-467477a2-192e-45fc-a869-9ac628eff951"><span id="SE-cb595253-b326-4508-8f5a-c8a575b54fb9">​</span></p><p id="SE-5c679d8e-113d-4e91-b223-32d6570bf27b"><span id="SE-a25250ed-a257-4384-8adb-90aff65a4257">여기까지 보았으면 MCP가 일반적인 서버와 클라이언트 구조와 차이가 없다는것을 알 수 있을겁니다. 맞습니다. MCP는 프로토콜일 뿐 그 이상도 그 이하도 아닙니다.</span></p><p id="SE-989a657b-c726-4527-a147-40b50cc96651"><span id="SE-3d2e184c-a3b3-4bea-98df-35e0c72a84b1">​</span></p>
                            </div>                                <div id="SE-49bcc3f1-fef0-4b7f-9b4a-10acc1f32c94">
                                    <p id="SE-ba083b19-45c5-434e-a71f-3238699173b9"><span id="SE-15cd0c85-444e-4190-9ab9-70fd559de6b9">​</span></p><p id="SE-5d554f5a-3ea6-48c3-ae83-438eec35f5ef"><span id="SE-d1755f6c-b05c-46a3-a823-246db9635396">여기까지 내용으로 MCP의 구조를 정리하면 다음과 같습니다.</span></p><p id="SE-6f7836d2-bca1-4975-a845-69c193352ef9"><span id="SE-9f389447-6ffc-4e74-9dbf-bb1c8e171a25">​</span></p>
                            </div>                <div id="SE-44201cc3-2ed0-4697-b383-2bd5a8d15613">
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-44201cc3-2ed0-4697-b383-2bd5a8d15613&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMTE5/MDAxNzQzOTM5NDM3MjUw.9dSQl5oiCIrDNhARzh7W1MSKm3xN6gQGe_MCoOPBxZwg.4ZOpCwHldmiE_5INs36FaO96vqdr5Uqg3iNqt_b38rsg.PNG/%EC%A0%9C%EB%AA%A9_%EC%97%86%EB%8A%94_%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8.drawio_(3).png&quot;, &quot;originalWidth&quot; : &quot;1084&quot;, &quot;originalHeight&quot; : &quot;361&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNTA0MDZfMTE5/MDAxNzQzOTM5NDM3MjUw.9dSQl5oiCIrDNhARzh7W1MSKm3xN6gQGe_MCoOPBxZwg.4ZOpCwHldmiE_5INs36FaO96vqdr5Uqg3iNqt_b38rsg.PNG/%EC%A0%9C%EB%AA%A9_%EC%97%86%EB%8A%94_%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8.drawio_(3).png?type=w800" data-width="693" data-height="230" alt="">
                                    </a>
                                </p>
                        </div>
                <div id="SE-5ec949c2-4f02-44b7-9257-07a55ca7a008">
                                    <p id="SE-cfb17c2a-a181-473b-8507-0e685dd1ef41"><span id="SE-39662ee1-8adc-4490-bf17-2172b5c40790">사용자는 Host(cursor, visual studio code, claude 등) 프로그램의 인터페이스를 통해 질문을 발생합니다. </span></p><p id="SE-616ae6c5-d670-481b-92e5-8db28af511b9"><span id="SE-1a9ad236-002f-4e69-85ec-18a1d70905d7">Host는 질문을 통해 적절한 MCP Client와 tools 선별한 후 tools을 호출하기 위해 arguments를 추출합니다. </span></p><p id="SE-2cac8e13-b1ca-47e3-871e-ccd2b8c4824a"><span id="SE-9411f0c5-7bab-47dd-b02f-4d112943e021">선별된 MCP Client는 추출된 arguments를 이용하여 tools를 호출합니다. </span></p><p id="SE-3a30680f-e065-459a-bcea-7032b2e89473"><span id="SE-915f5ffa-6c1f-467d-bb92-475950e1b3de">MCP Client는 응답 데이터를 받으면 Host는 해당 데이터를 LLM(코드생성 및 답변생성) 또는 다른 agent(작성된 코드를 생성, 수정, 삭제)를 이용하여 추가 작업을 이어나갑니다.</span></p><p id="SE-eea66653-432e-4d12-82ee-a3a2ad37f5f1"><span id="SE-473e305e-5c70-4c75-aee2-d5ad10fa0847">​</span></p>
                            </div>    </div></div>

삽질하는 멍개씨

안녕하세요 멍개입니다. 이번 포스트에서는 Cursor와 Claude와 같이 MCP를 제공하는 도구의 원리를 이해하기 위해 MCP Client를 직접 구축해보겠습니다. 지난 시간에 MCP가 어떤 구조로 되어있는지 다뤄보았습니다. Host는 실제로 사용자가 조작하는 어플리케이션을 의미합니다. 대표적으로 Cursor, Claude가 있습니다. 또한 최근에는 visual studio code에서도 MCP를 사용할 수 있도록 업데이트가 되었습니다. 본 포스트에서는 stdio / sse 방식으로 구성된 MCP Server를 구성하고 MCP Client로 연결하여 사용하는 방법을 javascript로 알아보겠습니다. MCP Server는 stdio와 SSE 방식으로 제공할 수 있습니다. Server는 일반적인 서버를 의미하.......

[인공지능] 나만의 MCP Client를 만들어보자

댓글