# Floating AI Chat Assistant for Websites

This example was generated by Assistant A of https://lmarena.ai/c/442cde63-32b7-46bf-be3d-dae668144711 given the initial prompt:
  - make a button that can be shown on the corner of any website. When clicked, it opens a chat mole with a helpful AI agent. The chat mole has a text field where users can submit questions about the site, which are answered by Chrome's Built-In LanguageModel (aka Prompt) API, which has been prepopulated with context about the page and overall site and any user context. There's also a button users can easily click in the chat mole to "summarize this page" which provides a short 1-2 sentence summary of the page derived from on-page text the overall site and user context.

This example was made functional with about 10 lines of code changes in about 10 minutes of msw@ tweaking the result.

Here's a complete implementation for a floating chat button that opens an AI assistant powered by Chrome's built-in LanguageModel API. This solution includes the button, chat interface, and functionality to summarize pages.

## HTML Implementation

```html
  See the source of this page!
```

## Key Features

1. **Floating Chat Button**: A circular button that stays fixed in the bottom-right corner of the page.

2. **Chat Interface**:
   - Clean, modern design with message bubbles
   - Typing indicators for better UX
   - Scrollable message area

3. **AI Functionality**:
   - Uses Chrome's built-in LanguageModel API
   - Gathers page context (title, URL, description, and main content)
   - Provides intelligent responses based on page content

4. **Special Features**:
   - "Summarize Page" button that generates a concise summary
   - Help button with usage suggestions
   - Responsive design that works on different screen sizes

5. **User Experience**:
   - Smooth animations and transitions
   - Easy to open/close
   - Clear visual hierarchy

## Implementation Notes

1. This code should be added to any webpage where you want the AI assistant to appear.

2. The implementation checks for the availability of Chrome's LanguageModel API and falls back gracefully if it's not available.

3. The AI responses are generated based on:
   - Page title
   - URL
   - Meta description
   - Main content (first 5000 characters)

4. The summarization feature specifically asks for a 1-2 sentence summary to keep responses concise.

5. The chat maintains conversation history within the session.

To use this, simply add the entire HTML code to your webpage, or include it as a separate component that can be injected into any page.
AI Assistant