Quick start

This guide builds a small but complete chat interface with message history, a composer, safe text rendering, and a simulated assistant response.

Try the finished result

Working quick start Live component

This demo is wired to the same submit event used in the quick-start code. Send a message to try it.

The preview uses no backend. It handles loquix-submit, appends the user message, briefly enters streaming mode, and adds a local response.

Build it

1. Install Loquix.

   npm install @loquix/core lit

2. Register the components and tokens.

   Add these imports to your browser entry point:

   main.js

   import '@loquix/core/tokens/variables.css';
   import '@loquix/core/define/define-chat-container';
   import '@loquix/core/define/define-chat-header';
   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';

3. Compose the chat surface.

   index.html

   <loquix-chat-container id="chat" layout="full" mode="chat">
     <loquix-chat-header
       slot="header"
       agent-name="My Assistant"
     ></loquix-chat-header>
   
     <loquix-message-list
       id="messages"
       slot="messages"
       auto-scroll
       show-scroll-anchor
     >
       <loquix-message-item sender="assistant" status="complete">
         <loquix-message-content>
           Hello! How can I help?
         </loquix-message-content>
       </loquix-message-item>
     </loquix-message-list>
   
     <loquix-chat-composer
       id="composer"
       slot="composer"
       placeholder="Ask anything…"
       max-length="4000"
     ></loquix-chat-composer>
   </loquix-chat-container>

4. Handle submitted messages.

   Append untrusted text with textContent, not innerHTML:

   main.js

   const chat = document.querySelector('#chat');
   const messages = document.querySelector('#messages');
   const composer = document.querySelector('#composer');
   
   function appendMessage(sender, text) {
     const message = document.createElement('loquix-message-item');
     message.setAttribute('sender', sender);
     message.setAttribute('status', 'complete');
   
     const content = document.createElement('loquix-message-content');
     content.textContent = text;
     message.append(content);
     messages.append(message);
   }
   
   chat.addEventListener('loquix-submit', event => {
     const { content } = event.detail;
     appendMessage('user', content);
   
     composer.streaming = true;
   
     window.setTimeout(() => {
       appendMessage('assistant', `You sent: ${content}`);
       composer.streaming = false;
     }, 500);
   });

Connect your backend

Replace the simulated timeout with your application request:

chat.addEventListener('loquix-submit', async event => {
  const { content } = event.detail;
  appendMessage('user', content);
  composer.streaming = true;

  try {
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ content }),
    });

    if (!response.ok) throw new Error('Request failed');
    const result = await response.json();
    appendMessage('assistant', result.content);
  } catch {
    appendMessage('assistant', 'Something went wrong. Please try again.');
  } finally {
    composer.streaming = false;
  }
});

Keep credentials on the server

Do not call an AI provider with a secret key directly from the browser. Send the prompt to your own authenticated backend and return only the response data needed by the UI.

Where to go next

• Use Events and state to connect streaming and application state.
• Grow the fetch call above into something that streams, aborts, and tracks conversation history for you: the Integration section covers the agent provider and controller built for exactly that.
• Apply your brand in Theming.
• Review Accessibility before shipping.
• Browse the component catalog.