Poke MCP + Gemini Frontend Tools

MCP Server ที่มีเครื่องมือ AI ช่วยเรื่อง UX/UI Review, สร้าง Component เว็บ, และ Refactor โค้ด โดยใช้ Gemini

ออกแบบมาเพื่อใช้ร่วมกับ Poke AI โดยเพราะ

Features

• review_ui_design — วิจารณ์ UX/UI จากภาพหรือคำอธิบาย

• generate_web_component — สร้างโค้ด React + Tailwind ตาม requirement

• refactor_code — ปรับปรุงและ refactor โค้ดเก่า

Related MCP server: Website Generator MCP Server

Quick Start (Deploy บน Render)

1. Fork หรือ Clone Repo นี้

git clone https://github.com/YOUR_USERNAME/poke-mcp-gemini-frontend-tools.git
cd poke-mcp-gemini-frontend-tools

2. สร้าง Gemini API Key

1. ไปที่ Google AI Studio

2. สร้าง API Key ใหม่ (ฟรี)

3. คัดลอก key ไว้

3. Deploy บน Render (แนะนำ)

1. ไปที่ Render.com → New Web Service

2. Connect GitHub repo นี้

3. ตั้งค่า:

   • Name: poke-mcp-gemini-frontend

   • Environment: Python 3

   • Build Command: pip install -r requirements.txt

   • Start Command: uvicorn src.server:app --host 0.0.0.0 --port $PORT

4. เพิ่ม Environment Variable:

   • GEMINI_API_KEY = (key ที่ได้จากขั้นตอน 2)

5. Deploy

หลัง deploy เสร็จ คุณจะได้ URL แบบนี้: https://poke-mcp-gemini-frontend.onrender.com/mcp

4. เชื่อมต่อกับ Poke

1. ไปที่ Poke Settings → Connections → Integrations

2. ตั้งชื่อ integration เช่น Gemini Frontend Tools

3. ใส่ MCP Server URL:

   https://your-service-name.onrender.com/mcp

4. (Optional) ใส่ API Key ถ้าคุณตั้งค่าไว้

5. Create Integration

5. ทดสอบการใช้งาน

ลองพิมพ์ใน Poke:

ช่วยรีวิว UI หน้านี้ให้หน่อย (แนบภาพมาได้)

ใช้ Gemini Frontend Tools integration's generate_web_component tool 
สร้างปุ่ม gradient สีฟ้า-ม่วง แบบมี hover effect ด้วย React + Tailwind

ช่วย refactor โค้ดนี้ให้ดีขึ้น
[paste โค้ด]

ตัวอย่าง Prompt ที่ใช้ได้ดี

Review UI

• "ช่วยรีวิวภาพนี้ให้หน่อย ว่าดีไหม ควรปรับอะไร"

• "ใช้ review_ui_design tool วิจารณ์ dashboard นี้"

Generate Component

• "สร้าง component Card แบบสวยๆ สำหรับแสดงสินค้า ใช้ Tailwind"

• "ใช้ generate_web_component tool สร้าง modal แบบ responsive"

Refactor

• "ช่วย refactor โค้ดนี้ให้ใช้ modern pattern มากขึ้น"

• "ใช้ refactor_code tool ปรับปรุงโค้ดนี้ให้อ่านง่ายขึ้น"

Development (Local)

python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

# สร้างไฟล์ .env แล้วใส่ GEMINI_API_KEY
cp .env.example .env

python src/server.py

ทดสอบด้วย MCP Inspector:

npx @modelcontextprotocol/inspector http://localhost:8000/mcp

Tech Stack

• Python + FastMCP

• Google Gemini 1.5 Pro / Flash

• Deploy on Render (รองรับ Streamable HTTP)

Next Steps / Ideas

• เพิ่ม tool generate_landing_page

• เพิ่ม tool check_accessibility

• เชื่อมกับ Supabase / Vercel API

• สร้าง tool สำหรับ Framer Motion animation

สร้างโดย Grok สำหรับผู้ใช้ที่ต้องการขยายความสามารถของ Poke ด้วย Gemini

มีคำถามหรืออยากเพิ่ม tool ฮะไร บอกได้เลย!