Blog

วิธีใช้ Vercel AI SDK: คู่มือสำหรับผู้เริ่มต้น

Rebecca Kovács

Rebecca Kovács

10 June 2025

วิธีใช้ Vercel AI SDK: คู่มือสำหรับผู้เริ่มต้น

ยินดีต้อนรับสู่คู่มือเริ่มต้นใช้งาน Vercel AI SDK ฉบับสมบูรณ์ ในโลกที่ปัญญาประดิษฐ์กำลังเปลี่ยนแปลงภูมิทัศน์ดิจิทัลอย่างรวดเร็ว ความสามารถในการรวม AI เข้ากับเว็บแอปพลิเคชันได้เปลี่ยนจากการเป็นความเชี่ยวชาญเฉพาะทางไปสู่ความสามารถหลักสำหรับนักพัฒนาสมัยใหม่ คู่มือนี้ออกแบบมาเพื่อนำคุณจากผู้เริ่มต้นที่อยากรู้อยากเห็นไปสู่การเป็นนักพัฒนาแอปพลิเคชัน AI ที่มีความสามารถ

เป็นเวลานาน การเชื่อมช่องว่างระหว่าง Large Language Model (LLM) ที่ทรงพลังกับเว็บอินเทอร์เฟซที่ใช้งานง่ายนั้นเป็นความพยายามที่ซับซ้อน นักพัฒนาต้องต่อสู้กับ API ของผู้ให้บริการที่แตกต่างกัน จัดการสถานะที่ซับซ้อน และต้องนำคุณสมบัติต่างๆ เช่น การสตรีมการตอบกลับมาใช้งานเอง Vercel AI SDK ถูกสร้างขึ้นเพื่อแก้ปัญหาเหล่านี้โดยเฉพาะ เป็นชุดเครื่องมือที่เน้น TypeScript ซึ่งมีเลเยอร์นามธรรมที่รวมและสง่างามเพื่อจัดการความซับซ้อนของการสร้างประสบการณ์ที่ขับเคลื่อนด้วย AI

นี่ไม่ใช่แค่คู่มือเริ่มต้นใช้งานฉบับย่อเท่านั้น ตลอดการสอนนี้ เราจะสร้างแชทบอท AI ที่สมบูรณ์และมีคุณสมบัติครบถ้วนตั้งแต่เริ่มต้น โดยใช้ Next.js และโมเดล Gemini ของ Google เราจะไปไกลกว่าตัวอย่าง "hello world" ง่ายๆ คุณจะได้เรียนรู้:

เมื่อสิ้นสุดคู่มือฉบับสมบูรณ์นี้ คุณจะไม่ได้มีเพียงแค่แชทบอทที่ทำงานได้และมีความสามารถขั้นสูงเท่านั้น แต่ยังมีความรู้เชิงแนวคิดที่ลึกซึ้งซึ่งจำเป็นต่อการสร้างแอปพลิเคชันที่ขับเคลื่อนด้วย AI ที่เป็นเอกลักษณ์และทรงพลังของคุณเองด้วย Vercel AI SDK อย่างมั่นใจ

💡
ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมที่สร้าง เอกสารประกอบ API ที่สวยงาม?

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

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

บทที่ 1: พื้นฐานและการตั้งค่า

โครงสร้างที่ยอดเยี่ยมทุกอย่างต้องการรากฐานที่แข็งแกร่ง ในบทนี้ เราจะตั้งค่าสภาพแวดล้อมการพัฒนา ติดตั้งเครื่องมือที่จำเป็น และจัดเรียงคีย์ API ของเราให้เรียบร้อย นอกจากนี้เราจะใช้เวลาทำความเข้าใจ "เหตุผล" เบื้องหลังแต่ละทางเลือกที่เราทำ

ข้อกำหนดเบื้องต้น

