Installation

StackUI ใช้งานได้ทันทีผ่าน Remote MCP โดยไม่ต้อง clone repository, ติดตั้ง Bun หรือคัดลอก token ไปใส่เอง เพียงเพิ่ม endpoint ด้านล่างแล้วเข้าสู่ระบบด้วย Google หรือ GitHub

https://stackui-mcp.intern-studio.com/mcp

Endpoint ต้องลงท้ายด้วย /mcp การเปิด https://stackui-mcp.intern-studio.com/ ใน browser แล้วพบ 404 page not found ถือว่าเป็นปกติ

Quick start

ถ้าใช้ AI coding agent ที่แก้ MCP configuration ให้ได้ สามารถส่งข้อความนี้ได้เลย:

ช่วยติดตั้งและเชื่อม StackUI MCP แบบ global ให้หน่อย:
https://stackui-mcp.intern-studio.com/mcp

จากนั้นเปิด OAuth ให้ฉันเข้าสู่ระบบ และตรวจสอบว่าเห็นเครื่องมือของ StackUI

หลังเพิ่ม server แล้ว client จะเปิดหน้า authorization ใน browser:

1. ตรวจชื่อ application ที่กำลังขอเชื่อมต่อ
2. เลือก Continue with GitHub หรือ Continue with Google
3. เข้าสู่ระบบและอนุญาตให้ client อ่าน StackUI widgets
4. กลับไปที่ client แล้วรอให้สถานะของ stackui เป็น connected

Client จะเก็บ OAuth token และ refresh token ให้เอง ไม่ต้องนำ token จาก browser ไปวางในไฟล์ config

เลือกวิธีติดตั้ง

Codex

ติดตั้งด้วย CLI

รันสองคำสั่งนี้ใน terminal:

codex mcp add stackui --url https://stackui-mcp.intern-studio.com/mcp
codex mcp login stackui

คำสั่งที่สองจะเปิด browser เพื่อเข้าสู่ระบบ เมื่อเสร็จแล้วตรวจสถานะได้ด้วย:

codex mcp list

Codex app, CLI และ IDE extension ใช้ MCP configuration ร่วมกันบนเครื่องเดียวกัน จึงติดตั้งครั้งเดียวแล้วใช้งานได้จากทุก surface ของ Codex

ติดตั้งจาก Codex app หรือ IDE extension

1. เปิด Settings → MCP servers
2. เลือก Add server
3. ตั้งชื่อเป็น stackui และเลือก Streamable HTTP
4. ใส่ URL https://stackui-mcp.intern-studio.com/mcp
5. กด Save แล้ว Restart
6. กด Authenticate ที่ server stackui

ดูรายละเอียดเพิ่มเติมได้ที่ Codex MCP documentation

Claude Code

เพิ่ม StackUI ในระดับ user เพื่อให้ใช้ได้ทุกโปรเจกต์:

claude mcp add --transport http --scope user stackui https://stackui-mcp.intern-studio.com/mcp

จากนั้นเปิด Claude Code แล้วใช้คำสั่ง:

/mcp

เลือก stackui แล้วกด Authenticate ระบบจะเปิด browser ให้เข้าสู่ระบบ หากต้องการตรวจ config จาก terminal ใช้ claude mcp get stackui

ดูรายละเอียดเพิ่มเติมได้ที่ Claude Code MCP documentation

Claude, Cowork และ Claude Desktop

Remote MCP ของ StackUI เพิ่มเป็น Custom Connector ได้โดยไม่ต้องใช้ terminal:

1. ไปที่ Customize → Connectors
2. กด + → Add custom connector
3. ตั้งชื่อเป็น StackUI
4. วาง URL https://stackui-mcp.intern-studio.com/mcp
5. ไม่ต้องกรอก OAuth Client ID หรือ Client Secret
6. กด Add แล้ว Connect เพื่อเข้าสู่ระบบด้วย Google หรือ GitHub
7. เปิดใช้งาน StackUI จากเมนู + → Connectors ใน conversation ที่ต้องการ

สำหรับ Team และ Enterprise ผู้ดูแล workspace ต้องเพิ่ม connector ให้ organization ก่อน ดูรายละเอียดได้ที่ Claude remote MCP connectors

Kiro IDE และ Kiro CLI

Add StackUI to Kiro

หรือเพิ่มค่าใน user-level MCP configuration เพื่อใช้ทุก workspace:

• Windows: %USERPROFILE%\\.kiro\\settings\\mcp.json
• macOS / Linux: ~/.kiro/settings/mcp.json

{
  "mcpServers": {
    "stackui": {
      "url": "https://stackui-mcp.intern-studio.com/mcp",
      "disabled": false
    }
  }
}

บันทึกไฟล์แล้ว Kiro จะแสดง popup ให้ Authenticate ผ่าน browser โดยอัตโนมัติ StackUI รองรับ Dynamic Client Registration (DCR) จึงไม่ต้องเพิ่ม clientId, clientSecret หรือ Authorization header

ดูรายละเอียดเพิ่มเติมได้ที่ Kiro MCP configuration

IDE หรือ MCP client อื่น ๆ

