Mobiscroll MCP

npx add-mcp 'https://mcp.mobiscroll.com'

Mobiscroll มาพร้อมกับ MCP server และทักษะของ agent เพื่อให้ผู้ช่วยเขียนโค้ดสร้างโค้ด scheduler, event calendar, timeline และ picker ได้อย่างถูกต้อง — สำหรับ Claude Code, Codex, Cursor และ GitHub Copilot พร้อมกับเอกสารที่เครื่องอ่านได้และกฎพฤติกรรมของ AI

ทำไมต้องใช้ AI integration?

ผู้ช่วยเขียนโค้ด AI จะทำงานได้ดีที่สุดเมื่อเข้าถึงเอกสารที่มีโครงสร้างและน่าเชื่อถือ หากไม่มี มักจะเกิดปัญหา:

• สร้าง API ที่ไม่มีจริง — สร้างชื่อ option, event หรือ type ที่ไม่มีอยู่
• ผสม framework — ใช้ Angular module imports หรือ jQuery plugin syntax แทน React hooks และ JSX
• อ้างอิงเวอร์ชันเก่า — สร้างโค้ด v5 ในขณะที่เวอร์ชันปัจจุบันคือ v6
• ไม่ปฏิบัติตามหลักของ framework — ข้าม named imports จาก @mobiscroll/react หรือไม่ใส่ CSS import

Mobiscroll AI integration แก้ปัญหาเหล่านี้โดยให้เอกสารที่ปรับให้เหมาะสมสำหรับการใช้งานของ AI ควบคู่กับกฎพฤติกรรมที่บังคับให้แยก framework และใช้ API อย่างถูกต้อง

ภาพรวมสถาปัตยกรรม

Integration ประกอบด้วยสามชั้น:

ชั้นข้อมูล — ไฟล์ llms

ไฟล์เอกสารที่เครื่องอ่านได้ซึ่งมี API reference และคู่มือ Mobiscroll ฉบับสมบูรณ์ แยกตาม framework แต่ละตัว เป็นแหล่งข้อมูลหลักที่เครื่องมือ AI อ่านเพื่อตอบคำถาม

ไฟล์	คำอธิบาย
llms-react-full.txt	เอกสาร React ฉบับสมบูรณ์
llms-react.txt	สารบัญ React (ลิงก์ไปยังแต่ละหน้า)
llms-icons.txt	ชื่อไอคอน (IcoMoon, Font Awesome, Ionicons) — ทุก framework

[!-info] -info info

คุณไม่จำเป็นต้องดาวน์โหลดหรือโฮสต์ไฟล์เหล่านี้ — ไฟล์กฎและปลั๊กอิน Claude Code และ Codex อ้างอิงไฟล์เหล่านี้โดยตรงและดึงเนื้อหาโดยอัตโนมัติ

ชั้นกฎ — ไฟล์กฎ

ไฟล์กฎให้บริบท Mobiscroll แก่ Cursor และ GitHub Copilot เท่านั้น Claude Code และ Codex ใช้ปลั๊กอิน Mobiscroll แทน — ไม่ต้องตั้งค่าไฟล์ด้วยตนเอง

มีสองวิธี:

• ตัวเลือก A — การโหลดบริบทจากไฟล์ ไฟล์กฎ (.mdc สำหรับ Cursor, .instructions.md สำหรับ Copilot) ประกอบด้วยเอกสาร API และกฎพฤติกรรม ไม่ต้องใช้ MCP server
• ตัวเลือก B — การดึง schema แบบสดผ่าน MCP server ไฟล์กฎแบบขยายจะสั่งให้ AI เรียก Mobiscroll MCP server เพื่อค้นหา schema ของคอมโพเนนต์แบบสดในทุกการสร้าง เหมาะสำหรับ agent เชิงโต้ตอบที่ต้องการความแม่นยำต่อคำสั่ง

เลือกตามความต้องการและการตั้งค่าของคุณ

ไฟล์

ตัวเลือก A — กฎจากไฟล์:

ไฟล์	รูปแบบ	สำหรับ
mobiscroll-react.mdc	ไฟล์กฎ Cursor	Cursor
copilot-instructions/mobiscroll-react.instructions.md	ไฟล์คำสั่ง Copilot	GitHub Copilot

ตัวเลือก B — กฎแบบขยายพร้อม MCP:

ไฟล์	รูปแบบ	สำหรับ
mobiscroll-ui.mdc	กฎขยาย Cursor (ตัวประสานงาน)	Cursor
mobiscroll-ui-react.mdc	กฎขยาย Cursor (React)	Cursor
mobiscroll-ui-theming.mdc	กฎขยาย Cursor (ธีม)	Cursor
mobiscroll-ui.instructions.md	คำสั่งขยาย Copilot (ตัวประสานงาน)	GitHub Copilot
mobiscroll-ui-react.instructions.md	คำสั่งขยาย Copilot (React)	GitHub Copilot
mobiscroll-ui-theming.instructions.md	คำสั่งขยาย Copilot (ธีม)	GitHub Copilot

เครื่องมือใดใช้ไฟล์ใด?

เครื่องมือ	วิธี	ไฟล์ที่ใช้
Cursor	ตัวเลือก A	mobiscroll-react.mdc
Cursor	ตัวเลือก B	mobiscroll-ui.mdc, mobiscroll-ui-react.mdc, mobiscroll-ui-theming.mdc
GitHub Copilot	ตัวเลือก A	mobiscroll-react.instructions.md
GitHub Copilot	ตัวเลือก B	mobiscroll-ui.instructions.md, mobiscroll-ui-react.instructions.md, mobiscroll-ui-theming.instructions.md

