Blog

สร้าง Claude Code ฟรี ทางเลือกด้วย gpt-oss-20b เองได้ง่ายๆ

Ashley Goolam

Ashley Goolam

15 August 2025

สร้าง Claude Code ฟรี ทางเลือกด้วย gpt-oss-20b เองได้ง่ายๆ

enterprise.banner.title

enterprise.banner.feature1

enterprise.banner.feature2

enterprise.banner.feature3

enterprise.banner.ctaB

สวัสดีครับนักพัฒนา! ต้องการยกระดับเวิร์กโฟลว์การพัฒนาของคุณด้วยการตั้งค่า AI สำหรับเขียนโค้ดแบบฟรีและทำงานในเครื่องใช่ไหม? คุณมาถูกที่แล้ว! วันนี้เราจะมาเจาะลึกวิธีการสร้างสภาพแวดล้อมการเขียนโค้ด AI แบบโอเพนซอร์สที่ทรงพลังโดยใช้ GPT-OSS, Opencode และ Vibe Kanban เครื่องมือเหล่านี้ช่วยให้คุณเขียนโค้ดได้อย่างชาญฉลาดขึ้น ทำงานอัตโนมัติ และจัดการโปรเจกต์ได้ทั้งหมดโดยไม่สิ้นเปลืองงบประมาณ ในคู่มือนี้ เราจะแนะนำคุณเกี่ยวกับการตั้งค่า Opencode ด้วยโมเดล GPT-OSS เพื่อสร้างเว็บไซต์พอร์ตโฟลิโอ จากนั้นใช้ Vibe Kanban เพื่อจัดการและปรับปรุงเว็บไซต์นั้น เมื่อจบ คุณจะมีขุมพลังการเขียนโค้ดที่ขับเคลื่อนด้วย AI ซึ่งทำงานในเครื่องได้ มาเริ่มเขียนโค้ดด้วย GPT-OSS, Opencode, Vibe Kanban กันเลย!

💡
ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมที่สร้าง เอกสาร API ที่สวยงาม ใช่ไหม?

ต้องการแพลตฟอร์มแบบครบวงจรสำหรับทีมพัฒนาของคุณเพื่อทำงานร่วมกันด้วย ประสิทธิภาพสูงสุด ใช่ไหม?

Apidog ตอบสนองทุกความต้องการของคุณ และ แทนที่ Postman ได้ในราคาที่ย่อมเยากว่ามาก!
button

GPT-OSS, Opencode และ Vibe Kanban คืออะไร?

ก่อนที่เราจะเริ่ม มาทำความรู้จักกับสามดาวเด่นแห่งการเขียนโค้ด AI ของเรากัน:

เครื่องมือเหล่านี้รวมกันสร้างสภาพแวดล้อมที่ฟรีและทำงานในเครื่อง โดย GPT-OSS เป็นขุมพลัง AI, Opencode จัดการงานเขียนโค้ด และ Vibe Kanban จัดระเบียบโปรเจกต์ของคุณ มาตั้งค่ากันเลย!

gpt-oss model

ขั้นตอนที่ 1: ติดตั้ง Opencode

ก่อนอื่น เราต้องติดตั้ง Opencode ซึ่งเป็นแกนหลักของสภาพแวดล้อมการเขียนโค้ด AI ของเรา ทำได้ง่ายมากบน macOS/Linux และมีตัวเลือกสำหรับ Windows

สำหรับ macOS/Linux

รันคำสั่งใดคำสั่งหนึ่งต่อไปนี้ในเทอร์มินัลของคุณ:

curl -fsSL https://opencode.ai/install | bash

npm i -g opencode-ai@latest  # หรือ bun/pnpm/yarn
brew install sst/tap/opencode  # macOS และ Linux
paru -S opencode-bin  # Arch Linux

สำหรับ Windows

  1. เยี่ยมชม github.com/sst/opencode/releases (เช่น v0.3.112 ณ เดือนสิงหาคม 2025)
  2. ดาวน์โหลดไบนารี opencode.exe ล่าสุด
  3. บันทึกไปยังไดเรกทอรี (เช่น C:\opencode)

ทดสอบการติดตั้ง

ตรวจสอบว่า Opencode ทำงานได้:

เคล็ดลับมือโปร: สำหรับ Windows ให้เพิ่มโฟลเดอร์ไบนารีลงใน PATH ของคุณเพื่อให้เข้าถึงได้ง่ายขึ้น

