AI & Automation (vnROM)

Cover image for Antigravity + Stitch + MCP Server
quynhtruong
quynhtruong

Posted on

Antigravity + Stitch + MCP Server

Mấy hôm nay thấy khá nhiều anh em Antigravity bắt đầu nhắc đến Stitch, nhất là sau khi Stitch ra MCP Server để cắm thẳng vào IDE/agent. Với góc nhìn của một “tín đồ” Antigravity, mình tóm tắt nhanh để nắm được thông tin nhé.


Stitch là gì và nó làm được gì?

Hiểu nôm na, Stitch là “Figma + AI” của Google:

  • Bạn mô tả bằng prompt, phác tay, wireframe hoặc đưa ảnh UI lên, Stitch sẽ biến thành giao diện web/app hoàn chỉnh ở mức prototype.
  • Stitch có thể sinh ra layout, component, style, rồi cho bạn xuất code front-end ở mức cơ bản (HTML/CSS/React/Tailwind, tùy template).
  • Từ Stitch, bạn có thể mang thiết kế sang Figma (copy hoặc export qua các bridge/plugin) để tiếp tục refine, handoff cho team hoặc lưu trong workflow design hiện tại.

Tức là thay vì ngồi kéo thả từng màn hình trong Figma, anh em có thể để Stitch lo phần “thô” và mình tập trung chỉnh sửa, tinh chỉnh cho chuẩn product.


Antigravity đang dùng Stitch trong workflow như thế nào?

Hiện tại, combo phổ biến mà nhiều tài liệu/demo đang push là:

  1. Planning & backend với Antigravity
  2. Dùng Antigravity để phân tích requirement, lên spec, thiết kế API/database, scaffold project, v.v.
  3. Về bản chất, Antigravity đóng vai “AI architect + AI coder”.

  4. UI/UX với Stitch

  5. Khi đã rõ flow, màn hình, use case, bạn nhảy qua Stitch để “dựng da thịt” cho UI.

  6. Ở đây Stitch giống như một designer AI: biến prompt + sketch thành layout pixel-perfect tương đối ổn, sinh code và asset.

  7. Implementation & glue code với Antigravity

  8. Lấy thiết kế/code từ Stitch, đưa trở lại Antigravity.

  9. Cho Antigravity đọc UI + code đó, rồi yêu cầu nó:

    • Refactor theo codebase hiện tại.
    • Kết nối API/backend đã thiết kế.
    • Bổ sung logic, state management, routing, v.v.

Nói gọn: Antigravity lo “não” và “xương sống”, Stitch lo “da thịt” UI, rồi Antigravity ráp lại thành app chạy được.


MCP Server của Stitch: miếng ghép mới quan trọng

Điểm đáng nói là Stitch giờ đã có MCP Server (Model Context Protocol), và đây là thứ đang mở khóa nhiều thứ:

  • Agent/IDE (trong đó có Antigravity) có thể gọi Stitch như một service, kiểu:
    • “Tạo cho tôi một màn hình dashboard với layout XYZ”
    • “Lấy code của thiết kế màn hình ABC trong project Stitch này”
  • Từ trong IDE/agent, bạn có thể:
    • Tạo màn hình mới trên Stitch.
    • Lấy danh sách thiết kế.
    • Kéo code + context visual (ảnh/preview UI) về để model hiểu chính xác mình đang chỉnh gì.
  • Việc thiết lập thường chỉ là: thêm MCP server của Stitch vào config, cấp token/credential, thế là từ Antigravity (hoặc các IDE khác hỗ trợ MCP) có thể gọi Stitch như tool.

Kết quả là flow công việc có thể trở thành:

Antigravity hỏi Stitch → Stitch trả UI + code → Antigravity chỉnh, nối backend, test, deploy.

Không cần bạn phải tự tay nhảy qua lại nhiều tab nữa.


Câu chuyện “bị khóa” trong hệ sinh thái Google?

Đây mới là chỗ thú vị để bàn:

  • Về mặt kỹ thuật, MCP là một giao thức mở; không chỉ Stitch mới làm MCP server, và không chỉ Antigravity mới nói chuyện được với MCP.
  • Về mặt trải nghiệm, Google rõ ràng đang đẩy mạnh combo:
    • Antigravity (IDE + agent)
    • Stitch (UI/UX AI)
    • Data/Cloud/Firestore/Vertex và các dịch vụ khác phía sau
  • Nếu bạn đi “full combo” này, lợi ích là:
    • Flow cực mượt, ít friction, dễ on-board cho team.
    • Config ít, mọi thứ “nói chuyện” với nhau khá tự nhiên.
  • Nhưng đổi lại, câu hỏi là:
    • Code, asset, design, workspace của bạn đang phụ thuộc bao nhiêu vào stack Google?
    • Liệu tương lai họ có “ưu ái” chính sản phẩm trong hệ sinh thái mình hơn các tool bên thứ ba?
    • Khi đã quen với workflow Antigravity ↔ Stitch ↔ Cloud, việc chuyển sang stack khác (VS Code + local agent + Figma + backend tự host) có còn dễ nữa không?