ก่อนที่เราจะเขียนโค้ดแม้แต่บรรทัดเดียว มาตรวจสอบให้แน่ใจว่ากล่องเครื่องมือของคุณพร้อมแล้ว

  1. ไปที่ Google AI Studio
  2. ลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ
  3. คลิก "Get API key" แล้วคลิก "Create API key in new project"
  4. คัดลอกคีย์ที่สร้างขึ้นและเก็บไว้ในที่ปลอดภัยสำหรับตอนนี้ ดูแลคีย์นี้เหมือนรหัสผ่าน; อย่าเปิดเผยต่อสาธารณะเด็ดขาด

ขั้นตอนที่ 1: การเริ่มต้นโปรเจกต์ Next.js

เราจะใช้ Next.js ซึ่งเป็นเฟรมเวิร์ก React ชั้นนำสำหรับการสร้างแอปพลิเคชันระดับ Production พาราดิกม์ App Router ของมันเข้ากันได้อย่างสมบูรณ์แบบกับลักษณะที่เน้นเซิร์ฟเวอร์ของแอปพลิเคชัน AI

เปิดเทอร์มินัลของคุณและรันคำสั่งนี้เพื่อสร้างโปรเจกต์ใหม่:

npx create-next-app@latest vercel-ai-tutorial

โปรแกรมติดตั้งจะถามคำถามหลายข้อ ใช้การตั้งค่าเหล่านี้เพื่อติดตามได้อย่างราบรื่น:

เมื่อการติดตั้งเสร็จสมบูรณ์ ให้เข้าไปยังไดเรกทอรีโปรเจกต์ที่คุณเพิ่งสร้างขึ้น:

cd vercel-ai-tutorial

ขั้นตอนที่ 2: การติดตั้ง Vercel AI SDK

ตอนนี้ มาเพิ่มแพ็กเกจ AI SDK ลงในโปรเจกต์ของเรา

npm install ai @ai-sdk/react @ai-sdk/google zod

มาแยกย่อยว่าแต่ละแพ็กเกจเหล่านี้ทำอะไรบ้าง:

ขั้นตอนที่ 3: การรักษาความปลอดภัยคีย์ API ของคุณ

อย่าฮาร์ดโค้ดคีย์ API ในโค้ดแอปพลิเคชันของคุณเด็ดขาด นี่เป็นความเสี่ยงด้านความปลอดภัยที่สำคัญ มาตรฐานระดับมืออาชีพคือการใช้ environment variables Next.js มีการรองรับสิ่งนี้ในตัวด้วยไฟล์ .env.local

สร้างไฟล์ใน root ของโปรเจกต์ของคุณ:

touch .env.local

ตอนนี้ เปิดไฟล์ใหม่นี้และเพิ่มคีย์ Google AI ของคุณ:

# .env.local
# This file is for local development and should NOT be committed to git.
GOOGLE_GENERATIVE_AI_API_KEY=YOUR_GOOGLE_AI_API_KEY

แทนที่ YOUR_GOOGLE_AI_API_KEY ด้วยคีย์ที่คุณคัดลอกไว้ก่อนหน้านี้ Next.js จะโหลดไฟล์นี้โดยอัตโนมัติและทำให้คีย์พร้อมใช้งานบนเซิร์ฟเวอร์ ซึ่งเป็นที่ที่เราต้องการมันพอดี

บทที่ 2: การสร้างแกนหลักของแชทบอท

เมื่อตั้งค่าโปรเจกต์ของเราเสร็จแล้ว ก็ถึงเวลาสร้างส่วนประกอบหลักของแอปพลิเคชันของเรา: ปลายทาง API ฝั่งเซิร์ฟเวอร์ที่พูดคุยกับ AI และ UI ฝั่งไคลเอ็นต์ที่ผู้ใช้จะโต้ตอบด้วย

สถาปัตยกรรมไคลเอ็นต์-เซิร์ฟเวอร์ของแอป AI

