跪拜 Guibai
← Back to the summary

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

Hello everyone, I'm Yuying!!!

Follow the public account 【Yuying AI Lab】 to keep sharing more front-end and AI-assisted front-end coding knowledge~

I write notes, life, and front-end experience from time to time.

In the current environment, pure front-end developers can find breakthroughs through technical deepening, horizontal expansion, entering emerging fields (MCP TOOLS AI application product direction, etc.), and product-oriented thinking. (No matter how long you've been coding, no matter the depth and breadth of your skills, you must have the ability to earn money independently!! Bros, because one day you won't be in the workplace, and one day you will face choices and the ruthlessness of the workplace)

Copyright belongs to the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

The most competitive era for front-end might really be ending. AI Agent engineers will be the protagonists of the future. The era where humans only make decisions and think about commercialization models, while AI executes, is in full swing;

Sorry everyone, this past year I've been busy making a living, working part-time, taking care of kids, and running an e-commerce store with many people, so technical articles have really been delayed. It's been almost a year since I updated, but technical articles will still be updated irregularly to share some core technical insights, learning the front-end journey with everyone, and future AI vision and AI business thinking.

The future is here. In the AI era, the Agent engineer era, there is no longer a strict distinction between front-end and back-end. With good models and sufficient tokens, you are a senior programmer (but not necessarily a senior AI engineer)~

image.png

image.png

A Component Library in the AI Era Must Have AI Components + AI-Understandable Skills

In today's AI explosion, if your project is still piecing together interfaces with traditional component libraries, you've definitely experienced these pains:

Every feature requires searching all over the world for different third-party packages, resulting in bloated package sizes, version conflicts, and explosive maintenance costs.

Today, I'm recommending a full-stack component system tailored for serious product teams built on Vue 3.5+ — YH-UI. It's not a simple clone of existing UI libraries, but a Monorepo-level solution that perfectly integrates UI, AI interaction, workflows, advanced requests, and a theme engine.

image.png

🚀 Why YH-UI?

YH-UI focuses on product-grade depth and breadth, providing a complete matrix that can directly support complex commercial products:

Domain Core Capabilities Provided by YH-UI
Core UI Components Deeply adapted for Vue 3.5+, supports complete TS types, SSR server-side rendering adaptation
AI Native Suite Chat dialogue, Sender input box, Thought Chain, Code Block highlighting, Code Runner online execution, Artifacts, Prompts, etc.
Data & Workflow Drag-and-drop Flow editor, Gantt chart, big data virtual scrolling, history snapshots, collaborative APIs
Foundation & Network Built-in @yh-ui/request client, supports SSE stream parsing, request queues, large file chunked upload/download
Theme & Engineering Runtime CSS variable rewriting, dark mode, high/low density, color-blind friendly mode; officially supports Nuxt module and on-demand import

🔥 Deep Dive into Five Core Selling Points

1. Born for AI: Full Suite of AI Interaction Components (Out of the Box)

Developing AI-native applications no longer requires hand-writing complex typewriter effects and Markdown parsing. YH-UI provides a full suite of AI interaction primitives:

<!-- Minimal configuration to get a highly complete AI chat interface -->
<template>
  <yh-ai-chat 
    v-model:messages="messages" 
    :loading="loading" 
    @send="handleSend" 
  />
</template>

2. Drag-and-Drop Workflow & Gantt Chart: Saving Complex Backends

Workflows (Flow) and Gantt charts are the hardest nuts to crack in modern Admin systems. YH-UI directly turns them into highly cohesive components:

3. Super Powerful @yh-ui/request Async Request Network Library

image.png

Usually with Axios, we still need to wrap a layer of Hooks ourselves. The @yh-ui/request bundled with YH-UI is practically a cheat code for Vue development:

4. A Dark/Theme System with Both Prestige and Inclusivity

As a "serious" product-grade UI, YH-UI pays great attention to visual details:

5. Ultimate Developer Experience: 1-Second Export to CodeSandbox for Debugging

Want to tinker with a component online while reading the docs? YH-UI provides an extremely powerful one-click export to StackBlitz / CodeSandbox feature. It performs static dependency analysis on your Demo code in real-time locally/in the cloud, packaging the core components, CSS variables, and even mermaid / dayjs dependencies referenced on-demand, allowing you to run it seamlessly in a cloud sandbox immediately.

🛠️ Quick Start

YH-UI provides an extremely friendly entry barrier.

1. Install Dependencies

pnpm add @yh-ui/yh-ui

2. Full Import

import { createApp } from 'vue'
import YhUI from '@yh-ui/yh-ui'
import '@yh-ui/yh-ui/css'
import App from './App.vue'

createApp(App).use(YhUI).mount('#app')

3. On-Demand Import (Recommended)

Paired with unplugin-vue-components, enjoy the smooth experience of automatic on-demand loading of components and styles:

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { YhUIResolver } from '@yh-ui/yh-ui/resolver'

export default {
  plugins: [
    Components({
      resolvers: [YhUIResolver()]
    })
  ]
}

🌟 Final Words

YH-UI is not satisfied with just being a simple form framework, but aims to become a one-stop R&D foundation for serious product teams in the Vue ecosystem. If you are working on AI assistants, complex form applications, data dashboards, collaborative workflows, it is definitely a divine tool that can save you 50% of your R&D effort.

The project is currently under active iteration and perfectly adapted for Vue 3.5+.

Comments

Top 1 from juejin.cn, machine-translated. The original thread is authoritative.

少说话_多学习

Starred to show support first.