Widget

Widgets are pre-built, embeddable UI components that bring LensOS agents directly into your application. They handle the chat interface, message rendering, and agent communication — so you can add AI capabilities without building a UI from scratch.

Overview

LensOS provides several widget types to match different use cases:

• Chat Widget — A full-featured chat interface with message history, typing indicators, and rich content support.
• Floating Widget — A compact floating button that expands into a chat panel, ideal for customer-facing applications.
• Inline Widget — An embedded widget that integrates directly into your page layout.

Installation

bun add @lens-os/widget

Basic Usage

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 Tag

For non-React applications, use the script tag approach:

<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>

Configuration

Widgets can be customized through props or configuration options:

• theme — "light" | "dark" | "system"
• position — Widget placement ("bottom-right", "bottom-left")
• initialMessage — First message shown to the user
• placeholder — Input placeholder text
• accentColor — Primary brand color