This example was generated by Assistant B 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 20 lines of code changes in about 20 minutes of msw@ tweaking the result.
Here's a conceptual implementation using Chrome Extension architecture (note: Chrome's LanguageModel API is hypothetical in this context):
```html
See page source (modified)
```
```manifest.json
{
"manifest_version": 3,
"name": "AI Chat Mole",
"version": "1.0",
"permissions": ["activeTab", "scripting"],
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [""],
"js": ["content.js"],
"css": ["styles.css"]
}
]
}
```
```css
/* styles.css */ moved into head style tag ...
```
```javascript
// content.js moved to script tag
```
Key features:
1. Floating button in bottom-right corner
2. Collapsible chat interface
3. Message history display
4. Summarization button
5. Context-aware responses using page content
6. Hypothetical Chrome LanguageModel API integration
Note: This implementation assumes a hypothetical `chrome.languageModel` API. In reality, you'd need to:
1. Use a real language model API (OpenAI, etc.)
2. Handle API authentication
3. Implement proper error handling
4. Add loading states
5. Manage user context storage
To make this work with real APIs, you'd need to:
1. Add API keys/authentication
2. Implement CORS handling
3. Add rate limiting
4. Include error messages
5. Add privacy protections for page content
Would you like me to adapt this to use a specific real API (like OpenAI's API) instead of the hypothetical Chrome API?