Beautiful UI Vue

中文文档

A Vue 3 + TypeScript component library recreating Beautiful UI's AI interface components. Every component is self-contained and distributed as copy-paste source — no npm install, no build step for consumers.

What's inside

20 polished AI-interface components:

• Layout: Sidebar navigation, search, chat workspace
• Chat UI: Chat composer, prompt bar, streaming text, code block
• Agent UX: Loading states, thinking traces, tool chips, task rows
• Data: Records table, filter table, diff table, insight cards (with charts)
• Workflow: Approval cards, recommendation cards, context cards, fine-tune cards, selection actions

Browse the playground →

Quick start

git clone https://github.com/TyCoding/beautiful-ui-vue.git
cd beautiful-ui-vue
npm install
npm run dev

Open the playground, hover a component preview, then use the copy or code buttons to grab source.

Using components

Components are designed to be copied into your project, not installed as a dependency. From the playground, click the copy button on any component to get its full source. Paste it into your Vue 3 project and import it directly:

<script setup>
import LoadingState from './components/LoadingState.vue'
</script>

<template>
  <LoadingState label="Generating" variant="Drive" />
</template>

Agent access

AI agents and tools can consume this catalog without downloading the repository. A deployed site publishes:

Path	Description
/agent/SKILL.md	Agent workflow guide
/agent/prompt.txt	Agent prompt
/agent/component-registry.json	Full component catalog
/agent/components/<id>.vue.txt	Agent-readable source
/agent/components/<id>.vue	Direct download
/llms.txt	LLM-friendly site index

Catalog CLI

Query the component catalog locally:

npm run ui -- count          # how many components
npm run ui -- list           # list every component
npm run ui -- search table   # search by capability
npm run ui -- show chat-page # inspect a component
npm run ui -- source chat-page # print copyable source

Deploy

Build for production:

npm run build

The output in dist/ is a static SPA. Deploy to any static host. Set the canonical origin for generated public links:

VITE_PUBLIC_SITE_URL=https://your-domain.example

Copy .env.example to .env.local for a local override. When unset, the playground uses the current browser origin.

Contributing

See CONTRIBUTING.md.

License

MIT — see LICENSE.