ใช้ค่าต่อไปนี้ในหน้า MCP settings ของ client:

Client ต้องรองรับ Remote Streamable HTTP, OAuth Authorization Code + PKCE และ Dynamic Client Registration หาก client รองรับเฉพาะ static Bearer token จะยังใช้ flow อัตโนมัตินี้ไม่ได้

ตรวจว่าเชื่อมสำเร็จ

ลองส่ง prompt นี้ให้ AI:

ใช้ StackUI MCP แสดงรายการ widgets ทั้งหมด แล้วแนะนำ widget สำหรับหน้า Investor Relations ให้ 3 รายการ

เมื่อเชื่อมสำเร็จ client จะเห็นเครื่องมือ 4 ตัว:

ตัวอย่าง prompt สำหรับเริ่มสร้างหน้าเว็บ:

ใช้ StackUI MCP สร้างส่วน Company Overview สำหรับหน้า Investor Relations
เลือก widget ที่เหมาะสม ดึง get_core และ get_widget ให้ครบ
ใช้ HTML/CSS/JS และ dependencies ตามที่ MCP ส่งมาโดยไม่เปลี่ยน class หรือเวอร์ชัน

การเข้าสู่ระบบทำงานอย่างไร

1. MCP client พบว่า StackUI ต้องยืนยันตัวตน
2. Client ลงทะเบียน OAuth application ชั่วคราวกับ StackUI ผ่าน DCR
3. Browser เปิดหน้า authorization ของ StackUI
4. ผู้ใช้เลือก Google หรือ GitHub และอนุญาตการเชื่อมต่อ
5. StackUI ส่ง authorization code กลับไปยัง callback ของ client
6. Client แลก code เป็น token เก็บไว้อย่างปลอดภัย และ refresh ให้ในครั้งถัดไป

อย่าเปิด /auth โดยตรงเพื่อเริ่ม login เพราะหน้านี้ต้องรับ authorization request จาก client ก่อน หากเปิดตรง ๆ จะเห็นเพียงข้อความว่า authorization service พร้อมใช้งาน

Troubleshooting

เปิด URL แล้วเจอ 404

ตรวจว่าใส่ URL ครบถึง /mcp:

https://stackui-mcp.intern-studio.com/mcp

หน้า root ของ MCP server ไม่มีหน้าเว็บไซต์ จึงตอบ 404 ตามปกติ

ไม่เห็นหน้า Google หรือ GitHub

เริ่ม authentication จาก MCP client แทนการเปิด /auth เอง:

• Codex: codex mcp login stackui
• Claude Code: เปิด /mcp แล้วเลือก Authenticate
• Kiro CLI: /mcp auth stackui
• Kiro IDE: เปิด MCP panel แล้วกด Re-authenticate

ได้ 401 Unauthorized หรือ token หมดอายุ

ล้าง session เดิมแล้ว login ใหม่:

codex mcp logout stackui
codex mcp login stackui

สำหรับ Claude Code ใช้เมนู Clear authentication ใน /mcp ส่วน Kiro ใช้ /mcp logout stackui แล้ว /mcp auth stackui

ปุ่ม Google หรือ GitHub แสดง Setup required

OAuth provider ฝั่ง StackUI ยังไม่ได้ตั้งค่าบน server ผู้ใช้แก้จากเครื่องตัวเองไม่ได้ ให้แจ้งผู้ดูแล StackUI พร้อมชื่อ provider ที่พบปัญหา

Client เชื่อมต่อไม่ได้

• ตรวจว่า client รองรับ Remote Streamable HTTP และ OAuth/DCR
• ตรวจว่าไม่ได้เพิ่ม Authorization: Bearer <token> จากตัวอย่างเก่า
• ลบ server เดิมแล้วเพิ่ม URL ใหม่อีกครั้ง
• ตรวจสถานะ service ที่ StackUI MCP health

ใช้ CDN โดยตรง

ถ้าไม่ได้ใช้ AI/MCP สามารถโหลด core และ widget assets โดยตรงได้:

<link
  rel="stylesheet"
  href="https://stackui-cdn.intern-studio.com/core/css/stackui-core.css"
>
<link
  rel="stylesheet"
  href="https://stackui-cdn.intern-studio.com/widgets/widget1/about/about.css"
>

<!-- นำ HTML variant ที่ get_widget ส่งมาใส่ตรงนี้ -->

<script src="https://stackui-cdn.intern-studio.com/core/js/bootstrap.bundle.min.js"></script>
<script src="https://stackui-cdn.intern-studio.com/widgets/widget1/about/about.js"></script>

Widget ที่ใช้ Swiper, Slick, jQuery หรือ ECharts ต้องโหลดไฟล์ตามลำดับใน dependencies.vendor ที่ get_widget ส่งกลับมา และต้องใช้ vendor version เดิม

Local MCP สำหรับ contributor

หากต้องการพัฒนา StackUI จาก source:

git clone https://github.com/Pxthaphi/stack-ui.git
cd stack-ui
bun install
bun run mcp

Local mode จะส่ง source และ relative asset paths เพื่อให้แก้ไข widget ภายใน repository ได้โดยตรง