Model Context Protocol 쉽게 이해하기 (MCP)

Mastering Model Context Protocol (MCP)

const mcp = {
  system: "당신은 친절한 TypeScript 전문가입니다. 코드를 자세히 설명해 주세요.",
  tools: ["code_interpreter"],
  files: ["ts-guide.pdf", "my-project/index.ts"],
  user: {
    name: "Lee",
    role: "학생",
    goal: "타입스크립트 학습을 돕는 코드 리뷰",
  },
  threads: [
    {
      role: "user",
      content: "제 제너릭 함수에서 타입이 왜 추론되지 않는지 모르겠어요"
    }
  ]
}

// server/mcpRouter.ts
import express from 'express'
import { OpenAI } from 'openai'
const router = express.Router()
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY! })
router.post('/ask', async (req, res) => {
  const { question, fileContent } = req.body
    const context = {
    system: '당신은 친절하고 꼼꼼한 TypeScript 코드 리뷰어입니다.',
    tools: ['code_interpreter'],
    files: [
      {
        name: 'index.ts',
        content: fileContent
      }
    ],
    user: {
      name: 'Lee',
      role: '학생'
    },
    threads: [
      { role: 'user', content: question }
    ]
  }
    const completion = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [
      { role: 'system', content: context.system },
      { role: 'user', content: `파일 내용:
${fileContent}` },
      ...context.threads
    ]
  })
    res.json({ answer: completion.choices[0].message.content })
})
export default router

// client/components/Ask.tsx
import { useState } from 'react'
import axios from 'axios'
export default function Ask() {
  const [question, setQuestion] = useState('')
  const [file, setFile] = useState<File | null>(null)
  const [answer, setAnswer] = useState('')
    const handleSubmit = async () => {
    const text = await file?.text()
    const res = await axios.post('/api/ask', {
      question,
      fileContent: text
    })
    setAnswer(res.data.answer)
  }
    return (
    <div className="space-y-4">
      <input type="file" onChange={e => setFile(e.target.files?.[0] || null)} />
      <input
        value={question}
        onChange={e => setQuestion(e.target.value)}
        placeholder="질문을 입력하세요"
        className="border px-2 py-1"
      />
      <button onClick={handleSubmit} className="bg-blue-500 text-white px-4 py-2">요청하기</button>
      <pre className="bg-gray-100 p-2 whitespace-pre-wrap">{answer}</pre>
    </div>
  )
}