快速開始

幾分鐘內快速上手 LensOS。

選擇你的框架查看對應的設定指南：

1. 安裝 SDK

Terminal

bun add @lens-os/sdk

2. 取得 API Key

你需要 LensOS API 金鑰和 OpenAI API 金鑰。前往儀表板建立 LensOS 金鑰：

開啟 API Keys 管理頁面 →

.env

# 僅限伺服器端 — 絕對不要使用 NEXT_PUBLIC_ 前綴
LENS_API_KEY=your-lens-api-key
OPENAI_API_KEY=your-openai-api-key

3. 建立伺服器路由

Agent handler 在伺服器端運行。API 金鑰保留在這裡，永遠不會暴露給客戶端。

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

import { createAgentHandler } from '@lens-os/sdk/server';

export const handler = createAgentHandler({
  apiKey: process.env.LENS_API_KEY!,
  openaiKey: process.env.OPENAI_API_KEY!,
});

export const { POST } = handler;

4. 建立 Action Result 路由

src/app/api/agent/chat/action-result/route.ts

import { createActionResultHandler } from '@lens-os/sdk/server';
import { handler } from '../route';

export const { POST } = createActionResultHandler(handler._pendingActions);

5. 使用 React Hook

客戶端只需要端點 URL — 不需要 API 金鑰。

src/components/ChatPanel.tsx

'use client';
import { useLensAgent } from '@lens-os/sdk/react';

export default function ChatPanel() {
  const { messages, isLoading, sendMessage } = useLensAgent({
    endpoint: '/api/agent/chat',
  });

  return (
    <div>
      {messages.map((msg, i) => (
        <div key={i} className={msg.role}>
          {typeof msg.content === 'string' ? msg.content : ''}
        </div>
      ))}
      <input
        disabled={isLoading}
        onKeyDown={(e) => {
          if (e.key === 'Enter' && e.currentTarget.value.trim()) {
            sendMessage(e.currentTarget.value);
            e.currentTarget.value = '';
          }
        }}
        placeholder="問我任何問題..."
      />
    </div>
  );
}

Tip

就這樣 — 只需 3 個檔案就能運行 AI Agent。API 金鑰保留在伺服器端，客戶端僅透過端點 URL 通訊。

下一步

閱讀 SDK 整合指南 深入了解伺服器與客戶端設定
了解 Widget 將 AI 嵌入你的前端
設定規則控制代理行為
新增工具擴展代理功能
建立 知識庫 用於特定領域資料