ชั้น schema แบบสด — MCP server

Mobiscroll MCP server ให้ความรู้ API ที่มีโครงสร้างและระบุเวอร์ชันผ่าน Model Context Protocol เป็น server เดียวแบบรวม: server mobiscroll เดียวกันที่เปิดเผยเครื่องมือ UI คอมโพเนนต์เหล่านี้ยังให้บริการเครื่องมือ Mobiscroll Connect ด้วยคำนำหน้า Connect เพื่อไม่ให้ชนกัน แทนที่จะพึ่งพาสแนปช็อตเอกสาร ผู้ช่วยสามารถเรียกใช้เครื่องมือเหล่านี้เพื่อดึง schema ของคอมโพเนนต์ที่แน่นอน, props/events ที่ถูกต้อง หรือตัวอย่างการทำงาน ณ เวลาสร้าง — จึงไม่เกิดการสร้างข้อมูลเท็จหรือเบี่ยงเบนจาก API ปัจจุบัน ดู ข้อมูลอ้างอิงเครื่องมือ MCP สำหรับรายการทั้งหมดที่เปิดเผย

เป็น hosted Streamable HTTP server ที่ https://mcp.mobiscroll.com/ — ไม่ต้องติดตั้งในเครื่อง เป็นตัวเลือกสำหรับ Cursor และ GitHub Copilot (ใช้เฉพาะเมื่อเลือกตัวเลือก B) และรวมอยู่/เปิดใช้งานเสมอสำหรับ Claude Code และ Codex ผ่านปลั๊กอิน

การตั้งค่า Cursor

ขั้นตอนที่ 1: ลงทะเบียนแหล่งเอกสาร

เปิด Cursor Settings → Indexing & Docs และเพิ่มแหล่งเอกสารสำหรับ framework ของคุณ:

Framework	ชื่อ	URL
React	Mobiscroll React	https://mobiscroll.com/docs/llms-react-full.txt

ลงทะเบียนเฉพาะแหล่งที่ตรงกับกรณีการใช้งานของคุณเท่านั้น อย่าลงทะเบียนหลายแหล่ง — เพื่อป้องกันการปนเปื้อนข้ามโดเมน

ขั้นตอนที่ 2: เพิ่มกฎพฤติกรรม

เลือกวิธีใดวิธีหนึ่ง — ตัวเลือก A ทำงานได้ทันทีโดยไม่ต้องตั้งค่าเพิ่มเติม ตัวเลือก B เพิ่มการค้นหา schema MCP แบบสดเพื่อความแม่นยำสูงขึ้น แต่ต้องตั้งค่า MCP server

ตัวเลือก A — ไฟล์กฎ .mdc

ดาวน์โหลดไฟล์ mobiscroll-react.mdc และวางใน .cursor/rules/:

your-project/
├── .cursor/
│   └── rules/
│       └── mobiscroll-react.mdc
├── src/
└── package.json

ไฟล์ .mdc ให้กฎ API แบบข้อความ — ไม่ต้องตั้งค่าเพิ่มเติม

ตัวเลือก B — ไฟล์กฎแบบขยาย + MCP (3 ไฟล์)

ดาวน์โหลดไฟล์กฎแบบขยายสามไฟล์และวางใน .cursor/rules/:

• mobiscroll-ui.mdc (ตัวประสานงาน)
• mobiscroll-ui-react.mdc (หลักปฏิบัติ React)
• mobiscroll-ui-theming.mdc (ธีม)

your-project/
├── .cursor/
│   └── rules/
│       ├── mobiscroll-ui.mdc
│       ├── mobiscroll-ui-react.mdc
│       └── mobiscroll-ui-theming.mdc
├── src/
└── package.json

ต่างจากตัวเลือก A ไฟล์กฎเหล่านี้สั่งให้ AI ของ Cursor เรียก Mobiscroll MCP server เพื่อค้นหา schema ของคอมโพเนนต์แบบสดในทุกการสร้าง — จึงทำงานจาก API ปัจจุบันแทนการเดาจากความจำ ตรวจสอบโค้ดที่สร้างก่อนผสาน เช่นเดียวกับผลลัพธ์ AI อื่นๆ

การเปิดใช้งานกฎ

ไฟล์ .mdc แบบขยายใช้ alwaysApply: false พร้อม description ใน frontmatter Cursor อ่านคำอธิบายและเปิดใช้งานกฎเฉพาะเมื่อบริบทเกี่ยวข้อง — กฎจะไม่รวมอยู่ในทุกข้อความ คุณยังสามารถเรียกใช้ด้วยตนเองด้วย @rule-name (เช่น @mobiscroll-ui) รูปแบบ .mdc ทำงานในทุกโหมดของ Cursor รวมถึงโหมด Agent

ขั้นตอนที่ 3: เชื่อมต่อ MCP server

ตั้งค่า Mobiscroll MCP server เพื่อให้กฎแบบขยายสามารถเรียกใช้เพื่อค้นหา schema แบบสดได้

สร้างหรือแก้ไข .cursor/mcp.json ในโฟลเดอร์รากของโปรเจกต์:

{
  "mcpServers": {
    "mobiscroll": {
      "url": "https://mcp.mobiscroll.com/"
    }
  }
}

[!-warning] -warning ไม่มีฟิลด์ type

Cursor อนุมานประเภทการเชื่อมต่อจาก URL อย่าเพิ่ม "type": "http" ในการตั้งค่าของ Cursor — จะทำให้เกิดข้อผิดพลาด

