Hướng dẫn tích hợp OpenClaw API vào ứng dụng React trong 10 phút

Prerequisites

• React project (Create React App hoặc Vite)
• OpenClaw API key (mua tại openclaw.vn)
• Node.js 18+

Step 1: Setup environment

npm install @openclaw/sdk
# hoặc nếu dùng fetch trực tiếp, không cần install gì

Step 2: Tạo API client

// lib/openclaw.ts
const OPENCLAW_API_KEY = process.env.OPENCLAW_API_KEY;
const OPENCLAW_ENDPOINT = 'https://api.openclaw.vn/v1/chat/completions';

export async function chat(messages: any[]) {
  const response = await fetch(OPENCLAW_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${OPENCLAW_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-5.4',
      messages,
    }),
  });
  if (!response.ok) throw new Error('API Error');
  return response.json();
}

Step 3: Sử dụng trong component

const [messages, setMessages] = useState([]);

async function sendMessage(userMessage: string) {
  const response = await chat([...messages, { role: 'user', content: userMessage }]);
  setMessages(response.choices[0].message);
}