Week 6 of 12 🔌

MCP Server Integrations

การเชื่อมต่อ MCP Server

MCP 服务器集成

1. Introduction / บทนำ / 简介

MCP (Model Context Protocol) เชื่อมต่อ Claude Code กับบริการภายนอกเช่น GitHub, ฐานข้อมูล, Slack และเบราว์เซอร์ MCP servers เปิดเผยเครื่องมือที่ Claude ใช้ได้ ทำให้เป็นศูนย์กลางที่เชื่อมต่อกับ workflow การพัฒนาทั้งหมด

MCP（Model Context Protocol）把 Claude Code 连接到 GitHub、数据库、Slack 和浏览器等外部服务。MCP servers 提供 Claude 可以使用的工具，让它成为整合你整个开发工作流的中心。

MCP (Model Context Protocol) connects Claude Code to external services like GitHub, databases, Slack, and browsers. MCP servers expose tools that Claude can use, turning it into a hub that integrates with your entire development workflow.

Fun Facts / ข้อเท็จจริงที่น่าสนใจ / 趣味知识

MCP supports three transport types: stdio, http, and sse.
GitHub's MCP server lets Claude read repos and create PRs directly.
You can configure MCP servers per-project in .mcp.json.

2. Vocabulary / คำศัพท์ / 词汇

Click a card to flip it. คลิกการ์ดเพื่อพลิก 点击卡片翻面。

server

เซิร์ฟเวอร์

服务器

A computer that provides services

protocol

โปรโตคอล

协议

A set of rules for communication

integration

การเชื่อมต่อ

集成

Connecting two systems together

connect

เชื่อมต่อ

连接

To link one system to another

transport

การขนส่ง

传输方式

How data travels (stdio, http, sse)

configure

กำหนดค่า

配置

To set up how something works

scope

ขอบเขต

作用域

Where a setting applies (local, project, global)

endpoint

เอนด์พอยต์

端点

A URL where a service can be reached

database

ฐานข้อมูล

数据库

A structured collection of data

authenticate

ยืนยันตัวตน

验证身份

To prove who you are

token

โทเค็น

令牌

A key used for authentication

external

ภายนอก

外部

Outside the current system

3. Grammar Focus / ไวยากรณ์ / 语法焦点

Connecting Ideas (and, or, so, because) / การเชื่อมประโยค (and, or, so, because) / 连接观点（and、or、so、because）

Thai:
คำเชื่อม (conjunctions) เชื่อมความคิด: 'and' เพิ่มข้อมูล, 'or' ให้ทางเลือก, 'so' แสดงผลลัพธ์, 'because' ให้เหตุผล ตัวอย่าง: 'Install the server and configure it.' 'It failed because the token was wrong.'

中文：
连词把观点连接起来：'and' 补充信息，'or' 给出选择，'so' 表示结果，'because' 说明原因。例如：'Install the server and configure it.'（安装服务器并进行配置。）'It failed because the token was wrong.'（它失败了，因为令牌不对。）

English:
Connecting words (conjunctions) join ideas: 'and' adds information, 'or' gives alternatives, 'so' shows result, 'because' gives reason. Example: 'Install the server and configure it.' 'It failed because the token was wrong.'

เชื่อมต่อ GitHub และสร้าง pull request

连接 GitHub 并创建一个 pull request。

Connect to GitHub and create a pull request.

ใช้ stdio หรือ http transport

使用 stdio 或 http 传输。

Use stdio or http transport.

การยืนยันตัวตนล้มเหลวเพราะโทเค็นหมดอายุ

身份验证失败，因为令牌过期了。

Authentication failed because the token expired.

Section Check 1

What does MCP stand for?

MCP ย่อมาจากอะไร?

MCP 是什么的缩写？

Model Context Protocol Master Control Program Multiple Connection Port

Section Check 2

Where is project MCP config?

Config MCP ของโปรเจกต์อยู่ที่ไหน?

项目的 MCP 配置在哪里？

settings.json .mcp.json package.json

Section Check 3

Which word gives a reason?

คำใดให้เหตุผล?

哪个词表示原因？

and or because

4. Tutorial Steps / ขั้นตอนการเรียนรู้ / 教程步骤

View MCP servers / ดู MCP servers / 查看 MCP servers
Type /mcp to see configured servers and their status.

How to do it

Type /mcp inside a session.
You see each configured server, its status (connected / failed), and how many tools it provides.
A failed server usually means a typo in the config or a missing login.

Add a remote server / เพิ่มเซิร์ฟเวอร์ระยะไกล / 添加远程服务器
Run: claude mcp add github --transport http https://api.github.com/mcp/

How to do it

In a normal terminal (not inside the chat), run: claude mcp add github --transport http https://api.github.com/mcp/.
Remote servers run on the internet — you connect over HTTP.
Start (or restart) claude and check /mcp to see it connected.

Add a local server / เพิ่มเซิร์ฟเวอร์ท้องถิ่น / 添加本地服务器
Run: claude mcp add playwright --transport stdio -- npx @playwright/mcp@latest

How to do it

Run: claude mcp add playwright --transport stdio -- npx @playwright/mcp@latest.
Local (stdio) servers run as a program on your machine — here via npx.
Everything after the -- is the command that starts the server.

Configure in .mcp.json / กำหนดค่าใน .mcp.json / 在 .mcp.json 中配置
Create .mcp.json in your project root with server definitions.

How to do it

