ask-ui-kit

Framework-agnostic Web Components for AI chat interfaces, built with Lit. Not a Ruby gem: install it as an npm package.

Installation

npm install ask-ui-kit

Quick Start

In any HTML page

<script type="module">
  import "ask-ui-kit";
</script>

<ask-message role="user" content="What files do you have?"></ask-message>
<ask-message role="assistant" content="I have three invoices from Q3."></ask-message>

In a Rails app with importmap

# config/importmap.rb
pin "ask-ui-kit", to: "https://unpkg.com/ask-ui-kit@0.3.0/dist/index.js"

<%= javascript_import_module_tag "ask-ui-kit" %>

<ask-message role="user" content="<%= escape_javascript(message.content) %>"></ask-message>

In a Svelte app

<script>
  import "ask-ui-kit";
</script>

<ask-message role={msg.role} content={msg.content} />

In a React app

import "ask-ui-kit";

function ChatMessage({ role, content }) {
  return <ask-message role={role} content={content} />;
}

Components

16 Web Components:

ask-message, ask-thinking, ask-tool-call, ask-streaming, ask-code-block, ask-chat-input, ask-avatar, ask-attachment, ask-error, ask-suggestions, ask-model-selector, ask-markdown, ask-file-upload, ask-conversation-list, ask-voice-input, ask-scroll-bottom

Components respect dark mode automatically ([theme="dark"] attribute, .dark class, or the OS setting) and the whole kit is themed through shared CSS custom properties (--ask-text, --ask-surface, ...) — see the docs site for attributes, events, and theming.

Full documentation

The full ask-rb documentation lives at https://ask-rb.github.io/ask-docs. The UI Kit guide documents every component in detail. API reference: https://ask-rb.github.io/ask-docs/reference/api.

Development

npm install
npm run dev     # dev server
npm run build   # build for production
npm run test    # run tests

License

MIT