your-project/
├── .cursor/
│   ├── mcp.json
│   └── rules/
│       ├── mobiscroll-ui.mdc
│       ├── mobiscroll-ui-react.mdc
│       └── mobiscroll-ui-theming.mdc
├── src/
└── package.json

ขอบเขต	ไฟล์ตั้งค่า	แชร์กับทีม
โปรเจกต์	.cursor/mcp.json ในโฟลเดอร์รากของโปรเจกต์	ใช่ หาก commit
ทั่วโลก	~/.cursor/mcp.json	ไม่ ทุกโปรเจกต์ของคุณ

ตรวจสอบการเชื่อมต่อ: เปิดแผง Output ใน Cursor และเลือก MCP Logs จากเมนูแบบเลื่อนลง การเชื่อมต่อที่สำเร็จจะบันทึกข้อความการค้นพบเครื่องมือสำหรับ server mobiscroll

วิธีการทำงาน

เมื่อถาม Cursor เกี่ยวกับ Mobiscroll ให้รวม @docs เพื่อให้แน่ใจว่าอ่านเอกสารที่ลงทะเบียน:

@docs How do I set up a weekly scheduler with Mobiscroll?

@docs What options does the Eventcalendar timeline view accept?

การตั้งค่า GitHub Copilot

ขั้นตอนที่ 1: เพิ่มกฎพฤติกรรม

เลือกวิธีใดวิธีหนึ่ง — ตัวเลือก A ทำงานได้ทันทีโดยไม่ต้องตั้งค่าเพิ่มเติม ตัวเลือก B เพิ่มการค้นหา schema MCP แบบสดเพื่อความแม่นยำสูงขึ้น แต่ต้องตั้งค่า MCP server

ตัวเลือก A — ไฟล์กฎ .instructions.md

ดาวน์โหลดไฟล์ mobiscroll-react.instructions.md และวางใน .github/instructions/:

your-project/
├── .github/
|   └── instructions/
|       └── mobiscroll-react.instructions.md
├── src/
└── package.json

ไฟล์ .instructions.md ให้กฎ API แบบข้อความ — ไม่ต้องตั้งค่าเพิ่มเติม

ตัวเลือก B — ไฟล์คำสั่งแบบขยาย + MCP (3 ไฟล์)

ดาวน์โหลดไฟล์คำสั่งแบบขยายสามไฟล์และวางใน .github/instructions/:

• mobiscroll-ui.instructions.md (ตัวประสานงาน)
• mobiscroll-ui-react.instructions.md (หลักปฏิบัติ React)
• mobiscroll-ui-theming.instructions.md (ธีม)

your-project/
├── .github/
|   └── instructions/
|       ├── mobiscroll-ui.instructions.md
|       ├── mobiscroll-ui-react.instructions.md
|       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json

ขั้นตอนที่ 2: เชื่อมต่อ MCP server

ตั้งค่า Mobiscroll MCP server เพื่อให้ไฟล์คำสั่งแบบขยายสามารถเรียกใช้เพื่อค้นหา schema แบบสดได้

สร้างหรือแก้ไข .vscode/mcp.json ในโฟลเดอร์รากของโปรเจกต์:

{
  "servers": {
    "mobiscroll": {
      "type": "http",
      "url": "https://mcp.mobiscroll.com/"
    }
  }
}

[!-warning] -warning "servers" ไม่ใช่ "mcpServers"

VS Code ใช้ "servers" เป็นคีย์หลัก — ไม่ใช่ "mcpServers" เหมือน Claude Code และ Cursor การใช้คีย์ผิดจะทำให้การตั้งค่าเสียหายอย่างเงียบๆ โดยไม่มีข้อความแสดงข้อผิดพลาด

your-project/
├── .vscode/
│   └── mcp.json
├── .github/
│   └── instructions/
│       ├── mobiscroll-ui.instructions.md
│       ├── mobiscroll-ui-react.instructions.md
│       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json

ขอบเขต	ไฟล์ตั้งค่า	แชร์กับทีม
เวิร์กสเปซ	.vscode/mcp.json ในโฟลเดอร์รากของโปรเจกต์	ใช่ หาก commit
โปรไฟล์ผู้ใช้	เปิดผ่าน MCP: Open User Configuration	ไม่ ทุกเวิร์กสเปซของคุณ

ตรวจสอบการเชื่อมต่อ: เปิด Command Palette และรัน MCP: List Servers server mobiscroll ควรปรากฏพร้อมสถานะเชื่อมต่อแล้ว จะมีกล่องโต้ตอบยืนยันความน่าเชื่อถือในการใช้ครั้งแรก — อนุมัติเพื่อให้ server เริ่มทำงาน

หรือเปิด Command Palette และรัน MCP: Add Server เพื่อการตั้งค่าแบบมีคำแนะนำ

วิธีการทำงาน

ไฟล์คำสั่งที่มี applyTo: "**" ใช้กับคำถาม Copilot Chat ทั้งหมดโดยอัตโนมัติ — ไม่ต้องอ้างอิงด้วยตนเอง ทั้งสองตัวเลือกประกอบด้วย:

• URL เอกสาร — ชี้ AI ไปยังเอกสาร framework ที่ถูกต้อง
• การแมปคอมโพเนนต์ — แมปความตั้งใจของผู้ใช้ (เช่น "scheduler") ไปยัง Mobiscroll APIs ที่ถูกต้อง
• กฎ — บังคับการ import แพ็กเกจ, การโหลด CSS และการใช้ API ที่ถูกต้อง
• ข้อจำกัด — ป้องกันการผสมข้าม framework และการสร้าง API ที่ไม่มีจริง

