beautiful-ui-vue - GitLite

KO | EN

gitlite — search

#rag #http #typescript #kotlin #tailwindcss #awesome #animation #java #markdown #rust

beautiful-ui-vue

(★ 9)

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.

파일 탐색기

ZIP 다운로드

- - deploy.yml
- - chat-page.template.txt
- PROMPT.template.txt
- SKILL.template.md
- llms.txt
- logo.png
- generate-agent-assets.mjs
- ui-catalog.mjs
- - ApprovalCard.vue
  - ChatComposer.vue
  - ChatPage.vue
  - CodeBlock.vue
  - ContextCards.vue
  - DiffTable.vue
  - FilterTable.vue
  - FineTuneCard.vue
  - InsightCards.vue
  - LoadingState.vue
  - PromptBar.vue
  - RecommendationCard.vue
  - RecordsTable.vue
  - SearchList.vue
  - SelectionActions.vue
  - ShowcaseCodeActions.vue
  - SidebarNav.vue
  - StreamingText.vue
  - TaskRows.vue
  - ThinkingState.vue
  - ToolChips.vue
- - approvalCardSource.ts
  - loadingStateSource.ts
  - streamingTextSource.ts
  - thinkingStateSource.ts
- App.vue
- main.ts
- styles.css
- vite-env.d.ts
.env.example
.gitignore
AGENTS.md
component-registry.json
CONTRIBUTING.md
index.html
LICENSE
package-lock.json
package.json
README.md
README_CN.md
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[中文文档](./README_CN.md)

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 →](https://beautiful-ui-vue.pages.dev)

## Quick start

```bash
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:

```vue
<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:

```bash
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:

```bash
npm run build
```

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

```bash
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](./CONTRIBUTING.md).

## License

MIT — see [LICENSE](./LICENSE).