Create .mcp.json in the project root and define servers there instead.
This file goes into git — your whole team gets the same servers automatically.
Ask Claude to write it: Add our GitHub MCP server to .mcp.json.

Use MCP tools / ใช้เครื่องมือ MCP / 使用 MCP 工具
Once connected, ask Claude to use the server's tools — e.g., 'Create a GitHub issue'.

How to do it

Just ask naturally: Create a GitHub issue titled "Fix login bug".
Claude picks the right MCP tool itself — you approve the first use.
MCP tools look exactly like built-in tools to Claude.

5. What the commands actually do / คำสั่งทำอะไรกันแน่ / 这些命令到底在做什么

The Tutorial Steps use two commands. Here is every part of them, explained.

claude mcp add github --transport http https://api.github.com/mcp/ | | | | | | the MCP add a name how to connect where the server CLI manager one YOU pick (over the lives (its URL) internet)

github is a nickname you choose. The server's tools appear to Claude as mcp__github__* — the name is how you recognise them.
--transport http = a remote server on the internet. Nothing to install; your machine talks to the URL.
--transport stdio = a local program on your machine. Everything after a -- is the command that starts it — for example npx @playwright/mcp@latest downloads and runs the Playwright server.

The same servers written as a project file — this is all .mcp.json is:

{ "mcpServers": { "github": { "type": "http", "url": "https://api.github.com/mcp/" }, "playwright": { "command": "npx", "args": ["-y", "@playwright/mcp@latest"] } } }

mcpServers — the list. Each key is a server nickname.
Remote servers: "type": "http" + "url".
Local servers: "command" + "args" — and no type field, because local (stdio) is the default.
Because the file lives in the project and goes into git, every teammate gets the same servers automatically — that is the whole point of it.

6. Hands-On Activity / กิจกรรมลงมือทำ / 动手练习

แบบฝึกหัด: ตั้งค่า GitHub MCP server และขอให้ Claude ระบุ repositories ของคุณ จากนั้นสร้างไฟล์ .mcp.json สำหรับโปรเจกต์

练习：设置 GitHub MCP server，让 Claude 列出你的 repositories。然后为你的项目创建一个 .mcp.json 文件。

Practice: Set up the GitHub MCP server and ask Claude to list your repositories. Then create a .mcp.json file for your project.

Step by step

Run claude mcp add github --transport http https://api.github.com/mcp/ in your terminal.
Start claude and type /mcp — check the server says connected.
Ask: List my GitHub repositories and approve the tool call.
Ask Claude to save the same server into a .mcp.json for this project.

✓ You did it right if: your repository list appears in the chat and .mcp.json exists in the project root.

📜 A complete working .mcp.json / ตัวอย่างคำตอบ / 示例答案

// Save as: .mcp.json  (project root - commit it, your team shares it)
{
  "mcpServers": {
    "github": {
      "type": "http",
      "url": "https://api.github.com/mcp/"
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

// Note: stdio servers use "command" + "args" and NO "type" -
// stdio is the default. Only remote servers need "type": "http".

# ---- Restart claude, then check ----
> /mcp
  github      connected - 12 tools
  playwright  connected - 8 tools

7. Reference Table / ตารางอ้างอิง / 参考表

Command / Tool	English	ภาษาไทย	中文
`claude mcp add`	Add an MCP server	เพิ่ม MCP server	添加 MCP server
`claude mcp remove`	Remove an MCP server	ลบ MCP server	移除 MCP server
`claude mcp list`	List configured servers	ระบุ servers ที่ตั้งค่า	列出已配置的 servers
`.mcp.json`	Project MCP config file	ไฟล์ config MCP ของโปรเจกต์	项目的 MCP 配置文件
`/mcp`	Manage MCP in session	จัดการ MCP ในเซสชัน	在会话中管理 MCP

8. Interactive Lab / ห้องทดลอง / 互动实验室

Connect and disconnect servers, then see which requests succeed. / เชื่อมต่อ MCP servers แล้วลองใช้เครื่องมือ / 连接 MCP 服务器并试用工具

Connect servers, then try to use their tools.

Tools available to Claude: 0

9. Summary / สรุป / 总结

MCP เชื่อมต่อ Claude Code กับบริการภายนอกผ่าน servers ใช้ 'claude mcp add' เพื่อเชื่อมต่อ, .mcp.json สำหรับ config โปรเจกต์ คำเชื่อม (and, or, so, because) เชื่อมความคิดในประโยค

MCP 通过 servers 把 Claude Code 连接到外部服务。用 'claude mcp add' 来连接，用 .mcp.json 做项目配置。连词（and、or、so、because）在句子中连接观点。

MCP connects Claude Code to external services via servers. Use 'claude mcp add' to connect, .mcp.json for project config. Conjunctions (and, or, so, because) connect ideas in sentences.

Homework / การบ้าน / 作业

1. ศึกษา MCP servers 3 ตัวและกรณีใช้งาน
2. สร้างไฟล์ .mcp.json พร้อม server หนึ่งตัว
3. เขียน 5 ประโยคโดยใช้ and, or, so, because

1. 研究 3 个 MCP servers 及其使用场景。
2. 创建一个包含一个 server 的 .mcp.json 文件。
3. 用 and、or、so、because 写 5 个句子。

1. Research 3 MCP servers and their use cases.
2. Create a .mcp.json file with one server.
3. Write 5 sentences using and, or, so, because.

« Week 5 Syllabus Week 7 »