ถามคำถาม Mobiscroll ได้โดยตรง:

How do I set up a weekly scheduler with Mobiscroll?

What options does the Eventcalendar timeline view accept?

การตั้งค่า Claude Code

ติดตั้งปลั๊กอิน Mobiscroll สำหรับ Claude Code ปลั๊กอินรวมทักษะการเขียนโค้ดของ framework และ MCP server ในการติดตั้งครั้งเดียว — ไม่ต้องใช้ไฟล์ตั้งค่าต่อโปรเจกต์

ขั้นตอนที่ 1: ลงทะเบียน marketplace

รันคำสั่งนี้ครั้งเดียวใน Claude Code เพื่อลงทะเบียน marketplace ของปลั๊กอิน Mobiscroll:

/plugin marketplace add acidb/mobiscroll-marketplace

ขั้นตอนที่ 2: ติดตั้งปลั๊กอิน

/plugin install mobiscroll@mobiscroll

[!-warning] -warning ทักษะของปลั๊กอินไม่อัปเดตอัตโนมัติ

การติดตั้งปลั๊กอินจะเก็บสแนปช็อตของทักษะ — Claude Code จะไม่ดึงเวอร์ชันใหม่ด้วยตัวเองเว้นแต่คุณเปิดใช้งานการอัปเดตอัตโนมัติสำหรับ marketplace เพื่อรับเวอร์ชันล่าสุดทุกเมื่อ ให้รัน /plugin marketplace update mobiscroll && /plugin update mobiscroll@mobiscroll จากนั้น /reload-plugins

ขั้นตอนที่ 3: เชื่อมต่อ MCP server

ปลั๊กอินรวม MCP server — ไม่ต้องตั้งค่าแยกสำหรับการตั้งค่าส่วนใหญ่ หากต้องการตั้งค่าด้วยตนเองหรือแชร์กับทีม:

claude mcp add --transport http mobiscroll https://mcp.mobiscroll.com/

[!-warning] -warning ส่วนขยาย VS Code

หากคุณใช้ส่วนขยาย Claude Visual Studio Code server จะไม่ปรากฏเว้นแต่เพิ่มด้วยขอบเขตโปรเจกต์ ดูคำสั่งถัดไปด้านล่าง

เพื่อแชร์ server กับทีมโดยอัตโนมัติ ให้ใช้ขอบเขตโปรเจกต์:

claude mcp add --transport http --scope project mobiscroll https://mcp.mobiscroll.com/

คำสั่งนี้สร้างหรืออัปเดต .mcp.json ในโฟลเดอร์รากของโปรเจกต์ คุณยังสามารถสร้างไฟล์นั้นด้วยตนเอง:

{
  "mcpServers": {
    "mobiscroll": {
      "type": "http",
      "url": "https://mcp.mobiscroll.com/"
    }
  }
}

ขอบเขต	CLI flag	ตำแหน่งตั้งค่า	แชร์กับทีม
local (ค่าเริ่มต้น)	--scope local	~/.claude.json	ไม่
โปรเจกต์	--scope project	.mcp.json ในโฟลเดอร์รากของโปรเจกต์	ใช่ ผ่าน version control
ผู้ใช้	--scope user	~/.claude.json	ไม่ ทุกโปรเจกต์ของคุณ

[!-info] -info info

ใช้ --scope project สำหรับที่เก็บโค้ดของทีม เพื่อให้ทุกคนได้รับ MCP server โดยอัตโนมัติเมื่อ clone โปรเจกต์ [!-warning] -warning เชื่อมต่อจากไดเรกทอรีด้วยหรือไม่?

หากองค์กรของคุณเปิดใช้งานตัวเชื่อมต่อ Mobiscroll จากไดเรกทอรีของ Anthropic คุณอาจมีเซิร์ฟเวอร์อยู่แล้วผ่านบัญชี Claude ของคุณ รายการ .mcp.json ที่กำหนดขอบเขตโปรเจกต์และตัวเชื่อมต่อไดเรกทอรีเป็นสองเส้นทางไปยังเซิร์ฟเวอร์เดียวกัน และ Claude Code สามารถรายงานว่ารายการโปรเจกต์โหลดไม่สำเร็จจนกว่าคุณจะอนุญาตตัวเชื่อมต่อในบัญชีของคุณเอง อนุญาตเพียงครั้งเดียวแล้วทั้งสองอย่างจะทำงาน หรือลบรายการ .mcp.json แล้วพึ่งพาตัวเชื่อมต่อเพียงอย่างเดียว ดู การตั้งค่าแอป Claude ด้านล่าง

ตรวจสอบการเชื่อมต่อ: รัน /mcp ภายใน Claude Code แผงจะแสดงรายการเซิร์ฟเวอร์ที่เชื่อมต่อแต่ละตัวและจำนวนเครื่องมือ การเชื่อมต่อที่สมบูรณ์จะแสดง mobiscroll พร้อมเครื่องมืออย่างน้อยหนึ่งรายการ

วิธีการทำงาน

เมื่อติดตั้งแล้ว ปลั๊กอินจะให้:

