GSAP MCP Server (Model Context Protocol)

GSAP MCP Server adalah server MCP lokal & global yang dirancang khusus untuk mempermudah AI Agent (seperti OpenCode, Claude Code, Cursor, dll.) dalam membuat kode animasi GSAP v3, mencari dokumentasi, memvalidasi sintaks selektor CSS, dan memberikan panduan praktik terbaik (best practices).

Fitur Utama

• Pencarian Dokumentasi Hibrida: Pencarian dokumentasi instan secara offline dan fallback pencarian realtime (live fetch) langsung ke situs resmi gsap.com.

• Generasi Kode Animasi: Menghasilkan kode GSAP untuk to, from, fromTo, timeline, stagger, dan scrollTrigger.

• Validasi Selektor CSS: Memeriksa potensi bug sintaksis selector DOM dan masalah kompatibilitas cross-browser (seperti :has() atau kurung unclosed).

• Panduan Best Practices & Debugging: Pembantu otomatis untuk mengatasi masalah animasi seperti animasi tidak jalan, ScrollTrigger macet, atau optimasi React/Vue/Svelte.

• Efisiensi Token AI: Output teks yang sudah disanitasi dari HTML junk tag (<nav>, <style>, <script>) untuk menghemat context window AI.

Related MCP server: Ultimate GSAP Master MCP Server

Stack Teknologi

• Runtime: Node.js (v18.0.0+) ES Modules

• Protocol: @modelcontextprotocol/sdk (StdioServerTransport)

• Validation: zod v3

Cara Instalasi & Konfigurasi

1. Instalasi Dependensi Lokal

git clone https://github.com/itzd-dev/gsap-mcp.git
cd gsap-mcp
npm install

2. Konfigurasi Global di OpenCode

Tambahkan konfigurasi berikut ke file konfigurasi global OpenCode Anda di ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "gsap": {
      "type": "local",
      "command": [
        "node",
        "/Users/odi/Documents/gsap-mcp/src/index.js"
      ],
      "enabled": true
    }
  }
}

3. Konfigurasi di Antigravity IDE / Claude Desktop

Tambahkan ke konfigurasi MCP Server Antigravity IDE (mcp_config.json):

{
  "mcpServers": {
    "gsap": {
      "command": "node",
      "args": [
        "/Users/odi/Documents/gsap-mcp/src/index.js"
      ]
    }
  }
}

Daftar Tools MCP (10 Tools)

Pengujian & Verifikasi (Test Suite)

Server ini dilengkapi dengan test suite otomatis untuk memverifikasi keabsahan sintaksis dan tool handler.

Jalankan perintah pengujian:

npm test

Output Pengujian:

📊 TEST SUMMARY
✅ Tools: 10/10
✅ Helpers: 12/12
✅ Imports: OK
🎉 ALL TESTS PASSED! Server ready to use.

Lisensi

MIT License - Bebas digunakan dan dikembangkan untuk proyek komersial maupun non-komersial.