แชทบอทของเราจะมีสองส่วนหลัก:

  1. เส้นทาง API ฝั่งเซิร์ฟเวอร์ (/api/chat/route.ts): นี่คือสภาพแวดล้อมที่ปลอดภัยซึ่งทำงานบนเซิร์ฟเวอร์ หน้าที่หลักคือการรับประวัติการแชทจากเบราว์เซอร์ของผู้ใช้ เพิ่มคีย์ API ลับของเรา ส่งต่อคำขอไปยังบริการ Google AI และจากนั้นสตรีมการตอบกลับกลับไปยังผู้ใช้ การเก็บตรรกะนี้ไว้บนเซิร์ฟเวอร์เป็นสิ่งสำคัญสำหรับความปลอดภัย—เพื่อให้แน่ใจว่าคีย์ API ของเราจะไม่ถูกเปิดเผยต่อสาธารณะ
  2. UI ฝั่งไคลเอ็นต์ (page.tsx): นี่คือส่วนประกอบ React ที่ทำงานในเบราว์เซอร์ของผู้ใช้ มีหน้าที่ในการแสดงประวัติการแชท จับการป้อนข้อมูลของผู้ใช้ และส่งข้อมูลที่ป้อนนั้นไปยังเส้นทาง API ของเรา

การแยกนี้เป็นพื้นฐานสำหรับการสร้างเว็บแอปพลิเคชันที่ปลอดภัยและมีประสิทธิภาพ

ขั้นตอนที่ 4: การสร้างตัวจัดการเส้นทาง API

มาสร้างปลายทางฝั่งเซิร์ฟเวอร์กัน ในไดเรกทอรี src/app ของคุณ ให้สร้างโฟลเดอร์ใหม่ชื่อ api และภายในนั้น ให้สร้างโฟลเดอร์อีกอันชื่อ chat สุดท้าย ให้สร้างไฟล์ชื่อ route.ts ภายในโฟลเดอร์ chat

พาธสุดท้ายควรเป็น src/app/api/chat/route.ts

เติมไฟล์นี้ด้วยโค้ดต่อไปนี้:

// src/app/api/chat/route.ts

import { google } from '@ai-sdk/google';
import { streamText } from 'ai';

// Vercel-specific configuration to allow streaming responses for up to 30 seconds
export const maxDuration = 30;

// The main API route handler
export async function POST(req: Request) {
  try {
    // Extract the `messages` array from the request body
    const { messages } = await req.json();

    // Call the AI provider with the conversation history
    const result = await streamText({
      model: google('models/gemini-1.5-pro-latest'),
      // The `messages` array provides the model with context for the conversation
      messages,
    });

    // Respond with a streaming response
    return result.toDataStreamResponse();
  } catch (error) {
    // It's a good practice to handle potential errors
    if (error instanceof Error) {
      return new Response(JSON.stringify({ error: error.message }), { status: 500 });
    }
    return new Response(JSON.stringify({ error: 'An unknown error occurred' }), { status: 500 });
  }
}

มาวิเคราะห์ไฟล์ที่สำคัญนี้กัน:

ขั้นตอนที่ 5: การสร้างส่วนต่อประสานผู้ใช้

ตอนนี้ถึงส่วนที่สนุก: การสร้าง UI ต้องขอบคุณแพ็กเกจ @ai-sdk/react ทำให้สิ่งนี้ง่ายอย่างน่าประหลาดใจ เปิดไฟล์หน้าหลักที่ src/app/page.tsx และแทนที่เนื้อหาทั้งหมดด้วยโค้ดต่อไปนี้:

// src/app/page.tsx

'use client';