• ทักษะ — mobiscroll-ui เป็นทักษะตัวประสานงานที่ตรวจจับเฟรมเวิร์กของคุณ (React, Angular, Vue, JavaScript หรือ jQuery) และโหลดทักษะย่อยของเฟรมเวิร์กที่ตรงกัน คำถามเกี่ยวกับธีมจัดการโดย mobiscroll-ui-theming ทักษะทั้งหมดติดตั้งพร้อมกัน
• เซิร์ฟเวอร์ MCP — เซิร์ฟเวอร์ Mobiscroll MCP ที่มาพร้อมกันให้การค้นหา schema คอมโพเนนต์แบบสด การตรวจสอบโค้ด และการค้นหาตัวอย่างตามความต้องการ ดังนั้น Claude จึงทำงานจาก API ปัจจุบันแทนการเดาจากความจำ ตรวจสอบโค้ดที่สร้างขึ้นก่อนผสาน เช่นเดียวกับผลลัพธ์ AI อื่นๆ

เมื่อคุณขอให้ Claude Code เขียนโค้ด Mobiscroll มันจะ:

1. ตรวจจับเฟรมเวิร์กและเวอร์ชัน Mobiscroll ผ่าน resolveEnvironment
2. โหลดทักษะเฟรมเวิร์กที่ตรงกันพร้อมรูปแบบที่เป็นธรรมชาติ
3. ค้นหา schema คอมโพเนนต์ก่อนเขียน props หรือ events ใดๆ
4. ตรวจสอบโค้ดที่สร้างขึ้นก่อนส่งคืนให้คุณ

การตั้งค่า Codex

ติดตั้งปลั๊กอิน Mobiscroll สำหรับ OpenAI Codex ปลั๊กอินรวมทักษะการเขียนโค้ดเฟรมเวิร์กและเซิร์ฟเวอร์ MCP ในการติดตั้งครั้งเดียว — ไม่จำเป็นต้องมีไฟล์กำหนดค่าเฉพาะโปรเจกต์

ขั้นตอนที่ 1: ลงทะเบียน marketplace

รันคำสั่งนี้ครั้งเดียวใน Codex เพื่อลงทะเบียน marketplace ของปลั๊กอิน Mobiscroll:

/plugins marketplace add acidb/mobiscroll-marketplace

ขั้นตอนที่ 2: ติดตั้งปลั๊กอิน

/plugins install mobiscroll@mobiscroll

[!-warning] -warning ทักษะปลั๊กอินไม่อัปเดตอัตโนมัติ

การติดตั้งปลั๊กอินจะจับภาพสแนปชอตของทักษะ — Codex จะไม่ดึงเวอร์ชันใหม่ด้วยตัวเอง เพื่อรับเวอร์ชันล่าสุดได้ตลอดเวลา อัปเดตแคตตาล็อก marketplace และติดตั้งปลั๊กอินใหม่: /plugins marketplace update mobiscroll จากนั้น /plugins install mobiscroll@mobiscroll

ขั้นตอนที่ 3: เชื่อมต่อเซิร์ฟเวอร์ MCP

ปลั๊กอินมาพร้อมเซิร์ฟเวอร์ MCP — ไม่จำเป็นต้องกำหนดค่าแยกสำหรับการตั้งค่าส่วนใหญ่ หากต้องการกำหนดค่าด้วยตนเองหรือแชร์กับทีม เพิ่มลงใน ~/.codex/config.toml (ระดับโลก) หรือ .codex/config.toml (โปรเจกต์):

[mcp_servers.mobiscroll]
url = "https://mcp.mobiscroll.com/"

คุณยังสามารถลงทะเบียนจากบรรทัดคำสั่ง:

codex mcp add mobiscroll --url https://mcp.mobiscroll.com/

ขอบเขต	ตำแหน่งกำหนดค่า	แชร์กับทีม
ระดับโลก	~/.codex/config.toml	ไม่ ทุกโปรเจกต์ของคุณ
โปรเจกต์	.codex/config.toml ในรากโปรเจกต์ (เฉพาะโปรเจกต์ที่เชื่อถือได้)	ใช่ ผ่านการควบคุมเวอร์ชัน

[!-info] -info info

ใช้ .codex/config.toml ระดับโปรเจกต์สำหรับที่เก็บโค้ดของทีม เพื่อให้ทุกคนได้รับเซิร์ฟเวอร์ MCP โดยอัตโนมัติเมื่อโคลนโปรเจกต์

ตรวจสอบการเชื่อมต่อ: รัน /mcp ภายใน Codex แผงจะแสดงรายการเซิร์ฟเวอร์ที่เชื่อมต่อแต่ละตัวและจำนวนเครื่องมือ การเชื่อมต่อที่สมบูรณ์จะแสดง mobiscroll พร้อมรายการเครื่องมือ

วิธีการทำงาน

เมื่อติดตั้งแล้ว ปลั๊กอินจะให้:

• ทักษะ — mobiscroll-ui เป็นทักษะตัวประสานงานที่ตรวจจับเฟรมเวิร์กของคุณ (React, Angular, Vue, JavaScript หรือ jQuery) และโหลดทักษะย่อยของเฟรมเวิร์กที่ตรงกัน คำถามเกี่ยวกับธีมจัดการโดย mobiscroll-ui-theming ทักษะทั้งหมดติดตั้งพร้อมกัน
• เซิร์ฟเวอร์ MCP — เซิร์ฟเวอร์ Mobiscroll MCP ที่มาพร้อมกันให้การค้นหา schema คอมโพเนนต์แบบสด การตรวจสอบโค้ด และการค้นหาตัวอย่างตามความต้องการ ดังนั้น Codex จึงทำงานจาก API ปัจจุบันแทนการเดาจากความจำ ตรวจสอบโค้ดที่สร้างขึ้นก่อนผสาน เช่นเดียวกับผลลัพธ์ AI อื่นๆ

เมื่อคุณขอให้ Codex เขียนโค้ด Mobiscroll มันจะ:

