# 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 โค้ดเก่า

## Quick Start (Deploy บน Render)

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

```bash
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](https://aistudio.google.com/app/apikey)
2. สร้าง API Key ใหม่ (ฟรี)
3. คัดลอก key ไว้

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

1. ไปที่ [Render.com](https://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](https://poke.com/settings/connections/integrations/new)
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:

```text
ช่วยรีวิว 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)

```bash
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:
```bash
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 ฮะไร บอกได้เลย!