Ở thời điểm hiện tại, chưa có bằng chứng rõ ràng rằng Antigravity sẽ bắt buộc bạn dùng Stitch hay khóa cứng với một combo duy nhất. Tuy nhiên, nhìn vào cách họ thiết kế trải nghiệm và tài liệu hướng dẫn, có thể thấy Google đang cố ý “bọc” người dùng trong một luồng công cụ thống nhất.


Cá nhân mình đang thấy thế này:

  • Ngắn hạn:
    • Antigravity + Stitch + MCP là combo rất đáng thử.
    • Với anh em solo dev, startup nhỏ, hoặc team không có designer full-time, đây là đường tắt cực mạnh để ra prototype và MVP.
  • Dài hạn:
    • Nên giữ sự độc lập ở mức tối thiểu:
    • Thiết kế quan trọng vẫn lưu bản Figma/SVG/asset “neutral”.
    • Code sinh ra phải đọc được, chỉnh được, migrate được sang IDE khác.
    • Hạn chế phụ thuộc vào tính năng quá “độc quyền” của riêng một tool.
    • Tập mindset: tool nào giúp mình nhanh hơn thì dùng, nhưng workflow phải đủ linh hoạt để có thể thay thế từng mảnh.

Anh em Antigravity/Stitch thấy sao?

Một vài câu hỏi mở để anh em bàn:

  • Anh em đã thử Stitch trong combo với Antigravity chưa? Trải nghiệm có “đã” như quảng cáo không?
  • Với những bạn đang làm team >3 người (dev + design), việc đưa Stitch vào có phá vỡ hay tối ưu quy trình hiện tại?
  • Mọi người có lo lắng về chuyện bị khóa trong hệ sinh thái Google khi dùng full combo Antigravity + Stitch + Cloud không, hay “miễn nhanh là chơi”?

Mời anh em chia sẻ thêm case thực tế, ưu/nhược, hoặc tips config MCP giữa Antigravity và Stitch cho mượt. Ai có screenshot project đầu tay “Stitch design – Antigravity code” thì quăng lên khoe luôn cho vui 😄

Top comments (1)

Collapse
 
vnrom profile image
vnROM

Để dùng Stitch với MCP (Model Context Protocol), cần 2 phần: setup server Stitch MCP và khai báo trong client (Claude, Cursor, v.v.):

1. Chuẩn bị môi trường

  • Cài Node.js (>=18) và npm.
  • Đã có tài khoản Google, bật Stitch trong 1 project GCP (Labs/Experiment phần Stitch, hoặc theo docs Stitch).
  • Cài CLI Stitch MCP helper:
    • npm install -g @_davideast/stitch-mcp hoặc dùng trực tiếp npx @_davideast/stitch-mcp.

2. Authenticate Google Cloud cho Stitch MCP

Trong terminal chạy lần lượt:

  • User auth:
    • CLOUDSDK_CONFIG="~/.stitch-mcp/config" gcloud auth login rồi login trong browser.
  • Application Default Credentials:
    • gcloud auth application-default login để MCP server dùng được ADC.
  • Chọn project GCP có bật Stitch, CLI sẽ cho bạn chọn từ danh sách.
  • CLI cũng check IAM roles + bật Stitch API nếu cần.

3. Tạo config MCP cho client (Claude / Cursor / v.v.)

Sau khi auth xong, chạy:

  • npx @_davideast/stitch-mcp setup
  • CLI sẽ sinh ra block config kiểu:
"mcpServers": {
  "stitch": {
    "command": "npx",
    "args": ["@_davideast/stitch-mcp", "proxy"],
    "env": {
      "STITCH_PROJECT_ID": "your-project-id"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Copy phần này vào config MCP của client:
    • Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) hoặc %APPDATA%\Claude\claude_desktop_config.json (Windows).
    • Cursor: Settings → MCP → Add New Server → Command npx, Args @_davideast/stitch-mcp proxy, set env STITCH_PROJECT_ID=....
    • Claude Code: tạo .mcp.json trong root project và dán block trên.

4. Chạy server và dùng trong AI

  • Start server:
    • npx @_davideast/stitch-mcp proxy trong terminal.
  • Trong Claude/Cursor, gõ prompt kiểu:
    • "Dùng Stitch để tạo UI màn hình login, dùng shadcn UI, layout cho mobile trước".
    • "Mở project Stitch hiện tại và chỉnh sửa form checkout, thêm field địa chỉ chi tiết".
  • MCP sẽ expose tools như “list projects, open design, generate UI, export code”, bạn chỉ cần mô tả bằng tiếng Anh/Việt, agent sẽ gọi Stitch MCP tự động.

5. Một số tips cho workflow dev

  • Kết hợp Stitch + shadcn registry + MCP: generate UI → xuất component chuẩn Tailwind/shadcn để đưa thẳng vào codebase (Next.js, v.v.).
  • Dùng thêm Auto Stitch MCP (Glama, auto-stitch-mcp) nếu muốn config nhanh qua npx -y auto-stitch-mcp và copy sẵn config vào các client.
  • Khi lỗi, dùng lệnh npx @_davideast/stitch-mcp doctor để check auth, project, IAM.