1. ตรวจจับเฟรมเวิร์กและเวอร์ชัน Mobiscroll ผ่าน resolveEnvironment
2. โหลดทักษะเฟรมเวิร์กที่ตรงกันพร้อมรูปแบบที่เป็นธรรมชาติ
3. ค้นหา schema คอมโพเนนต์ก่อนเขียน props หรือ events ใดๆ
4. ตรวจสอบโค้ดที่สร้างขึ้นก่อนส่งคืนให้คุณ

การตั้งค่าแอป Claude — claude.ai, Desktop และมือถือ

เซิร์ฟเวอร์ MCP เผยแพร่ในไดเรกทอรีตัวเชื่อมต่อของ Anthropic ดังนั้น Claude บนเว็บ, Claude Desktop และแอปมือถือ Claude สามารถใช้งานได้โดยไม่ต้องมีไฟล์โปรเจกต์หรือคำสั่ง CLI เซิร์ฟเวอร์เดียวกันกับการตั้งค่าโปรแกรมแก้ไขด้านบน — ความแตกต่างคือวิธีการเข้าถึงเท่านั้น

ขั้นตอนที่ 1: เชื่อมต่อจากไดเรกทอรี

เปิด การตั้งค่า → ตัวเชื่อมต่อ → เรียกดูตัวเชื่อมต่อ ค้นหา Mobiscroll แล้วคลิก เชื่อมต่อ

ไม่มีอะไรต้องกำหนดค่า เซิร์ฟเวอร์เป็นแบบอ่านอย่างเดียวและไม่ต้องการบัญชี คีย์ API หรือการลงชื่อเข้าใช้ OAuth

ขั้นตอนที่ 2: เปิดใช้งานสำหรับองค์กรของคุณ (Team และ Enterprise)

ในแผน Team และ Enterprise เจ้าของจะเพิ่มตัวเชื่อมต่อสำหรับองค์กรก่อน จากนั้นสมาชิกแต่ละคนเชื่อมต่อในบัญชีของตนเอง — ตัวเชื่อมต่อแสดงสำหรับทุกคน แต่จะไม่ตอบสนองจนกว่าสมาชิกแต่ละคนจะเชื่อมต่อแล้ว

[!-warning] -warning เพิ่มเป็นตัวเชื่อมต่อแบบกำหนดเองแล้วหรือไม่?

หากคุณเพิ่ม mobiscroll ด้วยตนเองก่อนที่จะอยู่ในไดเรกทอรี ให้ลบรายการนั้นก่อนเชื่อมต่อจากไดเรกทอรี สองรายการที่ชี้ไปที่ https://mcp.mobiscroll.com/ ลงทะเบียนเครื่องมือเดียวกันสองครั้ง และ Claude อาจเรียกใช้สำเนาที่คุณไม่คาดคิด

เปิด การตั้งค่า → ตัวเชื่อมต่อ ค้นหารายการ mobiscroll แบบกำหนดเองของคุณ แล้วลบออก จากนั้นเชื่อมต่อจากไดเรกทอรี

วิธีการทำงาน

Claude เรียกใช้เครื่องมืออ่านอย่างเดียว 14 รายการเดียวกันที่ระบุใน ข้อมูลอ้างอิงเครื่องมือ MCP ด้านล่าง ถามเกี่ยวกับตัวเลือกคอมโพเนนต์ ลายเซ็นเหตุการณ์ ปลายทาง Connect หรือเทียบเท่า SDK ของการเรียก REST แล้วมันจะอ่าน schema ปัจจุบันแทนการตอบจากความจำ

ตัวเชื่อมต่อไดเรกทอรีไม่มีทักษะ ทักษะเหล่านั้นเป็นส่วนหนึ่งของปลั๊กอิน Claude Code และ Codex — เพื่อเขียนโค้ด Mobiscroll ภายในโปรเจกต์ ใช้ การตั้งค่า Claude Code ด้านบน

ข้อมูลอ้างอิงเครื่องมือ MCP

เซิร์ฟเวอร์ MCP เปิดเผยเครื่องมือ 14 รายการ ทั้งหมดเป็นแบบอ่านอย่างเดียวและระบุไว้เช่นนั้น ดังนั้นผู้ช่วย AI สามารถเรียกใช้ได้โดยไม่ต้องขอการยืนยันทุกครั้ง ไม่มีเครื่องมือใดอ่านหรือเขียนสิ่งใดในบัญชี Mobiscroll ของคุณ และเครื่องมือ Connect อธิบาย API Connect แทนการเรียกใช้

เครื่องมือ Mobiscroll UI

เครื่องมือ	สิ่งที่ส่งคืน	ต้องใช้
resolveEnvironment	เฟรมเวิร์กและเวอร์ชันหลักที่โปรเจกต์ใช้ อ่านจาก package.json ค่าเหล่านี้เป็นค่าที่เครื่องมือ UI อื่นๆ รับเป็นอาร์กิวเมนต์	เนื้อหา package.json
listComponents	ทุกคอมโพเนนต์ที่พร้อมใช้งานสำหรับเฟรมเวิร์กและเวอร์ชัน พร้อมคำอธิบายสั้นและจำนวนเอนทิตี	framework, major
getComponentSchema	ตัวเลือก เหตุการณ์ เมธอด และเรนเดอร์สำหรับหนึ่งคอมโพเนนต์ ส่งคืนดัชนีขนาดกะทัดรัดก่อน จากนั้นเรียกอีกครั้งด้วยชื่อเฉพาะเพื่อดูรายละเอียดเต็ม	component, framework, major
searchExamples	ตัวอย่างที่ตรงกับคำสำคัญ กรองตามคอมโพเนนต์และเวอร์ชัน เรียงตามความเกี่ยวข้อง	framework, major
getExampleById	ตัวอย่างที่สมบูรณ์พร้อมไฟล์ต้นฉบับ คำอธิบาย และบันทึกการนำไปใช้	exampleId, framework, major
validateCode	props เหตุการณ์ และเมธอดที่ไม่รู้จักในสไนปเปต รวมถึงการใช้งานที่เลิกใช้แล้ว การวิเคราะห์แบบคงที่ — ไม่มีการดำเนินการใดๆ	component, framework, major, snippet

