MCP 서버란? AI와 외부 시스템을 연결하는 새로운 표준

┌─────────┐     ┌─────────────┐
│   AI    │────▶│  Slack API  │  (개별 연동 필요)
└─────────┘     └─────────────┘
     │
     │          ┌─────────────┐
     └─────────▶│ GitHub API  │  (또 개별 연동)
                └─────────────┘
     │
     │          ┌─────────────┐
     └─────────▶│   DB 연결    │  (또 개별 연동)
                └─────────────┘

┌─────────┐     ┌─────────────┐     ┌─────────────┐
│   AI    │────▶│ MCP 프로토콜 │────▶│  Slack MCP  │
└─────────┘     └─────────────┘     └─────────────┘
                      │             ┌─────────────┐
                      └────────────▶│ GitHub MCP  │
                      │             └─────────────┘
                      │             ┌─────────────┐
                      └────────────▶│   DB MCP    │
                                    └─────────────┘

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Documents"
      ]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "your-github-token"
      }
    }
  }
}

# MCP 서버 추가
claude mcp add filesystem -s user -- npx -y @modelcontextprotocol/server-filesystem ~/Documents

# MCP 서버 목록 확인
claude mcp list

# MCP 서버 제거
claude mcp remove filesystem -s user

npx -y @modelcontextprotocol/server-filesystem /path/to/directory

npx -y @modelcontextprotocol/server-github

npx -y @modelcontextprotocol/server-postgres postgresql://localhost/mydb

npx -y @modelcontextprotocol/server-slack

"src/components 폴더에 Button 컴포넌트를 만들어줘.
 - TypeScript로 작성
 - Storybook 파일도 함께 생성
 - 테스트 파일도 추가"

"이 PR의 변경사항을 분석하고 리뷰 코멘트를 달아줘"
"최근 일주일간 생성된 버그 이슈를 요약해줘"

"users 테이블에서 최근 30일간 가입자 수 추이를 분석해줘"
"느린 쿼리를 찾아서 최적화 방안을 제안해줘"

"Figma에서 Button 컴포넌트 스펙을 가져와서
 React 컴포넌트로 변환해줘"

mkdir my-mcp-server
cd my-mcp-server
npm init -y
npm install @modelcontextprotocol/sdk zod
npm install -D typescript @types/node

// src/index.ts
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const server = new Server(
  {
    name: 'my-mcp-server',
    version: '1.0.0',
  },
  {
    capabilities: {
      tools: {},
      resources: {},
    },
  }
);

// Tools 정의
server.setRequestHandler('tools/list', async () => ({
  tools: [
    {
      name: 'get_weather',
      description: '특정 도시의 날씨 정보를 가져옵니다',
      inputSchema: {
        type: 'object',
        properties: {
          city: {
            type: 'string',
            description: '도시 이름',
          },
        },
        required: ['city'],
      },
    },
  ],
}));

// Tool 실행 핸들러
server.setRequestHandler('tools/call', async (request) => {
  const { name, arguments: args } = request.params;

  if (name === 'get_weather') {
    const weather = await fetchWeather(args.city);
    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(weather),
        },
      ],
    };
  }

  throw new Error(`Unknown tool: ${name}`);
});

// 서버 시작
const transport = new StdioServerTransport();
await server.connect(transport);

// package.json
{
  "type": "module",
  "bin": {
    "my-mcp-server": "./dist/index.js"
  },
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

npm run build

// claude_desktop_config.json
{
  "mcpServers": {
    "my-server": {
      "command": "node",
      "args": ["/path/to/my-mcp-server/dist/index.js"]
    }
  }
}

// 컴포넌트 생성 Tool
{
  name: 'create_component',
  description: 'React 컴포넌트를 생성합니다',
  inputSchema: {
    type: 'object',
    properties: {
      name: { type: 'string', description: '컴포넌트 이름' },
      type: {
        type: 'string',
        enum: ['functional', 'class'],
        description: '컴포넌트 타입'
      },
      withTest: { type: 'boolean', description: '테스트 파일 포함 여부' },
      withStory: { type: 'boolean', description: 'Storybook 파일 포함 여부' },
    },
    required: ['name'],
  },
}

// 실행 시
// "Button 컴포넌트를 테스트와 스토리북 파일과 함께 만들어줘"
// → Button.tsx, Button.test.tsx, Button.stories.tsx 생성

// 필요한 디렉토리만 접근 허용
{
  "command": "npx",
  "args": [
    "@modelcontextprotocol/server-filesystem",
    "/Users/me/projects/my-app"  // 전체 시스템이 아닌 특정 폴더만
  ]
}

// 토큰은 환경 변수로 분리
{
  "command": "npx",
  "args": ["@modelcontextprotocol/server-github"],
  "env": {
    "GITHUB_TOKEN": "${GITHUB_TOKEN}"  // 하드코딩 금지
  }
}