ตระกูล Claude ของ Anthropic เป็นชุดโมเดลแบบปิดที่มีความสามารถสูงสำหรับงานเขียนโค้ด งานตัวแทน และการให้เหตุผลแบบบริบทยาว แต่ราคา API ก็สูงตามไปด้วย: Sonnet มีค่าใช้จ่าย 3 / 15 ดอลลาร์ต่อล้านโทเค็น ส่วน Opus สูงกว่า ทำให้โปรเจกต์ส่วนตัวจำนวนมากเริ่มยากตั้งแต่ต้น ทางเลือกหนึ่งคือ Puter.js ซึ่งเปิดให้ใช้โมเดล Claude หลายรุ่น เช่น Opus 4.7, Sonnet 4.6, Haiku 4.5 และรุ่นอื่น ๆ โดยไม่ต้องใช้คีย์ Anthropic และให้ผู้ใช้ปลายทางเป็นผู้รับผิดชอบค่าใช้จ่ายผ่านบัญชี Puter แทนนักพัฒนา
คู่มือนี้จะพาคุณตั้งค่าตั้งแต่ต้นจนจบ: เลือกโมเดล เขียนโค้ดเรียกใช้งาน สตรีมคำตอบ จัดการบทสนทนาหลายรอบ และเข้าใจข้อแลกเปลี่ยนก่อนนำไปใช้จริง
สรุป
- Puter.js ช่วยให้เรียกใช้โมเดล Claude ได้จากเบราว์เซอร์ โดยไม่ต้องมีคีย์ API, ไม่ต้องจ่ายค่า Anthropic โดยตรง, และไม่ต้องมีเซิร์ฟเวอร์
- ผู้ใช้ปลายทางรับผิดชอบค่าใช้จ่ายผ่านบัญชี Puter ของตนเอง
- โมเดลที่รองรับ: Opus 4.7, Opus 4.6, Opus 4.6 Fast, Opus 4.5, Opus 4.1, Opus 4, Sonnet 4.6, Sonnet 4.5, Sonnet 4, Haiku 4.5
- ใช้เพียง
<script>หนึ่งแท็ก และเรียกputer.ai.chat() - รองรับ streaming, system prompts และ multi-turn conversations
- ใช้ Apidog เพื่อจัดชุดพรอมต์เดียวกันสำหรับเปรียบเทียบ Puter กับ Anthropic API อย่างเป็นทางการ
“ฟรีไม่จำกัด” ทำงานอย่างไร
Puter.js เป็นไลบรารี cloud/serverless และ AI ที่ทำงานในเบราว์เซอร์ แนวคิดหลักคือ นักพัฒนาไม่ต้องถือคีย์ Anthropic API เอง แต่ผู้ใช้ปลายทางจะลงชื่อเข้าใช้ Puter และการใช้งานจะถูกคิดจากบัญชีของผู้ใช้นั้น
ผลลัพธ์สำหรับนักพัฒนา:
- ไม่มี API key ใน repo ลดความเสี่ยงคีย์รั่ว และไม่ต้องจัดการ key rotation
- ไม่ต้องแบกรับค่าใช้จ่ายต่อผู้ใช้ ผู้ใช้แต่ละคนใช้บัญชี Puter ของตนเอง
- ไม่ต้องมีบัญชี Anthropic โดยตรง Puter เป็นตัวกลางในการเรียกใช้งาน
ข้อแลกเปลี่ยนคือ Puter เหมาะกับการใช้งานบนเบราว์เซอร์ หากเป็น Python script, cron job, API endpoint หรือ backend service ที่ไม่มี session ผู้ใช้ ควรใช้ Anthropic API อย่างเป็นทางการแทน
ขั้นตอนที่ 1: เพิ่ม Puter.js ในหน้าเว็บ
วิธีที่ง่ายที่สุดคือใช้ CDN:
<script src="https://js.puter.com/v2/"></script>
ตัวอย่าง HTML ขั้นต่ำ:
<!DOCTYPE html>
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
console.log('Puter loaded');
</script>
</body>
</html>
ถ้าใช้โปรเจกต์ที่ bundle ด้วย Vite, Webpack หรือ framework อื่น สามารถติดตั้งผ่าน NPM ได้:
npm install @heyputer/puter.js
แล้ว import:
import { puter } from '@heyputer/puter.js';
สำหรับ prototype, static site หรือ demo หน้าเดียว ใช้ CDN จะเร็วที่สุด
ขั้นตอนที่ 2: เลือกโมเดล Claude
Puter เปิดให้เรียกใช้โมเดล Claude ผ่านรหัสโมเดลลักษณะเดียวกับชื่อของ Anthropic:
| รหัสโมเดล | เหมาะกับงาน |
|---|---|
claude-opus-4-7 |
งาน reasoning ลึก, agentic workflow, review โค้ดซับซ้อน |
claude-opus-4-6 |
งานเขียนโค้ดและ reasoning ระดับสูง |
claude-opus-4.6-fast |
Opus ที่เน้น latency ต่ำกว่า |
claude-opus-4-5 |
งาน production agent ที่ต้องการความเสถียร |
claude-opus-4-1 |
รุ่นเก่าที่พฤติกรรมคาดเดาได้ดี |
claude-opus-4 |
รุ่นพื้นฐานของ Opus 4 |
claude-sonnet-4-6 |
ค่าเริ่มต้นที่เหมาะกับงานส่วนใหญ่ |
claude-sonnet-4-5 |
Sonnet รุ่นก่อนหน้า ยังเหมาะกับงานทั่วไป |
claude-sonnet-4 |
รุ่นพื้นฐานของ Sonnet 4 |
claude-haiku-4-5 |
เร็วและประหยัด เหมาะกับ classification จำนวนมาก |
คำแนะนำเริ่มต้น:
- ใช้
claude-sonnet-4-6เป็น default สำหรับงานทั่วไป - ใช้
claude-haiku-4-5เมื่อต้องการความเร็ว เช่น classification หรือ short response - ใช้
claude-opus-4-7เมื่องานต้องการ reasoning ลึก เช่น planning หลายขั้นตอน หรือ code review ซับซ้อน
ขั้นตอนที่ 3: เรียก Claude ครั้งแรก
ตัวอย่างขั้นต่ำที่ใช้งานได้ทันที:
<!DOCTYPE html>
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
"Explain quantum computing in simple terms",
{ model: 'claude-sonnet-4-6' }
).then(response => {
puter.print(response.message.content[0].text);
});
</script>
</body>
</html>
เมื่อเปิดไฟล์นี้ในเบราว์เซอร์ Puter จะจัดการการเรียก API ให้ ผู้ใช้จะถูกขอให้ลงชื่อเข้าใช้หรือสร้างบัญชี Puter ฟรีในการใช้งานครั้งแรก
โครงสร้าง response คล้าย Anthropic Messages API:
response.message.content[0].text
ถ้าคำตอบมีหลาย content block เช่น text และ tool call ให้ loop ผ่าน response.message.content
for (const block of response.message.content) {
if (block.type === 'text') {
console.log(block.text);
}
}
ขั้นตอนที่ 4: สตรีมคำตอบ
คำตอบยาว ๆ ควรใช้ streaming เพื่อให้ UI ตอบสนองเร็วขึ้น:
const response = await puter.ai.chat(
"Write a detailed essay on the impact of artificial intelligence on society",
{
model: 'claude-sonnet-4-6',
stream: true
}
);
for await (const part of response) {
puter.print(part?.text);
}
สำหรับแชท UI ให้ append part.text ลงใน DOM ทีละส่วน:
const output = document.querySelector('#output');
for await (const part of response) {
if (part?.text) {
output.textContent += part.text;
}
}
ตัวอย่าง HTML แบบ streaming:
<!DOCTYPE html>
<html>
<body>
<button id="ask">Ask Claude</button>
<pre id="output"></pre>
<script src="https://js.puter.com/v2/"></script>
<script>
document.querySelector('#ask').addEventListener('click', async () => {
const output = document.querySelector('#output');
output.textContent = '';
const stream = await puter.ai.chat(
"Explain how event loops work in JavaScript",
{
model: 'claude-sonnet-4-6',
stream: true
}
);
for await (const part of stream) {
if (part?.text) output.textContent += part.text;
}
});
</script>
</body>
</html>
ขั้นตอนที่ 5: ทำบทสนทนาหลายรอบ
แทนที่จะส่ง string เดี่ยว ให้ส่ง array ของ messages โดยแต่ละ message มี role และ content:
const messages = [
{ role: 'user', content: 'I am building a Next.js app with Postgres.' },
{ role: 'assistant', content: 'Got it. What do you need help with?' },
{ role: 'user', content: 'How should I structure the migrations folder?' },
];
const response = await puter.ai.chat(messages, {
model: 'claude-opus-4-7',
});
console.log(response.message.content[0].text);
ถ้าต้องการเก็บ context ต่อเนื่อง ให้ push ข้อความใหม่เข้า array ทุกครั้ง:
const messages = [];
async function sendMessage(userText) {
messages.push({
role: 'user',
content: userText
});
const response = await puter.ai.chat(messages, {
model: 'claude-sonnet-4-6'
});
const assistantText = response.message.content[0].text;
messages.push({
role: 'assistant',
content: assistantText
});
return assistantText;
}
ขั้นตอนที่ 6: ใช้ System Prompts
System prompt ใช้กำหนดบทบาท ข้อจำกัด และรูปแบบคำตอบ:
const messages = [
{
role: 'system',
content: 'You are a senior backend engineer. Reply in numbered bullets, never more than five.'
},
{
role: 'user',
content: 'How do I prevent SQL injection in a Node app?'
},
];
const response = await puter.ai.chat(messages, {
model: 'claude-sonnet-4-6'
});
console.log(response.message.content[0].text);
ใช้ system prompt สำหรับสิ่งต่อไปนี้:
- บทบาท เช่น senior backend engineer, security reviewer, API architect
- รูปแบบ output เช่น JSON, markdown table, numbered bullets
- ข้อจำกัด เช่น “ตอบไม่เกิน 5 ข้อ” หรือ “อย่าแก้ business logic”
ตัวอย่างให้ Claude ตอบเป็น JSON:
const messages = [
{
role: 'system',
content: 'Return only valid JSON. Do not include markdown.'
},
{
role: 'user',
content: 'Classify this ticket: "Login fails after password reset".'
}
];
const response = await puter.ai.chat(messages, {
model: 'claude-haiku-4-5'
});
const result = JSON.parse(response.message.content[0].text);
console.log(result);
เปรียบเทียบโมเดลด้วยพรอมต์เดียวกัน
วิธีเลือกโมเดลที่เหมาะที่สุดคือรันพรอมต์เดียวกันกับหลายโมเดล แล้ววัดทั้ง latency และคุณภาพคำตอบ:
const models = [
'claude-haiku-4-5',
'claude-sonnet-4-6',
'claude-opus-4-7'
];
const prompt = "Refactor this React component to use hooks: ...";
for (const model of models) {
const start = performance.now();
const response = await puter.ai.chat(prompt, { model });
const elapsed = performance.now() - start;
console.log(`${model}: ${elapsed.toFixed(0)}ms`);
console.log(response.message.content[0].text);
console.log('---');
}
โดยทั่วไป:
- Haiku เร็ว เหมาะกับงานสั้นและจำนวนมาก
- Sonnet สมดุล เหมาะเป็น default
- Opus เหมาะกับงานที่ซับซ้อนและต้องการ reasoning ดีขึ้น
ถ้าต้องการเปรียบเทียบเส้นทาง Puter กับ Anthropic API อย่างเป็นทางการใน Apidog ให้เก็บ request ทั้งสองไว้ใน collection เดียวกัน แล้วสลับ environment เพื่อทดสอบ
สิ่งที่ได้และสิ่งที่ไม่ได้
Claude ผ่าน Puter ใช้งานได้จริง แต่ไม่ได้แทนที่ Anthropic API ทุกกรณี
สิ่งที่คุณได้รับ:
- เรียกใช้ Claude จากเบราว์เซอร์
- รองรับ Opus, Sonnet และ Haiku หลายรุ่น
- สนทนาแบบหลายรอบ
- ใช้ system prompts
- สตรีมคำตอบ
- ไม่ต้องจัดการ API key
- ไม่ต้องแบกรับค่าใช้จ่ายในฝั่งนักพัฒนา
สิ่งที่อาจไม่ได้รับ ขึ้นอยู่กับเวอร์ชัน Puter และความสามารถที่เปิดให้ใช้:
- tool use / function calling แบบละเอียด
- image input
- prompt caching ของ Anthropic
- server-side execution โดยไม่มี browser session
- rate limit headers โดยตรงจาก Anthropic
หากต้องการ workflow ที่ใช้ tool อย่างหนัก หรือทดสอบ MCP server แบบควบคุมละเอียดกว่า ให้ใช้ Anthropic API อย่างเป็นทางการ หรือดู การทดสอบเซิร์ฟเวอร์ MCP ใน Apidog
ควรใช้ Puter หรือ Anthropic API อย่างเป็นทางการ
ใช้ Puter เมื่อ:
- คุณสร้างแอปบนเบราว์เซอร์
- คุณไม่ต้องการดูแล API key
- คุณทำ prototype, hackathon project หรือ static site
- คุณต้องการให้ผู้ใช้ปลายทางรับผิดชอบ usage ของตนเอง
- ผู้ใช้ยอมลงชื่อเข้าใช้ Puter
ใช้ Anthropic API อย่างเป็นทางการ เมื่อ:
- ต้องเรียกใช้งานจาก backend เช่น cron job, API endpoint หรือ batch processing
- ต้องการ prompt caching
- ต้องการ tool use, image input หรือ Files API ที่ควบคุมได้มากกว่า
- ต้องการ compliance หรือสัญญาระดับองค์กร
- ไม่ต้องการให้ผู้ใช้ผ่านขั้นตอน login ของ Puter
หลายโปรเจกต์เริ่มจาก Puter เพื่อทำ prototype แล้วค่อยย้ายไป Anthropic API เมื่อข้อจำกัดด้าน backend, compliance หรือ tool workflow เริ่มสำคัญ รูปแบบ messages คล้ายกัน จึงย้าย logic หลักได้ไม่ยาก
สำหรับ GPT ที่เทียบเท่ากัน ดู วิธีใช้ GPT-5.5 API
การทดสอบการผสานรวมใน Apidog
เพราะ Puter ทำงานในเบราว์เซอร์ คุณจึงไม่สามารถเรียกจาก backend test runner ได้ตรง ๆ รูปแบบที่ใช้งานได้คือ:
- สร้าง static page เล็ก ๆ ที่ใส่ Puter.js
- ส่ง prompt ผ่าน query parameter หรือ input field
- ใช้ Apidog ทดสอบ Anthropic API อย่างเป็นทางการสำหรับเส้นทาง production
- เก็บ
puter-prototypeและanthropic-prodเป็น environment แยกกัน
ตั้งค่า environment ตัวอย่าง:
-
puter-prototype: URL localhost ที่ host หน้า Puter ของคุณ -
anthropic-prod:https://api.anthropic.com/v1
ดาวน์โหลดได้ที่ Apidog แล้วจัด collection ให้ทดสอบ request ชุดเดียวกันได้เมื่อย้ายจาก Puter ไป API อย่างเป็นทางการ
คำถามที่พบบ่อย
นี่ไม่จำกัดจริงหรือมีข้อจำกัดแอบแฝง?
ไม่จำกัดในฝั่งนักพัฒนา ผู้ใช้ปลายทางยังมี usage และยอดคงเหลือในบัญชี Puter ของตนเอง บัญชีใหม่มีเครดิตเริ่มต้น และสามารถเติมเงินได้หากต้องการใช้เพิ่ม
ต้องสมัคร Anthropic หรือไม่?
ไม่จำเป็น Puter จัดการการเรียก Anthropic ให้ คุณไม่ต้องเห็นหรือเก็บคีย์ Anthropic
ใช้ production ได้ไหม?
ใช้ได้สำหรับแอปที่ทำงานบนเบราว์เซอร์ คำถามสำคัญคือผู้ใช้ของคุณยอมลงชื่อเข้าใช้ Puter หรือไม่
ผลลัพธ์เหมือน Anthropic API หรือไม่?
Puter เรียกใช้ Anthropic API ในนามของผู้ใช้ พฤติกรรมโมเดลจึงสอดคล้องกับโมเดลเดียวกัน แต่อาจมี latency เพิ่มจากชั้นกลาง
รองรับ prompt caching หรือไม่?
ปัจจุบัน Puter ไม่ได้เปิดเผยการควบคุม prompt caching ของ Anthropic หากคุณมี system prompt ขนาดใหญ่และต้องการลดต้นทุนด้วย caching ให้ใช้ API อย่างเป็นทางการ
ใช้กับ Discord bot หรือ backend service ได้ไหม?
ไม่เหมาะนัก Puter เน้น browser session หากเป็น backend service ควรใช้ Anthropic API โดยตรง
ควรใช้โมเดลใดเป็นค่าเริ่มต้น?
ใช้ claude-sonnet-4-6 สำหรับงานทั่วไป ย้ายไป claude-opus-4-7 เมื่อต้องการ reasoning ลึกขึ้น และใช้ claude-haiku-4-5 เมื่อต้องการความเร็วหรือ classification จำนวนมาก
ผู้ใช้จะถูกเรียกเก็บเงินมากไหม?
การใช้งานแบบแชททั่วไปมักมีค่าใช้จ่ายระดับไม่กี่เซนต์ต่อ session ตามอัตราของ Anthropic และขึ้นอยู่กับปริมาณ token ที่ใช้
สรุป
Puter.js เป็นทางเลือกที่ตรงไปตรงมาสำหรับการใช้ Claude ในแอปบนเบราว์เซอร์โดยไม่ต้องมี Anthropic API key ฝั่งนักพัฒนา เพิ่ม <script> เลือกโมเดล เรียก puter.ai.chat() แล้วให้ผู้ใช้ปลายทางจัดการ usage ผ่านบัญชี Puter ของตนเอง
ถ้าคุณต้องการ backend jobs, prompt caching, tool use ขั้นสูง หรือ compliance ระดับองค์กร ให้ใช้ Anthropic API อย่างเป็นทางการ แต่สำหรับ prototype, static site, hackathon project และแอปสาธารณะฟรี Puter ช่วยให้เริ่มต้นได้เร็วมาก
สร้าง request ครั้งเดียวใน Apidog, เปรียบเทียบ Puter กับ API อย่างเป็นทางการ, แล้วเลือกเส้นทางที่เหมาะกับงานของคุณ
Top comments (0)