เครื่องมือ Mobiscroll Connect

เซิร์ฟเวอร์เดียวกันยังตอบคำถามเกี่ยวกับ REST API Connect และ SDK ของมัน สิ่งเหล่านี้มีเอกสารครบถ้วนใน คู่มือการผสานรวม AI Connect

เครื่องมือ	สิ่งที่ส่งคืน	ต้องใช้
resolveConnectEnvironment	SDK Connect และเวอร์ชันที่โปรเจกต์ขึ้นอยู่กับ อ่านจากไฟล์รายการ dependencies	เนื้อหา manifest
listConnectEndpoints	ทุกปลายทาง REST Connect พร้อมเมธอด เส้นทาง สรุป และการรับรองความถูกต้อง	—
getConnectEndpointSchema	หนึ่งปลายทางแบบเต็ม: พารามิเตอร์พร้อมประเภท การรับรองความถูกต้อง สถานะการตอบสนอง ตัวอย่าง	endpointId หรือ method + path
listConnectSdkMethods	ทรัพยากรและเมธอดที่ SDK ของภาษาหนึ่งเปิดเผย	language
getConnectSdkMethod	หนึ่งเมธอด SDK แบบเต็ม: ลายเซ็น พารามิเตอร์ ประเภทส่งคืน ความคิดเห็นเอกสาร ตัวอย่าง	language, method
searchConnect	คำที่ตรงกันข้ามปลายทาง REST และเมธอด SDK	query
mapConnectEndpointToSdk	การเรียก SDK ที่เทียบเท่าสำหรับปลายทาง REST ในแต่ละภาษาหรือหนึ่งภาษา	endpointId หรือ method + path
getConnectErrorTaxonomy	แต่ละหมวดหมู่ข้อผิดพลาดพร้อมสถานะ HTTP และประเภทข้อยกเว้นที่เป็นธรรมชาติต่อภาษา	—

[!-success] -success เริ่มต้นด้วยการเรียก resolve

เซิร์ฟเวอร์ทำงานระยะไกลและไม่สามารถอ่านไฟล์ของคุณได้ ดังนั้น resolveEnvironment และ resolveConnectEnvironment รับเนื้อหา manifest ของคุณเป็นอาร์กิวเมนต์ เครื่องมืออื่นๆ ทุกตัวยอมรับเฟรมเวิร์ก เวอร์ชัน หรือภาษาโดยตรงหากคุณรู้อยู่แล้ว

การแยกเฟรมเวิร์ก

[!-warning] -warning สำคัญ

แต่ละไฟล์กฎและแหล่งเอกสารกำหนดเป้าหมาย หนึ่ง เฟรมเวิร์กหรือโดเมนเท่านั้น ห้ามรวมไฟล์จากเฟรมเวิร์กต่างๆ หรือผสมไฟล์ UI เฟรมเวิร์กกับไฟล์ Connect

เหตุผลที่สำคัญ:

• ตัวเลือก API ส่วนใหญ่แชร์ร่วมกันระหว่างเฟรมเวิร์ก แต่การใช้งานคอมโพเนนต์และการเทมเพลตแตกต่างกันสำหรับแต่ละเฟรมเวิร์ก — การผสมกันทำให้เกิดโค้ดที่เสียหาย

Mobiscroll Connect เป็นโดเมนแยกต่างหาก:

• Connect เป็นชั้นการผสานรวมแบ็กเอนด์ — OAuth 2.0, REST API, webhooks, การซิงค์ปฏิทิน
• ไม่มีคอมโพเนนต์ UI ไม่มี JSX ไม่มีการผูกเฟรมเวิร์กฟรอนต์เอนด์
• Connect ใช้ mobiscroll-connect.mdc และ llms-connect-full.txt — ห้ามใช้ไฟล์ UI เฟรมเวิร์ก
• การผสมเอกสาร Connect กับเอกสาร UI ทำให้ AI สับสนระหว่างปลายทาง REST กับ API คอมโพเนนต์

[!-info] -info info

ปลั๊กอิน mobiscroll@mobiscroll ยังมาพร้อมทักษะ mobiscroll-connect สำหรับ Connect ฝั่งเซิร์ฟเวอร์ (OAuth, REST, การซิงค์ปฏิทิน) มันจะทำงานเฉพาะงาน Connect แบ็กเอนด์และไม่ผสมกับโค้ดคอมโพเนนต์ UI ดู คู่มือการผสานรวม AI Connect

กฎ:

1. ใช้เฉพาะไฟล์กฎที่ตรงกับ หนึ่ง เฟรมเวิร์กหรือโดเมน — ห้ามผสมไฟล์จากเฟรมเวิร์กต่างๆ
2. ลงทะเบียน หนึ่ง แหล่งเอกสารใน Cursor เท่านั้น
3. หากโปรเจกต์ของคุณใช้หลายเฟรมเวิร์ก (เช่น micro-frontends) ตั้งค่าไดเรกทอรีแยกต่างหากพร้อมไฟล์ .mdc แยก
4. หากโปรเจกต์ของคุณใช้ทั้ง UI เฟรมเวิร์กและ Mobiscroll Connect ใช้ไดเรกทอรีบริบท AI แยกสำหรับแต่ละรายการ
5. หากผู้ช่วย AI สร้างโค้ดด้วยการนำเข้าเฟรมเวิร์กที่ผิด ตรวจสอบว่าไฟล์กฎที่ถูกต้องอยู่ในตำแหน่ง

