This page simulates a third-party web application with the AIUI chat widget embedded. Click the floating button in the bottom corner to open the AI assistant. You can also switch which side it appears on.
Sample content card demonstrating how the widget overlays existing UI without disruption.
<script src="https://cdn.example.com/aiui-widget.js"></script>
<script>
AIUI.init({
apiKey: 'your-openrouter-key',
position: 'bottom-right', // or 'bottom-left'
theme: 'dark',
})
</script><!-- Load the custom element -->
<script type="module" src="https://cdn.example.com/aiui-element.js"></script>
<!-- Use anywhere in your HTML -->
<aiui-chat
api-key="your-key"
position="bottom-right"
theme="dark"
></aiui-chat>npm install @aiui/widget
// Vue 3
import { AIUIWidget } from '@aiui/widget'
app.use(AIUIWidget, {
apiKey: 'your-key',
position: 'bottom-right',
})
// React
import { AIUIProvider } from '@aiui/widget/react'
<AIUIProvider apiKey="your-key" position="bottom-right" /><iframe
src="https://app.aiui.dev/embed?key=your-key&theme=dark"
style="position:fixed;bottom:80px;right:24px;width:420px;height:640px;
border:none;border-radius:16px;z-index:9999;"
allow="microphone"
></iframe>?aiui=open&q=help