เชื่อมต่อเครื่องมือ AI

เชื่อมต่อเครื่องมือ AI

เมื่อ MCP เปิดใช้งานในการปรับใช้ AppScreenshots นี้ ให้เชื่อมต่อเครื่องมือที่รองรับไปที่:

https://appscreenshots.net/api/mcp

เลือก HTTP / Streamable HTTP และ OAuth ล็อกอินด้วยบัญชี AppScreenshots ในเบราว์เซอร์ เลือกโปรเจกต์และ asset ที่เครื่องมือใช้ได้ และตัดสินใจว่าจะอนุญาตให้สร้างโปรเจกต์หรือไม่ ไม่ต้องมีสิทธิ์เข้าถึงฐานข้อมูลหรือ API key

เชื่อมต่อไคลเอนต์ของคุณ

คำสั่งด้านล่างลงทะเบียน endpoint กับไคลเอนต์แต่ละตัว หลังเชื่อมต่อ ให้เสร็จสิ้นการล็อกอินผ่านเบราว์เซอร์เมื่อไคลเอนต์แสดงขึ้น

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

ชุดเชื่อมต่อ

คลังสาธารณะ appscreenshots-mcp มีไฟล์ config สำเร็จรูปสำหรับไคลเอนต์ทั้งหมดข้างต้น, Skill เสริมที่สอนเวิร์กโฟลว์สกรีนช็อต และคำสั่ง doctor ที่ตรวจสอบเซิร์ฟเวอร์จากเทอร์มินัลของคุณ:

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # พิมพ์ส่วนย่อยของ config ไคลเอนต์
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

ตัวช่วยนี้เพียงพิมพ์ config และติดตั้ง Skill เท่านั้น ไม่ใช่ stdio server ภายในเครื่อง — ใช้ความสามารถเชื่อมต่อระยะไกลแบบดั้งเดิมของไคลเอนต์คุณ

เครื่องมือ

เครื่องมือทั้งเก้าด้านล่างเปิดให้ใช้ผ่าน Streamable HTTP ไคลเอนต์อาจเติมคำนำหน้าชื่อ เซิร์ฟเวอร์ที่โฮสต์คือแหล่งข้อมูลจริงสำหรับ input schema และสิทธิ์บัญชี

การดำเนินการแก้ไข

update_project รับรายการการดำเนินการแบบแยกประเภทได้:

• set_name — เปลี่ยนชื่อโปรเจกต์
• add_frame / remove_frame / reorder_frames — จัดการเฟรม
• upsert_element — แทรกหรือแทนที่องค์ประกอบ ต้องระบุเรขาคณิตครบ และคงฟิลด์ที่ละไว้ของประเภทเดียวกัน
• patch_element — แก้ไขบางส่วนตาม id ขององค์ประกอบ เปลี่ยนประเภทไม่ได้
• remove_element — ลบองค์ประกอบ
• set_background — ตั้งพื้นหลังของหนึ่งเฟรม พื้นหลังที่ใช้ร่วมกันจะถูกตรึงรายเฟรม
• set_locales — ตั้งภาษา 1–20 ภาษาและภาษาเริ่มต้น
• set_canvas — ขนาดผืนผ้าใบ (100–5000) และโหมด (separate หรือ continuous)

องค์ประกอบมีงานพิมพ์ ฟิลด์ mockup เครื่อง การอ้างอิง assetId ของรูปภาพ รูปทรง ไอคอน rotation และ stackOrder รูปภาพอ้างอิงด้วย assetId ที่อนุญาตเท่านั้น — ห้ามใช้ URL หรือพาธในเครื่อง และการอ้างอิงที่มีอยู่เซิร์ฟเวอร์เก็บไว้ให้ จึงไม่ต้องส่งกลับ

การเขียนเชิงตรรกะทุกครั้งควรใช้ idempotency key ใหม่ ใช้ซ้ำเฉพาะการลองใหม่ที่เหมือนกันทุกประการ หลังชนกันด้านเวอร์ชัน ให้อ่านเวอร์ชันล่าสุดก่อนดำเนินการต่อ ห้ามใช้ SQL, HTML หรือสคริปต์เป็นคำสั่งแก้ไขเด็ดขาด

