@iyulab/chat-components

Web component library for building LLM chat interfaces — works in any framework or vanilla HTML.

---

Installation

npm install @iyulab/chat-components

---

Quick Start

import '@iyulab/chat-components';

<u-message>
  <u-marked-block value="# Hello&#10;&#10;This is **markdown**."></u-marked-block>
</u-message>

<u-prompt placeholder="Type a message..."></u-prompt>

const prompt = document.querySelector('u-prompt');

prompt.addEventListener('send', () => {
  console.log('value:', prompt.value);
  console.log('files:', prompt.files);
});

For a complete setup guide, see docs/getting-started.md.

---

Skills Usage

Skills for LLM coding agents (Claude Code, GitHub Copilot, Cursor, etc.).

# Install from GitHub
npx skills add iyulab/node-chat-components

# Reference locally after package install
npx skills add ./node_modules/@iyulab/chat-components

---

Components

Message & Input

Tag	Description
u-message	Chat message wrapper. Slot-based block layout, loading animation, bubble/default styles
u-prompt	Chat input. Auto-resize textarea, file attachment preview, integrated send/stop button

Content Blocks

Tag	Description
u-marked-block	Markdown renderer — KaTeX, code highlighting, citation injection, block-json handling
u-code-block	Syntax-highlighted code block (Highlight.js) with language label and copy button
u-text-block	Plain text display or editable textarea
u-file-block	File card — type-based preview (image/video) or icon, click-to-open overlay, download, remove
u-ref-block	Reference source group — collapse/expand, card grid
u-table-block	Table — column sort, search, CSV/XLS download

Action Buttons

Tag	Description
u-copy-button	Copies text to clipboard; icon confirms copy

---

Extras System

Chart/images/map/video are optional and not part of the core import — bring them in via @iyulab/chat-components/extra:

import '@iyulab/chat-components/extra';
import { prompt as extraInstructions } from '@iyulab/chat-components/extra';

const systemPrompt = `You are a helpful assistant.\n\n${extraInstructions}`;

// block-json blocks inside markdown are rendered automatically
markedBlock.value = llmResponse;

• Extras system details: docs/extras-system.md

---

Events

Event	Source	Detail	Description
send	u-prompt	—	Send button clicked or Enter pressed
stop	u-prompt	—	Stop button clicked while loading
remove	u-file-block	—	Remove button clicked

---

Documentation

File	Description
docs/getting-started.md	Installation, basic chat UI, streaming, history rendering
docs/architecture.md	Package structure, class hierarchy, rendering pipeline
docs/block-system.md	Block components and BlockItem types in depth
docs/extras-system.md	Extras system setup and custom extras
docs/events.md	Full event reference

---

License

MIT © iyulab