Context7 – ดึงเอกสารโค้ดเวอร์ชันล่าสุดให้ LLM และ AI code editor

Context7 คืออะไร

Context7 คือ platform ที่แก้ปัญหา LLM ตอบคำถามเกี่ยวกับโค้ดด้วยข้อมูลเก่าหรือสร้าง API ที่ไม่มีจริง โดยดึงเอกสารและตัวอย่างโค้ดเวอร์ชันล่าสุดจากแหล่งที่มาตรงๆ มาใส่ใน context ของ LLM โดยอัตโนมัติ

ปัญหาที่แก้:

• ❌ ตัวอย่างโค้ดล้าสมัย (มาจาก training data เก่า)
• ❌ API ที่ไม่มีจริง (hallucination)
• ❌ คำตอบทั่วไปสำหรับ package เวอร์ชันเก่า

ใช้งานง่าย: พิมพ์คำถามแล้วใส่ use context7 ต่อท้าย เช่น:

copyCreate a Next.js middleware that checks for a valid JWT in cookies
and redirects unauthenticated users to `/login`. use context7

Context7 จะดึงเอกสารมาให้ LLM โดยอัตโนมัติ

วิธีใช้งาน

มี 2 โหมดให้เลือกตามความเหมาะสม:

1. CLI + Skills – สำหรับ agent ทั่วไปและระบบที่ไม่รองรับ MCP

เหมาะกับ: นักพัฒนาที่ใช้ agent หลากหลายตัว หรือต้องการความยืดหยุ่นในการใช้งาน

copynpm install -g @upstash/context7-mcp

หลังจากติดตั้ง ให้ใช้คำสั่ง ctx7 ในการดึงเอกสาร:

copy# ตัวอย่างการใช้งาน
ctx7 "Next.js middleware authentication"

Agent จะได้รับเอกสารล่าสุดในรูปแบบ context พร้อมใช้งานทันที เช่น:

copy[Agent] ต้องการทำ authentication middleware ใน Next.js
[Agent] รันคำสั่ง: ctx7 "Next.js middleware authentication"
[Context7] ส่งคืนเอกสาร Next.js เวอร์ชันล่าสุด + ตัวอย่างโค้ด
[Agent] เขียนโค้ดตามเอกสารที่ได้รับ

2. MCP – สำหรับ AI editor ที่รองรับ MCP (แนะนำ)

เหมาะกับ: ผู้ใช้ Cursor, Windsurf, Claude Desktop หรือ editor ที่รองรับ MCP protocol

คลิกติดตั้งใน Cursor หรือ AI editor ที่รองรับ MCP:

Agent จะเรียก documentation tools ได้โดยตรงโดยไม่ต้องติดตั้งเพิ่มเติม

💡 API Key (แนะนำ):
สมัครฟรีที่ context7.com/dashboard เพื่อปลดล็อกความเร็วและจำนวนการใช้งานไม่จำกัด

Library และ Framework ที่รองรับ

Context7 รองรับเอกสารจากแหล่งยอดนิยมหลายร้อยรายการ รวมถึง:

• Next.js, React, Vue, Svelte
• Node.js, Express, Fastify
• Python: Django, FastAPI, Flask
• Go, Rust, TypeScript
• AWS, Vercel, Cloudflare Workers
• และอื่นๆ อีกมากมาย

หมายเหตุ: รายการเต็มและการอัปเดตอยู่ที่ https://context7.com/supported-libraries

ตัวอย่างผลลัพธ์

สถานการณ์: ถาม LLM เกี่ยวกับ Next.js App Router middleware

copy❌ ไม่ใช้ Context7
→ LLM ตอบด้วยโค้ดจาก Pages Router (เก่า)
→ API ไม่ตรงกับเวอร์ชันปัจจุบัน

✅ ใช้ Context7
→ ดึงเอกสาร App Router เวอร์ชันล่าสุด
→ ได้โค้ดที่ใช้งานได้ทันทีตาม best practices ปัจจุบัน

ตัวอย่างโค้ดผลลัพธ์ที่ได้จาก Context7:

copy// middleware.ts (App Router - Next.js 14+)
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('jwt')?.value
  
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  
  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*']
}

ข้อจำกัดการใช้งาน

• โหมดไม่มี API Key: จำกัด 10 requests ต่อชั่วโมง และความเร็วอาจช้ากว่า
• โหมดมี API Key: ไม่จำกัดจำนวนการใช้งาน + ความเร็วสูงสุด + priority access
• Coverage: รองรับ library ยอดนิยมหลายร้อยรายการ แต่ library เฉพาะทางบางตัวอาจยังไม่รองรับ

ประโยชน์

• ✅ เอกสารทันสมัยตรงตามเวอร์ชันจริง
• ✅ ตัวอย่างโค้ดจากแหล่งที่มา
• ✅ ไม่ต้องเปิดแท็บหาเอกสารเอง
• ✅ ลด hallucination ของ LLM