เมนู
ในหน้านี้

AI Chat Integration

เชื่อมต่อกับ LLM models เช่น OpenAI GPT หรือ Google Gemini สำหรับ AI chat

Live demo นี้เชื่อมต่อกับ Google Gemini 2.5 Flash API แบบ real-time ลองแชทกับ AI assistant ด้านล่างได้เลย — มันเข้าใจหลายภาษาและช่วยตอบคำถามเกี่ยวกับ web development, Surakiat.dev หรืออะไรก็ได้ การ implement ใช้ Next.js Server Actions เพื่อเรียก API อย่างปลอดภัยโดยไม่เปิดเผย keys ให้ฝั่ง client

นี่คือ API integration จริงโดยใช้ @google/genai SDK AI ตอบกลับตาม conversation context และตอบได้ทุกภาษาที่คุณใช้ คุณสามารถเปลี่ยนจาก Gemini เป็น OpenAI, Anthropic หรือ LLM provider อื่นๆ ได้ — รูปแบบ server action ช่วยรักษา API keys ให้ปลอดภัย

วิธีการทำงาน

app/
└── actions/
    └── chat.ts              # Server Action for Gemini API

features/
└── sharing/
    └── components/
        └── Integration/
            └── AIChatShowcase/
                └── AIChatShowcase.tsx  # Chat UI component

.env.local
└── GEMINI_API_KEY=your_key  # Keep server-side only (no NEXT_PUBLIC_)

Streaming

Real-time streaming responses for better UX.

Fast Response

Optimized API calls for quick AI responses.

Error Handling

Graceful error handling and retry logic.

Type-Safe

Full TypeScript support with typed responses.

คุณสมบัติหลัก

  • •Streaming responses สำหรับ real-time chat
  • •Support หลาย LLM providers (OpenAI, Gemini)
  • •Chat history management
  • •Rate limiting และ error handling
  • •Customizable AI prompts

ตัวอย่างการใช้งาน
API

AI Chat DemoGemini 2.5 Flash

Demo นี้ใช้ Google Gemini 2.5 Flash model — โมเดล AI ล่าสุดและเร็วที่สุดของ Google พร้อมความสามารถในการให้เหตุผลที่ดีขึ้น

สวัสดีครับ! ผมเป็น Surakiat.dev AI assistant ยินดีช่วยเหลือคุณครับ