ข้อผิดพลาด

ข้อผิดพลาดส่งกลับเป็น JSON {code, message} พร้อม isError: true:

การอนุญาตและขีดจำกัด

เซิร์ฟเวอร์ใช้ OAuth 2.1 กับ PKCE และการล็อกอินผ่านเบราว์เซอร์:

• ขอบเขต: projects:read, projects:write (เฉพาะเมื่อคุณอนุญาตให้สร้างหรือแก้ไข), assets:read และ offline_access
• access token มีอายุ 1 ชั่วโมง และ refresh token มีอายุ 30 วัน
• access token ต้องมี grant ที่ยังมีผล: เมื่อคุณยกเลิกการเชื่อมต่อ token ที่มีอยู่หยุดทำงานทันที
• ขีดจำกัดอัตรา: 60 MCP call ต่อนาทีในแผนฟรี 120 ต่อนาทีในแผนเสียเงิน เกินขีดจำกัดได้รับ HTTP 429 พร้อม Retry-After: 60
• เนื้อหาคำขอจำกัด 2 MB โปรเจกต์จำกัด 20 เฟรมและ 100 องค์ประกอบต่อเฟรม

สิทธิ์ของแผนยังใช้ตามปกติ: ข้อจำกัดโปรเจกต์ เทมเพลตแบบเสียเงิน ฟอนต์กำหนดเอง และการส่งออกแบบชุดไม่เปลี่ยนแปลง และไม่มีค่า AI ที่โฮสต์ไว้ — งานออกแบบและข้อความมาจาก AI ที่เชื่อมต่อ

เริ่มจากสกรีนช็อตของคุณ

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

ลองพรอมป์ต์นี้:

AI ที่เชื่อมต่อทำหน้าที่ออกแบบและเขียนข้อความ MCP บันทึกโปรเจกต์ที่แก้ไขได้ get_project_preview คืนลิงก์เอดิเตอร์และคำแนะนำการตรวจทาน ไม่ใช่ไบต์ของภาพ เอเจนต์ที่มีเครื่องมือเบราว์เซอร์สามารถเปิดเอดิเตอร์ ตรวจสกรีนช็อต แก้ดีไซน์ผ่าน MCP แล้วรีโหลดอย่างปลอดภัยเพื่อดูเวอร์ชันล่าสุด การล็อกอินเบราว์เซอร์แยกจาก OAuth ของ MCP และควรเก็บการแก้ไขที่ยังไม่ได้บันทึกก่อนรีโหลด ผู้ใช้พรีวิวและส่งออกในเอดิเตอร์บนเว็บ

จัดการการเข้าถึง

เปิด Settings → Connected AI tools เพื่อเปลี่ยนโปรเจกต์/asset ที่เลือกหรือยกเลิกการเชื่อมต่อ เครื่องมือเข้าถึงโปรเจกต์ที่ไม่ได้เลือกไม่ได้ ถ้าเว็บไซต์และเครื่องมือ AI แก้ไขโปรเจกต์เดียวกันพร้อมกัน ให้อ่านเวอร์ชันล่าสุดก่อนบันทึกการเปลี่ยนแปลงที่ขัดแย้งกัน

การตรวจทานในเบราว์เซอร์ไม่ต้องใช้ Browserless หรือคิวเรนเดอร์เบื้องหลัง MCP นี้ให้เครื่องมือโปรเจกต์และคำแนะนำการตรวจทานเบราว์เซอร์ ไม่ใช่การเรนเดอร์บนคลาวด์ ถ้าไม่มีเครื่องมือเบราว์เซอร์/รูปภาพ เอเจนต์ควรคืนลิงก์เอดิเตอร์และแจ้งว่าการตรวจทานภาพยังค้างอยู่ แทนที่จะอ้างว่าตรวจสอบแล้ว

การแก้ปัญหา

สำหรับหมายเหตุเฉพาะไคลเอนต์และเมทริกซ์การตรวจสอบปัจจุบัน ดูคู่มือแก้ปัญหาของชุดเชื่อมต่อ