ai-chat-frontend

ai-chat-frontend

A framework-agnostic, premium AI Chat Web Component built with Lit. Perfect for integrating agentic AI into any project (React, Angular, Vue, or Vanilla JS).

Features

• 🚀 SSE Streaming: Natively supports server-sent events for a smooth "typing" experience.
• 🎨 Premium UI: Modern dark theme with glassmorphism and subtle micro-animations.
• 🛡️ Style Isolation: Shadow DOM encapsulation ensures styles don't conflict with your host app.
• 📦 Lightweight: Minimal footprint and zero external CSS requirements.
• 🔄 Persistence: Automatic local storage of chat history and sessions.
• 📝 Markdown: Built-in support for rich text, code blocks, and lists.

Installation

npm install ai-chat-frontend

Usage

Vanilla HTML

<script type="module">
  import 'ai-chat-frontend';
</script>

<ai-chat-widget 
  api-url="https://api.your-system.com/chat"
  title="Assistant"
  placeholder="Ask me anything..."
></ai-chat-widget>

React

import 'ai-chat-frontend';

function App() {
  return (
    <ai-chat-widget 
      api-url="/api/v1/chat"
      user-id="user-123"
      auth-token="secret-token"
    />
  );
}

Angular

• Add CUSTOM_ELEMENT_SCHEMA to your module.
• Import the library in main.ts:

import 'ai-chat-frontend';

API Reference

Attributes

Attribute	Type	Default	Description
api-url	string	''	Required. The endpoint for chat requests.
auth-token	string	''	Optional JWT or auth token for the request header.
user-id	string	'guest'	Used for persistent local storage keys.
title	string	'AI Assistant'	The title displayed in the chat header.
placeholder	string	'Ask me...'	Placeholder text for the input field.

Events

Event	Description
message-sent	Emitted when the user sends a message.
session-updated	Emitted when a new X-Session-ID is received.

License

MIT © Performance Tracker Team