opencode agent

ขั้นตอนที่ 2: ตั้งค่าโปรเจกต์ Opencode ของคุณ

มาสร้างโฟลเดอร์โปรเจกต์ใหม่เพื่อสร้างเว็บไซต์พอร์ตโฟลิโอโดยใช้ Opencode และ GPT-OSS เราจะกำหนดค่าด้วยการตั้งค่าแบบกำหนดเอง

สร้างโฟลเดอร์โปรเจกต์:

mkdir opencode-vibekanban-project
cd opencode-vibekanban-project

เพิ่ม AGENTS.md:
สร้างไฟล์ชื่อ AGENTS.md โดยมีเนื้อหาดังนี้:

# Tooling rules for Opencode
- Use Opencode tools only: read, write, edit, list, glob, grep, webfetch, bash, task, todowrite, todoread.
- Do NOT call non-existent tools like Repo_browser.*.
- Prefer `edit` for modifying existing files; use `read` to inspect before editing.

สิ่งนี้กำหนดกฎสำหรับเอเจนต์ AI ของ Opencode เพื่อให้แน่ใจว่ามันใช้เครื่องมือที่ถูกต้อง

เพิ่ม opencode.json:
สร้าง opencode.json เพื่อกำหนดค่า GPT-OSS (โมเดล 20B):

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "ollama": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "Ollama (local)",
      "options": {
        "baseURL": "http://localhost:11434/v1"
      },
      "models": {
        "gpt-oss:20b": { "name": "gpt-oss 20B (local)" }
      }
    }
  },
  "model": "ollama/gpt-oss:20b",
  "agent": {
    "build": {
      "description": "Default coding mode with only Opencode tools.",
      "tools": {
        "read": true,
        "write": true,
        "edit": true,
        "bash": true,
        "grep": true,
        "glob": true,
        "list": true,
        "webfetch": true,
        "patch": true,
        "todoread": true,
        "todowrite": true
      },
      "prompt": "{file:./AGENTS.md}"
    }
  },
  "instructions": ["AGENTS.md"]
}

ต้องการใช้ GPT-OSS 120B ที่ทรงพลังกว่าใช่ไหม? แทนที่ส่วน provider และ model ด้วย:

"provider": {
  "ollama": {
    "npm": "@ai-sdk/openai-compatible",
    "name": "Ollama (local)",
    "options": {
      "baseURL": "http://localhost:11434/v1"
    },
    "models": {
      "gpt-oss:120b": { "name": "gpt-oss 120B (local)" }
    }
  }
},
"model": "ollama/gpt-oss:120b"

หมายเหตุ: บันทึก AGENTS.md และ opencode.json ใน opencode-vibekanban-project ไฟล์เหล่านี้จะบอกให้ Opencode ใช้ GPT-OSS และปฏิบัติตามกฎเครื่องมือเฉพาะ

ขั้นตอนที่ 3: ติดตั้งและรัน GPT-OSS ด้วย Ollama

GPT-OSS ทำงานในเครื่องผ่าน Ollama ซึ่งเป็นเครื่องมือขนาดเล็กสำหรับจัดการ LLM คุณจะต้องมีเครื่องที่มีประสิทธิภาพพอสมควร (RAM 16GB+ สำหรับ 20B, 64GB+ สำหรับ 120B)

  1. ติดตั้ง Ollama:

2. ดึงโมเดล GPT-OSS:

ollama pull gpt-oss:20b

ollama pull gpt-oss:120b
gpt-oss model on ollama

3. รันโมเดล:

ollama run gpt-oss:20b

หรือ

ollama run gpt-oss:120b

เคล็ดลับมือโปร: ตรวจสอบให้แน่ใจว่า Ollama กำลังทำงานอยู่ก่อนที่จะเริ่ม Opencode มิฉะนั้นคุณจะได้รับข้อผิดพลาดในการเชื่อมต่อ

ขั้นตอนที่ 4: รัน Opencode สำหรับโปรเจกต์ของคุณ

ตอนนี้ มาเริ่ม Opencode ในโฟลเดอร์โปรเจกต์ของคุณกัน:

  1. นำทางไปยังโปรเจกต์:
cd opencode-vibekanban-project

2. รัน Opencode:

opencode .

