跪拜 Guibai
← All articles
GitHub · Vue.js · JavaScript

YH-UI Ships a Vue 3.5+ Component Library with Built-In AI Chat, Workflow Editor, and Request Layer

By 鱼樱前端 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Vue teams building AI chat UIs or complex admin panels typically stitch together a half-dozen libraries for Markdown rendering, streaming, workflow canvases, and request handling. YH-UI collapses those concerns into one dependency with first-party SSE support and undo-ready flow editing, cutting integration work and version-conflict risk.

Summary

YH-UI bundles a full AI interaction suite — chat bubbles with typewriter streaming, thought-chain folding, and a sandboxed code runner — directly into a Vue component library. A drag-and-drop flow editor tracks connection changes in a history snapshot so undo and redo work out of the box, and a built-in Gantt chart handles large datasets with dependency lines and smooth timeline scrolling.

The library ships its own request client, @yh-ui/request, which adds request-level caching, concurrency queues, and SSE auto-reconnect with cross-chunk buffering to avoid JSON.parse failures. A runtime CSS-variable theme system supports dark mode, layout density switching, and a color-blind friendly palette.

On-demand imports work through unplugin-vue-components, and the docs include a one-click export to StackBlitz or CodeSandbox that bundles the demo’s dependencies automatically. The project targets teams building AI assistants, data dashboards, and collaborative admin tools.

Takeaways
A single monorepo delivers AI chat components, a flow editor, a Gantt chart, and a request client under one Vue 3.5+ library.
The yh-ai-chat component handles SSE streaming, Markdown rendering, code highlighting, and a typewriter effect without extra plugins.
A thought-chain component displays LLM reasoning steps with one-click expand/collapse.
The yh-flow editor automatically writes connection changes into a history snapshot so undo and redo require no extra wiring.
@yh-ui/request adds request-level caching, concurrency queues, and SSE auto-reconnect that stitches split packets to prevent JSON.parse errors.
The theme system uses runtime CSS variables for dark mode, compact/loose density, and a color-blind friendly palette.
One-click StackBlitz/CodeSandbox export statically analyzes demo code and bundles the exact dependencies needed to run it.
On-demand imports are supported via unplugin-vue-components with a provided resolver.
Conclusions

Bundling a request client with SSE reconnect into a UI library is unusual; most component libraries leave network concerns to the application layer, but here it removes a common source of stream-parsing bugs.

The flow editor’s automatic history snapshots for connection changes address a pain point that typically requires custom state management, making it practical for production workflow builders without extra plumbing.

Shipping a color-blind friendly mode as a first-class theme option is still rare in component libraries and signals attention to accessibility that enterprise buyers increasingly require.

Concepts & terms
SSE (Server-Sent Events)
A standard allowing a server to push real-time updates to the browser over a single HTTP connection. YH-UI’s request client buffers incomplete SSE chunks and auto-reconnects on network drops to avoid JSON parsing failures.
Monorepo
A single repository that contains multiple packages. YH-UI uses this structure to ship its UI components, request client, and theme engine together while keeping them independently importable.
Thought Chain
A UI pattern that displays the intermediate reasoning steps a large language model produces before delivering a final answer. YH-UI renders these as expandable/collapsible sections inside the chat interface.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