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

1. Add CUSTOM_ELEMENT_SCHEMA to your module.
2. 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