The Missing UI Layer
for AI Chat Interfaces
35 production-ready Web Components for building AI and LLM chat UIs. Framework-agnostic. Accessible. Themeable. Streaming-first.
npm install @loquix/core litUp and running in 3 steps
From zero to a working chat UI in under 5 minutes. No complex setup required.
Install
npm install @loquix/core litImport
import '@loquix/core/tokens/variables.css'
import '@loquix/core/define/define-chat-container'
import '@loquix/core/define/define-message-list'
import '@loquix/core/define/define-message-item'
import '@loquix/core/define/define-message-content'
import '@loquix/core/define/define-chat-composer'Use
<loquix-chat-container>
<loquix-message-list>
<loquix-message-item role="assistant">
<loquix-message-content>
Hello! How can I help you today?
</loquix-message-content>
</loquix-message-item>
</loquix-message-list>
<loquix-chat-composer placeholder="Type a message...">
</loquix-chat-composer>
</loquix-chat-container>Build any AI experience
Mix and match components to create onboarding flows, configuration panels, or full chat interfaces.
<loquix-chat-container layout="full">
<loquix-nudge-banner slot="header"
variant="tip" icon="💡" dismissible>
Pro tip: Choose a template to get started faster!
</loquix-nudge-banner>
<loquix-welcome-screen slot="messages"
heading="How can I help you today?"
subheading="Choose a template or start typing"
suggestion-variant="card"
.suggestions=${suggestions}>
<img slot="logo" src="/logo.svg" alt="Logo" />
<loquix-example-gallery slot="footer"
variant="grid"
columns="2"
heading="Templates"
.items=${templates}>
</loquix-example-gallery>
</loquix-welcome-screen>
<loquix-chat-composer slot="composer"
placeholder="Describe your task...">
</loquix-chat-composer>
</loquix-chat-container>Welcome screens, template galleries, and guided setup — everything for a great first-run experience.
Everything you need for AI chat UIs
Production-ready components with streaming, accessibility, and theming built in from day one.
35 Production Components
From message bubbles to model selectors and parameter panels. The building blocks for any AI chat interface.
Streaming-First
Streaming cursors, typing indicators, pause/resume/stop controls. Not an afterthought — the foundation.
Works Everywhere
Web Components standard. React, Vue, Svelte, Angular, or vanilla JS. No adapters needed.
100+ Design Tokens
CSS custom properties for full customization. Light/dark themes included. ::part() for deep styling.
Accessible
Targets WCAG 2.1 AA. Keyboard navigation, ARIA semantics, screen reader support. axe-core tested.
TypeScript Strict
Full type definitions for all components, events, and controllers. 896+ tests on Chromium and WebKit.
Built for real-time
Streaming isn't bolted on — it's the foundation. Token-by-token rendering, typing indicators, and generation controls are first-class features.
- Token-by-token message rendering with cursor animation
- Pause, resume, and stop generation controls
- Typing indicator with customizable appearance
- StreamingController for programmatic control
- Backpressure handling for slow consumers
<loquix-message-item role="assistant" streaming>
<loquix-message-content>
<!-- Tokens rendered in real-time -->
</loquix-message-content>
</loquix-message-item>
<!-- User-facing generation controls -->
<loquix-generation-controls
state="streaming"
@loquix-pause="handlePause"
@loquix-resume="handleResume"
@loquix-stop="handleStop">
</loquix-generation-controls>
<!-- Typing indicator while waiting -->
<loquix-typing-indicator active>
</loquix-typing-indicator>100+ design tokens at your fingertips
Every visual property is exposed as a CSS custom property. Change colors, spacing, typography, and effects without touching component internals.
/* Override Loquix design tokens */
:root {
--loquix-ai-color: #7c3aed;
--loquix-border-radius: 16px;
--loquix-message-font-size: 0.9375rem;
--loquix-surface-bg: #1a1a2e;
}
/* Deep styling via ::part() */
loquix-chat-composer::part(input) {
border-radius: 24px;
}<!-- Full-featured chat with all the trimmings -->
<loquix-chat-container>
<loquix-chat-header slot="header">
<loquix-model-selector
slot="actions"
.models="${models}">
</loquix-model-selector>
</loquix-chat-header>
<loquix-message-list>
<loquix-message-item
role="assistant"
.actions="${['copy', 'feedback']}">
<loquix-message-avatar slot="avatar">
</loquix-message-avatar>
<loquix-message-content>
Hello! How can I help?
</loquix-message-content>
</loquix-message-item>
</loquix-message-list>
<loquix-chat-composer>
<loquix-composer-toolbar slot="toolbar">
</loquix-composer-toolbar>
</loquix-chat-composer>
</loquix-chat-container>Compose, don't configure
Every component uses named slots for maximum flexibility. Mix and match to build exactly the interface your users need — from minimal chat to full-featured AI workbench.
- Named slots for header, toolbar, footer, and actions
- Light DOM content projection via <slot>
- Nest components freely — no rigid hierarchy
- CSS ::part() for Shadow DOM customization
- Event-driven: typed, bubbling, composed CustomEvents
0 components across 8 categories
Every component you need for building AI chat interfaces. Explore them all in Storybook.
<loquix-action-button><loquix-action-copy><loquix-action-edit><loquix-action-feedback><loquix-attachment-chip><loquix-attachment-panel><loquix-caveat-notice><loquix-chat-composer><loquix-chat-container><loquix-chat-header><loquix-composer-toolbar><loquix-disclosure-badge><loquix-drop-zone><loquix-dropdown-select><loquix-example-gallery><loquix-filter-bar><loquix-follow-up-suggestions><loquix-generation-controls><loquix-message-actions><loquix-message-attachments><loquix-message-avatar><loquix-message-content><loquix-message-item><loquix-message-list><loquix-mode-selector><loquix-model-selector><loquix-nudge-banner><loquix-parameter-panel><loquix-prompt-input><loquix-scroll-anchor><loquix-suggestion-chips><loquix-template-card><loquix-template-picker><loquix-typing-indicator><loquix-welcome-screen>Works with every framework
Standard Web Components. No wrappers, no adapters, no vendor lock-in.
import { ChatContainer, MessageList, ChatComposer } from '@loquix/react'
function Chat() {
return (
<ChatContainer>
<MessageList />
<ChatComposer
placeholder="Ask anything..."
onSubmit={(e) => handleSubmit(e.detail)}
/>
</ChatContainer>
)
}Built for developers who care
TypeScript Strict
Full type definitions for every component, property, event, and controller. Your IDE knows everything.
Event-Driven
Typed, bubbling, composed CustomEvents. loquix-submit, loquix-model-change, loquix-feedback — all predictable.
896+ Tests
Chromium and WebKit. @open-wc/testing + Playwright. Every component, every state, every edge case.
i18n Ready
Pluggable LocalizeController with translatable term keys. Ship your chat UI in any language.
CDN Bundle
Single script tag for rapid prototyping. No build step required — perfect for demos and POCs.
File Upload Pipeline
Drag-and-drop, paste-to-upload, MIME validation, progress tracking. Production-ready from day one.
Not just components — an ecosystem
The component library is the foundation. The vision is a full ecosystem for building AI agents and chat experiences.
Core Chat Components
CompleteMessage rendering, composer, message lists, avatars, actions, typing indicators, and suggestion chips.
Onboarding & Trust
CompleteWelcome screens, example galleries, template pickers, AI disclosure badges, and caveat notices.
Mode, Model & Files
CompleteModel selectors, mode switching, parameter panels, file uploads with drag-and-drop, and attachment management.
Advanced AI Patterns
In ProgressStream of thought visualization, citations and sources, conversation branching, and memory indicators.
Full Ecosystem
VisionTheme packs, framework-specific bindings, provider integrations (OpenAI, Anthropic, Google), and agent templates.
Built by developers, for developers
Ready to build your AI chat interface?
Prototype your AI chat UI in hours, not weeks.
npm install @loquix/core lit