Web AI SDK 🤖

🚀 Integrate a professional, aesthetic AI assistant widget into any website with just one line of code.

GitHub Repository

English

✨ Features

• Modern Skin Presets: 6 built-in themes (Professional, Glass, Midnight, Cyberpunk, Brutalist, Minimal).
• Skin-Aware Tokens: Purely programmatic theming. Set one primaryColor and the SDK generates all shadows, glows, and contrast adjustments automatically.
• Shadow DOM Isolation: Zero CSS pollution. Compatible with any website infrastructure, from legacy portals to modern SPAs.
• Custom Mounting: Supports mounting to specific DOM containers with automatic absolute/fixed positioning logic.
• Premium UX: Smooth "Thinking chains" visualization, auto-expanding inputs, and focus-aware UI interactions.

🚀 Integration

1. HTML (Standard)

<script src="https://your-cdn.com/web-ai-sdk/index.umd.js"></script>
<script>
  window.WebAiSdk.init({
    tenantId: "your-tenant-id",
    apiHost: "https://api.example.com",
  });
</script>

2. Vue 3

npm install @dierbei/web-ai-sdk

import { onMounted } from "vue";
import WebAiSdk from "@dierbei/web-ai-sdk";

onMounted(() => {
  WebAiSdk.init({
    tenantId: "your-tenant-id",
    apiHost: "https://api.example.com",
  });
});

3. React

npm install @dierbei/web-ai-sdk

import { useEffect } from "react";
import WebAiSdk from "@dierbei/web-ai-sdk";

function MyChat() {
  useEffect(() => {
    WebAiSdk.init({
      tenantId: "your-tenant-id",
      apiHost: "https://api.example.com",
    });
  }, []);

  return <div id="chat-container" />;
}

简体中文

✨ 核心特性

• 流行皮肤系统：内置 6 套精心设计的 UI 预设（Professional, Glass, Midnight, Cyberpunk, Brutalist, Minimal）。
• 智能色彩令牌：只需设置一个品牌主色，SDK 自动运算全套阴影、高光、发光强度及对比度适配。
• Shadow DOM 隔离：物理级 CSS 属性隔离，绝不污染宿主网站样式，兼容任何年代的网站架构。
• 自定义容器挂载：支持将 SDK 挂载到指定的 DOM 元素内，并自动处理 absolute/fixed 位置转换。
• 现代化交互：流式深度思考过程可视化、智能自增高输入框、焦点高亮感应。

🚀 接入方式

1. HTML (CDN 直接接入)

<script src="https://your-cdn.com/web-ai-sdk/index.umd.js"></script>
<script>
  window.WebAiSdk.init({
    tenantId: "your-tenant-id",
    apiHost: "https://your-api-backend.com",
  });
</script>

2. Vue 3

npm install @dierbei/web-ai-sdk

<script setup>
import { onMounted } from "vue";
import WebAiSdk from "@dierbei/web-ai-sdk";

onMounted(() => {
  WebAiSdk.init({
    tenantId: "your-tenant-id",
    apiHost: "https://your-api-backend.com",
  });
});
</script>

3. React

npm install @dierbei/web-ai-sdk

import { useEffect } from "react";
import WebAiSdk from "@dierbei/web-ai-sdk";

function App() {
  useEffect(() => {
    WebAiSdk.init({
      tenantId: "your-tenant-id",
      apiHost: "https://api.yourbackend.com",
    });
  }, []);

  return <div>Your Website Content</div>;
}

Preview:

Repository: https://github.com/dierbei/web-ai-sdk