<path-to-opencode>/opencode.exe .

3. ยืนยันการตั้งค่า:

configure opencode with gpt-oss model

ขั้นตอนที่ 5: สร้างเว็บไซต์พอร์ตโฟลิโอด้วย Opencode

มาใช้ Opencode และ GPT-OSS เพื่อสร้างหน้า Landing Page พอร์ตโฟลิโอแบบง่ายๆ สำหรับนักพัฒนาชื่อ John Doe โดยใช้ React กับ Vite

ป้อนคำสั่ง:

Create a simple portfolio landing page for a developer called John Doe in React with Vite.

รันเว็บไซต์:

npm install
npm run dev
simple portfolio website

พุชขึ้น GitHub:

git init
git add .
git commit -m "Initial portfolio website"
git remote add origin https://github.com/your-username/john-doe-portfolio.git
git push -u origin main

เคล็ดลับมือโปร: ใช้เครื่องมือ webfetch ของ Opencode เพื่อดึงแรงบันดาลใจจากเว็บไซต์พอร์ตโฟลิโอที่มีอยู่ หากจำเป็น

ขั้นตอนที่ 6: ตั้งค่า Vibe Kanban สำหรับการจัดการโปรเจกต์

ตอนนี้ เรามาผสานรวม Vibe Kanban เพื่อจัดการและปรับปรุงโปรเจกต์พอร์ตโฟลิโอด้วยเอเจนต์ AI

ติดตั้ง Vibe Kanban:

npx vibe-kanban

กำหนดค่า Vibe Kanban:

link vibe kanban with github

สร้างโปรเจกต์ใหม่:

create a new project

ขั้นตอนที่ 7: เพิ่มงานด้วย Vibe Kanban

มาใช้ Vibe Kanban เพื่อปรับปรุงพอร์ตโฟลิโอโดยการเพิ่มฟีเจอร์ใหม่ เช่น แบบฟอร์มติดต่อ

สร้างงาน:

create a task

เลือกเอเจนต์:

select opencode as your agent

ตรวจสอบและอนุมัติ:

git add .
git commit -m "Added contact form"
git push

เคล็ดลับมือโปร: ใช้ Vibe Kanban เพื่อจัดคิวงานหลายๆ งาน (เช่น “Add dark mode,” “Optimize images”) และให้ Opencode จัดการตามลำดับ

การแก้ไขปัญหาทั่วไป

ทำไม Stack นี้ถึงเจ๋ง

ชุด GPT-OSS, Opencode, Vibe Kanban คือความฝันของนักพัฒนา:

ผู้ใช้ชื่นชอบการตั้งค่านี้: “Opencode กับ GPT-OSS สร้างเว็บไซต์ของฉันเสร็จในไม่กี่นาที และ Vibe Kanban ก็จัดระเบียบมันได้ดี!” ลองใช้แล้วคุณจะเห็นว่าทำไม

บทสรุป

คุณเพิ่งสร้างสภาพแวดล้อมการเขียนโค้ด AI ที่ฟรีและทำงานในเครื่องด้วย GPT-OSS, Opencode และ Vibe Kanban! ตั้งแต่การสร้างเว็บไซต์พอร์ตโฟลิโอไปจนถึงการจัดการงานด้วยเอเจนต์ AI คุณพร้อมที่จะเขียนโค้ดได้อย่างชาญฉลาดขึ้นแล้ว ทดลองใช้ฟีเจอร์ใหม่ๆ มีส่วนร่วมใน repos และแบ่งปันโปรเจกต์ของคุณในความคิดเห็น มาทำให้การปฏิวัติการเขียนโค้ด AI ดำเนินต่อไป!

💡
ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมที่สร้าง เอกสาร API ที่สวยงาม ใช่ไหม?

ต้องการแพลตฟอร์มแบบครบวงจรสำหรับทีมพัฒนาของคุณเพื่อทำงานร่วมกันด้วย ประสิทธิภาพสูงสุด ใช่ไหม?

Apidog ตอบสนองทุกความต้องการของคุณ และ แทนที่ Postman ได้ในราคาที่ย่อมเยากว่ามาก!
button

ฝึกการออกแบบ API แบบ Design-first ใน Apidog

ค้นพบวิธีที่ง่ายขึ้นในการสร้างและใช้ API

ลงทะเบียนฟรีดาวน์โหลด