aiskin-react

Beautiful, ready-made React UI for WRKS AI agents: a ChatGPT-grade chat screen, a floating chatbot, and an executive briefing dashboard — each one component. 14 built-in themes, every color a CSS variable.

Live demos: https://aiskin.onpod.ai (AIskin is an independent SDK, not an official wrks.ai product.)

npm install aiskin-react aiskin-core

import { AiSkinClient } from 'aiskin-core';
import { AgentChat, AgentChatbot, AgentBriefing } from 'aiskin-react';
import 'aiskin-react/styles.css';

const client = new AiSkinClient({ baseUrl: '/api/aiskin' }); // key stays on your server

// 1) Full conversation screen
<AgentChat client={client} agentId={12} title="사내 규정 비서" suggestions={['연차 규정 알려줘']} />

// 2) Floating chatbot for any page
<AgentChatbot client={client} agentId={12} title="무엇을 도와드릴까요?" />

// 3) Executive briefing board — the agent's answer becomes KPIs, charts, tables
<AgentBriefing client={client} agentId={7} question="주간 경영 브리핑 만들어줘" />

Themes

14 built-in themes: editorial · porcelain · aurora · terracotta · monolith · impact · playground · daylight · cosmos · midnight · executive · neon · boardroom · terminal

<div data-as-theme="executive"> …AIskin components… </div>

Brand it with one variable: .aiskin { --as-accent: #ff5a00; }

Included

• Streaming markdown, reasoning panel, tool-run chips, sources, image/document attachments, Korean IME-safe composer
• SVG charts (line/area/bar/stacked/donut/sparkline) with CVD-validated palettes, hover tooltips, legends
• useAgentChat hook if you want your own layout
• Print CSS — the briefing exports to PDF via the browser

MIT © AIskin