Widget 元件

Widget 是預建的可嵌入 UI 元件，能將 LensOS 代理直接帶入你的應用程式中。 它們處理聊天介面、訊息渲染和代理通訊 — 讓你無需從頭建構 UI 就能新增 AI 功能。

概覽

LensOS 提供多種 Widget 類型以配合不同的使用場景：

• 聊天 Widget — 完整功能的聊天介面，支援訊息歷史、輸入指示器和豐富內容。
• 浮動 Widget — 緊湊的浮動按鈕，展開後成為聊天面板，適合客戶端應用。
• 內嵌 Widget — 直接整合到頁面佈局中的嵌入式元件。

安裝

bun add @lens-os/widget

基本用法

React

import { LensWidget } from '@lens-os/widget/react'

export default function App() {
  return (
    <LensWidget
      agentId="your-agent-id"
      apiKey="your-api-key"
      theme="dark"
    />
  )
}

Script 標籤

非 React 應用程式可以使用 script 標籤方式：

<script src="https://cdn.lens-os.com/widget.js"></script>
<script>
  LensOS.widget({
    agentId: 'your-agent-id',
    apiKey: 'your-api-key',
    container: '#chat-container',
  })
</script>

設定選項

Widget 可以透過 props 或設定選項進行自訂：

• theme — "light" | "dark" | "system"
• position — Widget 位置（"bottom-right"、"bottom-left"）
• initialMessage — 顯示給用戶的初始訊息
• placeholder — 輸入框佔位文字
• accentColor — 主要品牌顏色