ai-chat-ui-kit

v0.1.1

Published

a month ago

AI Chat UI Kit - Web Components based chat UI with headless mode

Downloads

0High
0Medium
0Low

eden_zxpzhang

ai chat web-components lit headless cross-framework

AI Chat UI Kit

一套基于 Web Components 的 AI 聊天 UI 组件库，支持 Headless 模式，可跨框架使用（React、Vue、原生 HTML）。

✨ 在线预览

🎉 点击这里查看在线 Demo（部署后自动生效）

🎨 6 套主题预览

| 序号 | 主题 | 风格 | 预览 | |------|------|------|------| | 01 | Minimal Clean | 极简苹果风，圆角气泡、蓝白配色 | 在线预览 | | 02 | Dark Neon | 赛博朋克深色，霓虹发光效果 | 在线预览 | | 03 | Glassmorphism | 毛玻璃拟态，半透明模糊 | 在线预览 | | 04 | Retro Terminal | 复古终端，绿绿配色 + 扫描线 | 在线预览 | | 05 | Gradient Bubbles | 多彩渐变气泡，弹出动画 | 在线预览 | | 06 | Corporate Professional | 企业商务风，蓝色主题 | 在线预览 |

💡 也可访问主题总览页一次性查看所有主题。

✨ 特性

🚀 基于 Web Components - 原生组件，跨框架兼容
🎨 Headless 模式 - 可只使用逻辑层，自定义 UI
🎭 6 套主题 - Minimal / Neon / Glass / Terminal / Gradient / Corporate
🔌 插件系统 - 易于扩展功能
🌐 API 适配器 - 兼容多种后端 API 格式
🎯 TypeScript 支持 - 完整的类型定义
📦 轻量级 - 无 heavy dependencies

📦 安装

使用 PNPM（推荐）

pnpm add @ai-chat-ui-kit/core @ai-chat-ui-kit/components @ai-chat-ui-kit/themes

使用 NPM

npm install @ai-chat-ui-kit/core @ai-chat-ui-kit/components @ai-chat-ui-kit/themes

使用 Yarn

yarn add @ai-chat-ui-kit/core @ai-chat-ui-kit/components @ai-chat-ui-kit/themes

🚀 快速开始

原生 HTML 使用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>AI Chat Demo</title>
  <script type="module">
    import '@ai-chat/components';
    import '@ai-chat/themes';
  </script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #app {
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="app">
    <ai-chat></ai-chat>
  </div>

  <script>
    const chat = document.querySelector('ai-chat');

    // 设置 AI 回复回调
    chat.setMessageHandler(async (message) => {
      // 模拟 AI 回复
      await new Promise(resolve => setTimeout(resolve, 1000));
      return `您说的是：${message}`;
    });
  </script>
</body>
</html>

React 使用

import React, { useEffect, useRef } from 'react';
import '@ai-chat/components';
import '@ai-chat/themes';

const ChatApp: React.FC = () => {
  const chatRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (chatRef.current) {
      (chatRef.current as any).setMessageHandler(async (message: string) => {
        await new Promise(resolve => setTimeout(resolve, 1000));
        return `AI 回复：${message}`;
      });
    }
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <ai-chat ref={chatRef}></ai-chat>
    </div>
  );
};

export default ChatApp;

Vue 3 使用

<template>
  <div style="height: 100vh">
    <ai-chat ref="chatRef"></ai-chat>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import '@ai-chat/components';
import '@ai-chat/themes';

const chatRef = ref<HTMLElement>();

onMounted(() => {
  if (chatRef.value) {
    (chatRef.value as any).setMessageHandler(async (message: string) => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return `AI 回复：${message}`;
    });
  }
});
</script>

🎨 主题切换

// 导入主题样式
import '@ai-chat/themes/minimal';  // 极简苹果风
import '@ai-chat/themes/neon';     // 赛博朋克深色
import '@ai-chat/themes/glass';    // 毛玻璃拟态
import '@ai-chat/themes/terminal'; // 复古终端
import '@ai-chat/themes/gradient'; // 多彩渐变
import '@ai-chat/themes/corporate'; // 企业商务

// 运行时动态切换主题
import { applyTheme } from '@ai-chat/themes';
import { minimalTheme } from '@ai-chat/themes/minimal';
import { neonTheme } from '@ai-chat/themes/neon';

// 应用极简主题
applyTheme(minimalTheme);

// 切换到赛博朋克主题
applyTheme(neonTheme);

📖 文档

完整文档请访问：[文档链接]

📚 示例

查看 examples 目录获取更多示例：

🏗️ 项目结构

ai-chat-ui-kit/
├── packages/
│   ├── core/          # 核心逻辑层（状态管理、API 适配）
│   ├── components/    # Web Components 封装（Lit）
│   └── themes/        # 主题包（CSS + 配置）
├── docs/              # 文档 & 主题预览页（GitHub Pages）
│   ├── index.html                  # 主题总览页
│   ├── chat-style-1-minimal.html  # 主题1：极简
│   ├── chat-style-2-neon.html     # 主题2：赛博朋克
│   ├── chat-style-3-glass.html    # 主题3：毛玻璃
│   ├── chat-style-4-terminal.html  # 主题4：终端
│   ├── chat-style-5-gradient.html  # 主题5：渐变
│   └── chat-style-6-corporate.html # 主题6：企业
├── examples/          # 使用示例
├── README.md          # 本文件
└── package.json       # 根 package.json

🛠️ 开发

安装依赖

pnpm install

开发模式

pnpm dev

构建

pnpm build

测试

pnpm test

Lint

pnpm lint

🚀 GitHub Pages 部署

本项目的 docs/ 目录已配置为 GitHub Pages 源目录，推送到 master 分支后会自动部署。

查看在线预览： https://<your-username>.github.io/ai-chat-ui-kit/

📝 API 参考

Core 包

createChatStore() - 创建聊天状态管理
createAPIAdapter() - 创建 API 适配器
createPluginSystem() - 创建插件系统

详见：Core API 文档

Components 包

<ai-chat> - 聊天容器组件
<ai-message> - 消息组件
<ai-input> - 输入框组件
<ai-tool-call> - 工具调用组件

详见：Components API 文档

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

👤 作者

edenxpzhang

Built with ❤️ using Lit