[gemini - cli] mcp를 만들어 코드 스니펫 활용하기

MCP를 사용한 코드스니펫 활용

Python FastMCP를 활용하여
규격화된 HTML 코드 스니펫
활용하기

1. 목적

지침과 코드 인터프리터를 활용하여 코드 스니펫을 활용하는 것도 매우 효율적이다. 그러나 프로젝트가 커지는 환경에서는 mcp끼리 연동하는 것이 더 효율적일 때가 있다. 소규모의 프로젝트에선 지침과 코드 인터프리터 또는 소스실행의 혼합을 추천하지만 지침(프롬프트)의 길이가 커질 수도 있다. 결과적으로 자동화를 원한다면 mcp 활용을 추천하는 추세이다.

2. Python FastMCP

코드 스니펫 파일을 검색(search_snippets)하고 파일 첫 부분의 주석을 분석하여 내용을 정의한다. 그리고 원하는 스니펫 파일을 읽어온다(get_snippet_code).

1. pip install fastmcp
2. snippet_mcp.py를 다음과 같이 작성

import os
import sys
from mcp.server.fastmcp import FastMCP

mcp = FastMCP("SnippetEngine")

# 스니펫 파일들이 저장된 디렉토리 경로 (본인의 경로에 맞게 수정)
SNIPPET_DIR = "C:/gemini_cli_mcp/snippets"

@mcp.tool()
def search_snippets(keyword: str) -> str:
    # 디렉토리 내 파일들을 검색하여 키워드와 관련된 스니펫 목록을 반환합니다.
    if not os.path.exists(SNIPPET_DIR):
        return "오류: 스니펫 디렉토리가 존재하지 않습니다."

    results = []
    for filename in os.listdir(SNIPPET_DIR):
        if filename.endswith(".html"):
            path = os.path.join(SNIPPET_DIR, filename)
            with open(path, "r", encoding="utf-8") as f:
                # 파일의 첫 줄을 주석이나 설명으로 읽어 검색에 활용
                first_line = f.readline().strip()
                if keyword.lower() in first_line.lower() or keyword.lower() in filename.lower():
                    results.append(f"파일명: {filename} | 설명: {first_line}")

    return "\n".join(results) if results else "일치하는 스니펫을 찾지 못했습니다."

@mcp.tool()
def get_snippet_code(filename: str) -> str:
    # 선택한 파일의 전체 소스코드를 읽어옵니다.
    path = os.path.join(SNIPPET_DIR, filename)
    try:
        with open(path, "r", encoding="utf-8") as f:
            return f.read()
    except Exception as e:
        return f"파일 읽기 오류: {str(e)}"

if __name__ == "__main__":
    mcp.run()

3. 스니펫 파일들은 C:/gemini_cli_mcp/snippets에 저장한다.

3. gemini cli에 mcp 등록하기

사용자정보 디렉토리 하부의 .gemini/settings.json 파일을 읽어서 다음과 같은 내용을 추가한다. 참고로 snippet_mcp.py의 경로는 사용자가 자신의 컴퓨터에 저장한 경로로 변경한다. 여기서는 C:/gemini_cli_mcp/snippet_mcp.py에 저장했다.

"mcpServers": {
    "template-engine": {
      "command": "python",
      "args": ["C:/gemini_cli_mcp/snippet_mcp.py"]
    }
  }

4. 프롬프트 예제

gemini cli에서 /mcp list 하면
설정된 mcp 정보를 보여준다.

이곳에서 search_snippet을 사용하라는
프롬프트를 사용하면
설정된 snippet을 활용하여
html을 만들 수 있다.

search_snippet을 사용하여 app.html을 가져와 myapp.html에 저장한다. 
그리고 상단에 APpBar에는 타이틀로 "테스트"를 표시한다. 
메뉴도 추가한다. 
이동이라는 메뉴를 추가한다. 
누르면 naver.com으로 이동한다. 
중앙에는 card 형태의 아이템을 가진 리스트를 5개 항목 추가한다. 
card 형태의 아이템에는 아이템 번호, progress radio 버튼이 존재한다. 
하단의 menubar에는 종료라는 메뉴가 존재한다. 
파일을 만들어줘

1. mcp Server를 활용하여 Tool로 python 소스에서 작성한 함수인 search_snippets를 호출한다.

2. mcp Server를 활용하여 Tool로 python 소스에서 작성한 함수인 get_snippet_code를 호출한다.

3. 다음과 같은 myapp.html이 생성되었다.

5. 그런데 하단 메뉴의 종료가 원했던 디자인이 아니다. 생성 AI가 임의로 메뉴가 아닌 버튼을 만든 것이다. 그래서 다음과 같이 프롬프트를 추가 했다.

하단의 종료버튼을 종료 메뉴로 변경한다. 

5. 원하는 화면을 생성했다.

5. 결과물

myapp.html

0.01MB

 

6. 소스와 스니펫

snippet_mcp.py

0.00MB

snippets.zip

0.02MB