ตัวอย่างคำถาม

ตัวอย่างเหล่านี้แสดงประเภทคำถามที่การผสานรวม AI ออกแบบมาเพื่อจัดการอย่างถูกต้อง

How do I create an Eventcalendar with a weekly scheduler view?
Add drag and drop support to my Mobiscroll timeline.
What is the type for calendar events in Mobiscroll React?

การแก้ไขปัญหา

AI สร้างโค้ดด้วยเฟรมเวิร์กที่ผิด

อาการ: คุณใช้ React แต่ AI สร้างโค้ดสำหรับเฟรมเวิร์กอื่น (เช่น import { Eventcalendar } from '@mobiscroll/angular')

วิธีแก้ไข: ตรวจสอบว่าคุณมีไฟล์กฎที่ถูกต้อง สำหรับ React ใน Cursor ใช้ mobiscroll-react.mdc; สำหรับ Copilot ใช้ mobiscroll-react.instructions.md ใน Cursor ตรวจสอบว่าแหล่ง @docs ที่ลงทะเบียนชี้ไปที่ llms-react-full.txt

AI สร้าง API ที่ไม่มีอยู่จริง

อาการ: AI แนะนำตัวเลือก เหตุการณ์ หรือประเภทที่ไม่มีในเอกสาร Mobiscroll

วิธีแก้ไข: กฎ .mdc สั่งให้ AI ใช้เฉพาะ API ที่พบในเอกสาร หากยังเกิดขึ้น อ้างอิง @docs อย่างชัดเจนในคำค้นหา Cursor หรือตรวจสอบว่าปลั๊กอิน Mobiscroll ติดตั้งใน Claude Code (/plugin list) หรือ Codex (codex plugin list) คุณยังสามารถขอให้ AI ตรวจสอบว่าตัวเลือกมีอยู่ในเอกสาร Mobiscroll

AI ผสม Mobiscroll Connect กับคอมโพเนนต์ UI

อาการ: AI สร้างการเรียก REST API เมื่อคุณถามเกี่ยวกับคอมโพเนนต์ปฏิทินฟรอนต์เอนด์ หรือสร้างโค้ด JSX/คอมโพเนนต์เมื่อคุณถามเกี่ยวกับ API Connect การแก้ไข: Mobiscroll Connect เป็นชั้นการเชื่อมต่อแบ็กเอนด์ (OAuth, REST, webhooks) และไม่มีคอมโพเนนต์ UI Eventcalendar เป็นคอมโพเนนต์ UI ฝั่งฟรอนต์เอนด์ที่ไม่มี REST API ทั้งสองใช้ไฟล์ .mdc และแหล่งเอกสารที่แยกจากกันโดยสิ้นเชิง ตรวจสอบว่าไฟล์ .mdc ที่ถูกต้องทำงานอยู่สำหรับโปรเจกต์ของคุณ หากคุณใช้ทั้งสองในโค้ดเบสเดียวกัน ให้แยกไดเรกทอรีบริบท AI แยกกันสำหรับแต่ละรายการ

เซิร์ฟเวอร์ MCP ไม่ปรากฏหลังการตั้งค่า

อาการ: แผงเซิร์ฟเวอร์ MCP ไม่แสดงรายการ mobiscroll หรือเครื่องมือไม่พร้อมใช้งาน

การแก้ไข: ตรวจสอบว่าไฟล์คอนฟิกอยู่ในตำแหน่งที่ถูกต้องและใช้คีย์รูทที่ถูกต้อง — mcpServers สำหรับ Claude Code, Codex และ Cursor, servers สำหรับ VS Code ตรวจสอบว่าไฟล์เป็น JSON ที่มีรูปแบบถูกต้อง สำหรับ Claude Code หรือ Codex ให้รัน /mcp เพื่อตรวจสอบเซิร์ฟเวอร์ที่เชื่อมต่อ

การอ้างอิงไฟล์

ไฟล์การผสานรวม AI ทั้งหมดมีอยู่ที่ URL ต่อไปนี้:

ไฟล์เอกสาร

ไฟล์	URL
React	https://mobiscroll.com/docs/llms-react-full.txt

ไฟล์กฎ

ไฟล์	Cursor (.mdc)	Copilot (.instructions.md)
กฎ React	mobiscroll-react.mdc	copilot-instructions/mobiscroll-react.instructions.md

ไฟล์กฎเพิ่มเติม

ไฟล์	Cursor (.mdc)	Copilot (.instructions.md)
Orchestrator	mobiscroll-ui.mdc	copilot-instructions/mobiscroll-ui.instructions.md
หลักปฏิบัติ React	mobiscroll-ui-react.mdc	copilot-instructions/mobiscroll-ui-react.instructions.md
การจัดธีม	mobiscroll-ui-theming.mdc	copilot-instructions/mobiscroll-ui-theming.instructions.md

เนื้อหาไฟล์

เนื้อหาทั้งหมดของแต่ละไฟล์แสดงอยู่ด้านล่าง คุณสามารถคัดลอกโดยตรงจากบล็อกเหล่านี้หรือใช้ลิงก์ดาวน์โหลดด้านบน