import { useChat } from '@ai-sdk/react';
import { useRef, useEffect } from 'react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat();

  // A ref to the scrollable container of messages
  const messagesContainerRef = useRef<HTMLDivElement>(null);

  // Effect to scroll to the bottom of the messages container whenever messages change
  useEffect(() => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
    }
  }, [messages]);

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* Messages container */}
      <div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-8 space-y-4">
        {messages.map(m => (
          <div
            key={m.id}
            className={`flex gap-3 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            {/* Display user's avatar */}
            {m.role === 'user' && (
              <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">U</div>
            )}

            {/* Message bubble */}
            <div
              className={`max-w-xl p-3 rounded-2xl shadow-md whitespace-pre-wrap ${
                m.role === 'user'
                  ? 'bg-blue-500 text-white rounded-br-none'
                  : 'bg-white text-black rounded-bl-none'
              }`}
            >
              <span className="font-bold block">{m.role === 'user' ? 'You' : 'AI Assistant'}</span>
              {m.content}
            </div>

            {/* Display AI's avatar */}
            {m.role !== 'user' && (
              <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">AI</div>
            )}
          </div>
        ))}
      </div>

      {/* Input form */}
      <div className="p-4 bg-white border-t">
        <form onSubmit={handleSubmit} className="flex items-center gap-4 max-w-4xl mx-auto">
          <input
            className="flex-1 p-3 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={input}
            placeholder="Ask me anything..."
            onChange={handleInputChange}
            disabled={isLoading}
          />
          <button
            type="submit"
            className="px-6 py-3 bg-blue-500 text-white rounded-full font-semibold hover:bg-blue-600 disabled:bg-blue-300 disabled:cursor-not-allowed"
            disabled={isLoading}
          >
            Send
          </button>
        </form>
        {error && (
          <p className="text-red-500 mt-2 text-center">{error.message}</p>
        )}
      </div>
    </div>
  );
}

นี่เป็นโค้ดจำนวนมาก แต่ส่วนใหญ่ใช้สำหรับการสร้าง UI ที่สวยงามด้วย Tailwind CSS มาเน้นที่ตรรกะกัน:

ขั้นตอนที่ 6: รันแอปพลิเคชันของคุณ

ตอนนี้คุณได้สร้างแชทบอท AI ที่สมบูรณ์และมีโครงสร้างที่ดีแล้ว มาเริ่มทำงานกันเลย!

npm run dev

ไปที่ http://localhost:3000 ในเบราว์เซอร์ของคุณ คุณควรจะเห็นอินเทอร์เฟซการแชทที่สวยงาม ถามคำถามอะไรก็ได้ คุณจะเห็นข้อความของคุณปรากฏขึ้นทันที และการตอบกลับของ AI จะสตรีมเข้ามาทีละ token

บทที่ 3: ความสามารถขั้นสูง - มอบพลังพิเศษให้กับแชทบอทของคุณ

แชทบอทของเราฉลาด แต่ความรู้ของมันจำกัดอยู่เพียงข้อมูลการฝึกฝน มันไม่สามารถเข้าถึงข้อมูลสดหรือดำเนินการในโลกจริงได้ ในบทนี้ เราจะมอบ "เครื่องมือ (Tools)" ให้มันเพื่อเอาชนะข้อจำกัดเหล่านี้

เครื่องมือ (Tools) คืออะไร?

เครื่องมือคือฟังก์ชันที่คุณกำหนดซึ่ง LLM สามารถเลือกที่จะดำเนินการได้ คุณอธิบายเครื่องมือให้โมเดลทราบ และเมื่อโมเดลคิดว่าเครื่องมือนั้นจำเป็นต่อการตอบคำถามของผู้ใช้ มันจะหยุดการสร้างข้อความชั่วคราวและส่งออกอ็อบเจกต์ "tool call" พิเศษแทน โค้ดของคุณจะดำเนินการฟังก์ชันนั้นด้วยอาร์กิวเมนต์ที่โมเดลให้มา และผลลัพธ์จะถูกส่งกลับไปยังโมเดล จากนั้นโมเดลจะใช้ข้อมูลใหม่นี้เพื่อสร้างการตอบกลับสุดท้ายที่แม่นยำยิ่งขึ้น

มาเพิ่มพลังให้แชทบอทของเราด้วยเครื่องมือสองอย่าง:

  1. เครื่องมือสำหรับรับสภาพอากาศปัจจุบันสำหรับสถานที่หนึ่งๆ
  2. เครื่องมือสำหรับแปลงอุณหภูมิจากฟาเรนไฮต์เป็นเซลเซียส

สิ่งนี้จะช่วยให้บอทของเราตอบคำถามได้ เช่น "สภาพอากาศในลอนดอนเป็นอย่างไรในหน่วยเซลเซียส?" ซึ่งเป็นงานที่ต้องใช้หลายขั้นตอนและข้อมูลภายนอก

ขั้นตอนที่ 7: การอัปเกรด API เพื่อรองรับเครื่องมือ

เราจำเป็นต้องกำหนดเครื่องมือของเราในการเรียก streamText บนเซิร์ฟเวอร์ เปิด src/app/api/chat/route.ts และแก้ไขเพื่อรวมการกำหนด tools ใหม่

// src/app/api/chat/route.ts
import { google } from '@ai-sdk/google';
import { streamText, tool } from 'ai';
import { z } from 'zod';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: google('models/gemini-1.5-pro-latest'),
    messages,
    // Define the tools the model can use
    tools: {
      getWeather: tool({
        description: 'Get the current weather for a specific location. Always returns temperature in Fahrenheit.',
        parameters: z.object({
          location: z.string().describe('The city and state, e.g., San Francisco, CA'),
        }),
        execute: async ({ location }) => {
          // In a real app, you would fetch from a real weather API
          console.log(`Fetching weather for ${location}`);
          return {
            temperature: Math.floor(Math.random() * (100 - 30 + 1) + 30),
            high: Math.floor(Math.random() * (100 - 80 + 1) + 80),
            low: Math.floor(Math.random() * (50 - 30 + 1) + 30),
            conditions: ['Sunny', 'Cloudy', 'Rainy'][Math.floor(Math.random() * 3)],
          };
        },
      }),
      convertFahrenheitToCelsius: tool({
        description: 'Convert a temperature from Fahrenheit to Celsius.',
        parameters: z.object({
          temperature: z.number().describe('The temperature in Fahrenheit'),
        }),
        execute: async ({ temperature }) => {
          console.log(`Converting ${temperature}°F to Celsius`);
          return {
            celsius: Math.round((temperature - 32) * (5 / 9)),
          };
        },
      }),
    },
  });

  return result.toDataStreamResponse();
}

มาวิเคราะห์อ็อบเจกต์ tools กัน:

ขั้นตอนที่ 8: การเปิดใช้งานการเรียกเครื่องมือแบบหลายขั้นตอนใน UI

การกำหนดเครื่องมือบนเซิร์ฟเวอร์เพียงอย่างเดียวยังไม่พอ โดยค่าเริ่มต้น เมื่อโมเดลทำการเรียกเครื่องมือ การสนทนาจะหยุดลง เราจำเป็นต้องบอก hook useChat ของเราให้ส่งผลลัพธ์ของการเรียกเครื่องมือนั้นกลับไปยังโมเดลโดยอัตโนมัติ เพื่อให้โมเดลสามารถดำเนินการให้เหตุผลต่อไปและสร้างคำตอบสุดท้ายได้

สิ่งนี้ทำได้ง่ายอย่างไม่น่าเชื่อ ใน src/app/page.tsx ให้ปรับปรุงการเริ่มต้น hook useChat:

// src/app/page.tsx

// ...
export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } = useChat({
    // Tell the hook to automatically send tool results back to the model
    experimental_sendExtraToolMessages: true,
  });
  // ... rest of the component
}

แค่นั้นเอง คุณสมบัติ experimental_sendExtraToolMessages: true จะเปิดใช้งานขั้นตอนการใช้เครื่องมือแบบหลายขั้นตอน

ขั้นตอนที่ 9: UI ที่ดีขึ้นสำหรับการเรียกใช้เครื่องมือ

UI ปัจจุบันของเราแสดงเฉพาะ m.content เมื่อมีการเรียกเครื่องมือ ข้อมูลที่น่าสนใจจะอยู่ในคุณสมบัติอื่นของอ็อบเจกต์ข้อความ มาสร้างส่วนประกอบเฉพาะเพื่อแสดงผลการเรียกเครื่องมืออย่างสวยงาม

ก่อนอื่น มาปรับปรุง loop ข้อความหลักใน src/app/page.tsx เพื่อแสดงผลการเรียกเหล่านี้

// src/app/page.tsx

// ... inside the Chat component's return statement
<div ref={messagesContainerRef} className="flex-1 overflow-y-auto p-8 space-y-4">
  {messages.map(m => (
    <div
      key={m.id}
      className={`flex gap-3 ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}
    </div>
        ))}
      </div>
    </div>
  );
}

