MCP Server
ใช้ StackUI กับ AI tools ผ่าน Model Context Protocol (MCP)
MCP คืออะไร
MCP (Model Context Protocol) เป็นมาตรฐานที่ให้ AI tools เรียกใช้ข้อมูลจากภายนอกได้ StackUI MCP Server ให้ AI ค้นหา component, ดึง template, เลือก brand preset, และสร้างหน้าเว็บ IR ได้อัตโนมัติ
รองรับ AI Tools
- Kiro (AWS)
- Cursor
- Claude Desktop
- Windsurf
- VS Code + MCP extension
- AI tool อื่นๆ ที่รองรับ MCP
เริ่มต้นใช้งาน
เพิ่ม config ในไฟล์ MCP settings ของ AI tool ที่ใช้:
{ "mcpServers": { "stackui": { "url": "https://stackui-mcp.intern-studio.com/mcp" } }}Tools ที่มี
list_components
แสดงรายชื่อ component ทั้งหมด
| Parameter | Type | Required | Description |
|---|---|---|---|
category | string | ไม่ | filter ตาม category: layout, finance, people, content, utility |
get_component_detail
ดึงข้อมูลละเอียดของ component — meta, HTML template, data_schema, css_variables, ai_hints
| Parameter | Type | Required | Description |
|---|---|---|---|
component_id | string | ใช่ | ID ของ component เช่น stat-counter, hero, timeline |
variation | string | ไม่ | variation ที่ต้องการ เช่น grid, dark, full-image |
search_components
ค้นหา component ที่เหมาะกับ use case
| Parameter | Type | Required | Description |
|---|---|---|---|
query | string | ใช่ | อธิบายสิ่งที่ต้องการ เช่น "ตัวเลขรายได้กำไร" |
page_type | string | ไม่ | ประเภทหน้า เช่น financial-highlights, board-of-directors |
get_brand_preset
ดึง brand preset (สี, font, spacing)
| Parameter | Type | Required | Description |
|---|---|---|---|
brand_id | string | ไม่ | ID ของ brand preset เช่น default, thai-listed, international-ir, minimal-modern |
generate_page
สร้างหน้าเว็บ IR ทั้งหน้า — ใช้ StackUI CDN + แยก brand CSS
| Parameter | Type | Required | Description |
|---|---|---|---|
page_title | string | ใช่ | ชื่อหน้า |
brand_id | string | ไม่ | ID ของ brand preset |
sections | array | ใช่ | รายการ sections — แต่ละ section ระบุ component_id, variation, data (optional) |
Output: JSON ที่มี html (index.html) + brand_css (css/brand.css) แยกกัน
ตัวอย่างการใช้งาน
พิมพ์ใน AI chat:
สร้างหน้า financial highlights ของ บมจ.ABC
ใช้ brand thai-listed
แสดงรายได้ 5,000 ล้าน กำไร 800 ล้านAI จะเรียก MCP tools อัตโนมัติ:
search_components→ หา component ที่เหมาะget_brand_preset→ ดึง brand สี/fontgenerate_page→ สร้างหน้าเว็บ
Health Check
https://stackui-mcp.intern-studio.com/healthEndpoints
| Endpoint | Transport | ใช้กับ |
|---|---|---|
/mcp | Streamable HTTP (แนะนำ) | Cursor, Kiro, Claude Desktop, Windsurf |
/sse | Server-Sent Events (fallback) | กรณี Streamable HTTP เชื่อมไม่ได้ |
/health | HTTP GET | Health check |