typescript-mcp-server-boilerplate/
├── src/
│   ├── mcp/
│   │   └── tools.ts            # tool / resource / prompt 등록 (HTTP·stdio 공용)
│   ├── stdio.ts                # 로컬 stdio 진입점
│   └── app/
│       ├── api/mcp/route.ts    # Streamable HTTP 엔드포인트
│       ├── layout.tsx
│       └── page.tsx            # 엔드포인트 안내 랜딩 페이지
├── build/                      # stdio 빌드 결과물 (build:stdio 실행 시 생성)
├── next.config.ts
├── tsconfig.json               # Next.js용
├── tsconfig.stdio.json         # stdio 빌드 전용
└── .env.example

npm install

cp .env.example .env.local

npm run dev

npx @modelcontextprotocol/inspector

// src/app/api/mcp/route.ts
const handler = async (request: Request) => {
    const hfToken = request.headers.get('x-hf-token') ?? process.env.HF_TOKEN

    return createMcpHandler(
        (server) => registerAll(server, { hfToken, transport: 'http' }),
        { serverInfo: SERVER_INFO }
    )(request)
}

export { handler as GET, handler as POST }

{
    "mcpServers": {
        "my-mcp-server": {
            "url": "http://localhost:3000/api/mcp",
            "headers": {
                "x-hf-token": "hf_xxxxxxxxxxxxxxxxxxxx"
            }
        }
    }
}

{
    "mcpServers": {
        "my-mcp-server": {
            "url": "https://<your-app>.vercel.app/api/mcp",
            "headers": {
                "x-hf-token": "hf_xxxxxxxxxxxxxxxxxxxx"
            }
        }
    }
}

{
    "mcpServers": {
        "my-mcp-server": {
            "command": "npx",
            "args": [
                "-y",
                "mcp-remote",
                "https://<your-app>.vercel.app/api/mcp",
                "--header",
                "x-hf-token:hf_xxxxxxxxxxxxxxxxxxxx"
            ]
        }
    }
}

npx vercel

npm run build:stdio
node build/stdio.js

{
    "mcpServers": {
        "my-mcp-server": {
            "command": "node",
            "args": ["/ABSOLUTE/PATH/TO/YOUR/PROJECT/build/stdio.js"],
            "env": {
                "HF_TOKEN": "hf_xxxxxxxxxxxxxxxxxxxx"
            }
        }
    }
}

server.registerTool(
    'reverse-text',
    {
        description: '입력한 문자열을 뒤집어 반환합니다.',
        inputSchema: z.object({
            text: z.string().min(1).describe('뒤집을 문자열')
        }),
        outputSchema: textOutputSchema
    },
    async ({ text }) => textResult([...text].reverse().join(''))
)

export type RegisterOptions = {
    hfToken?: string
    transport?: 'stdio' | 'http'
}

server.registerResource(
    'app-settings',
    'config://settings',
    {
        title: '애플리케이션 설정',
        description: '애플리케이션의 현재 설정 정보',
        mimeType: 'application/json'
    },
    async (uri) => ({
        contents: [
            {
                uri: uri.href,
                mimeType: 'application/json',
                text: JSON.stringify({ theme: 'dark' }, null, 2)
            }
        ]
    })
)