ฉันยังได้เพิ่มตัวบ่งชี้การพิมพ์แบบง่ายๆ ที่ปรากฏขึ้นในขณะที่ผู้ช่วยกำลังคิด คุณจะต้องเพิ่ม CSS เล็กน้อยสำหรับสิ่งนี้ ในไฟล์ src/app/globals.css ของคุณ ให้เพิ่ม:

/* src/app/globals.css */

.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: #9E9EA1;
  border-radius: 50%;
  display: inline-block;
  animation: a 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.4s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.2s; }
@keyframes a {
  0%, 60%, 100% { transform: scale(0.2); }
  30% { transform: scale(1); }
}

ตอนนี้ รันแอปพลิเคชันอีกครั้ง ถามว่า "สภาพอากาศในนิวยอร์กเป็นอย่างไรในหน่วยเซลเซียส?" คุณจะเห็นเหตุการณ์ที่น่าสนใจเกิดขึ้นใน UI ของคุณ:

  1. โมเดลจะเรียกเครื่องมือ getWeather ก่อน คุณจะเห็นการเรียกเครื่องมือที่แสดงผลใน UI
  2. ผลลัพธ์ (อุณหภูมิสุ่มในหน่วยฟาเรนไฮต์) จะถูกส่งกลับไปยังโมเดล
  3. โมเดล เมื่อรู้ว่าต้องการหน่วยเซลเซียส จะเรียกเครื่องมือ convertFahrenheitToCelsius โดยใช้อุณหภูมิจากผลลัพธ์ของเครื่องมือแรกเป็นอินพุต
  4. สุดท้าย เมื่อได้อุณหภูมิในหน่วยเซลเซียสแล้ว ก็จะสร้างการตอบกลับด้วยภาษาธรรมชาติเพื่อตอบคำถามเดิมของคุณ

นี่คือพลังของการสร้าง AI Agents และ Vercel AI SDK ทำให้การจัดการที่ซับซ้อนนี้ตรงไปตรงมาอย่างน่าทึ่ง

บทที่ 4: จะไปต่อที่ไหนดี?

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

คู่มือนี้ได้ให้รากฐานที่แข็งแกร่งแก่คุณ แต่มันเป็นเพียงจุดเริ่มต้น Vercel AI SDK ยังมีอะไรอีกมากมายที่จะนำเสนอ นี่คือแนวทางสำหรับการสำรวจเพิ่มเติมของคุณ:

อนาคตของการพัฒนาเว็บนั้นชาญฉลาด โต้ตอบได้ และเป็นส่วนตัว ด้วย Vercel AI SDK ตอนนี้คุณมีเครื่องมือและความรู้ที่จะอยู่แถวหน้าของการปฏิวัติครั้งนี้ ขอให้สร้างสรรค์ผลงานอย่างมีความสุข!

💡
ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมที่สร้าง เอกสารประกอบ API ที่สวยงาม?

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

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

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

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

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