# Clone
git clone https://github.com/mimsut/mcp_kkebi.git
cd mcp_kkebi

# 설치
npm install

# 개발 모드
npm run dev

# 빌드
npm run build

my-mcp-app/
├── src/
│   └── index.ts              # MCP 서버 진입점 (TypeScript)
├── dist/
│   └── index.js              # 빌드된 서버 (JavaScript)
├── resources/
│   ├── example-widget/       # 예제 위젯
│   │   ├── widget.tsx        # React 컴포넌트
│   │   └── types.ts          # Props 타입
│   └── counter-widget/       # 인터랙티브 카운터 위젯
│       ├── widget.tsx
│       └── types.ts
├── package.json
├── tsconfig.json
├── mcp-config.json           # MCP 설정 파일
└── README.md

npm install

npm run build

npm run dev

npm start

nano ~/Library/Application\ Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "my-mcp-app": {
      "command": "node",
      "args": [
        "/Users/user/Downloads/b_ru8Xi2QdWzH-1771717682115/my-mcp-app/dist/index.js"
      ]
    }
  }
}

widget://example

widget://counter

{
  "name": "홍길동"
}

안녕하세요, 홍길동님! MCP 앱에 오신 것을 환영합니다! 🎉

# 개발 모드로 실행
npm run dev

# 다른 터미널에서 MCP Inspector 사용
npx @modelcontextprotocol/inspector node dist/index.js

mkdir resources/my-widget

export interface MyWidgetProps {
  // props 정의
}

import React from "react";
import type { MyWidgetProps } from "./types";

export default function MyWidget(props: MyWidgetProps) {
  return <div>{/* 위젯 UI */}</div>;
}

server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
  // ...
  if (uri === "widget://my-widget") {
    return {
      contents: [{
        uri: "widget://my-widget",
        mimeType: "application/vnd.mcp.widget+json",
        text: JSON.stringify({
          type: "my-widget",
          props: { /* props */ },
        }),
      }],
    };
  }
  // ...
});

npx @mcp-use/cli deploy

# .env
API_KEY=your_api_key
DATABASE_URL=your_database_url

# 1. 의존성 설치
npm install

# 2. 빌드
npm run build

# 3. Claude Desktop에 연결
# ~/Library/Application Support/Claude/claude_desktop_config.json 편집

# 4. Claude Desktop 재시작

# 5. Claude에서 테스트
# "greet" 도구 호출하거나 위젯 표시 요청