🚀 Element-Plus-X

An out-of-the-box enterprise-level AI component library (based on Vue 3 + Element-Plus)

📢 Quick Links

Resource Type	Link
Documentation	📖 Development Documentation
Online Demo	👁️ Online Preview
Code Repository	🐙 GitHub 🚠 Gitee
NPM Package	📦 npm
Issue Feedback	🐛 Submit a Bug
Community	🐒 Discussion Group
Template Project Preview	👀 Online Preview
Template Project Source Code	🐙 GitHub 🚠 Gitee

🛠️ Core Features

• ✨ Enterprise-level AI Components: Pre-built scenario-based components such as chatbots and voice interaction.
• 🚀 Zero-configuration Integration: Based on the Element-Plus design system, ready to use right out of the box.
• 📦 On-demand Loading: Provides Tree Shaking optimization.

🔎 Installation

# NPM
npm install vue-element-plus-x

# PNPM (Recommended)
pnpm install vue-element-plus-x

# Yarn
yarn install vue-element-plus-x

📚 Usage Examples

1. On-demand Import

<script setup>
import { BubbleList, XSender } from 'vue-element-plus-x';

const list = [
  {
    content: 'Hello, Element Plus X',
    role: 'user'
  }
];
</script>

<template>
  <div
    style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;"
  >
    <BubbleList :list="list" />
    <XSender />
  </div>
</template>

2. Global Import

// main.ts
import { createApp } from 'vue';
import ElementPlusX from 'vue-element-plus-x';
import App from './App.vue';

const app = createApp(App);
// Globally import using app.use()
app.use(ElementPlusX);
app.mount('#app');

3. CDN Import

<!-- This method is still under testing -->
<!-- CDN Import -->
<script src="https://unpkg.com/vue-element-plus-x@1.3.0/dist/umd/index.js"></script>

🌟 Implemented Components and Hooks

Component Name	Description	Documentation Link
Bubble	Extended bubble message component	📄 Documentation
BubbleList	Extended bubble message list component	📄 Documentation
Conversations	Extended conversation management component	📄 Documentation
Welcome	Welcome component	📄 Documentation
Prompts	Prompt set component	📄 Documentation
FilesCard	File card component	📄 Documentation
Attachments	File attachment upload component	📄 Documentation
XSender	Intelligent input box (with voice interaction and mention support)	📄 Documentation
Thinking	Extended "Thinking..." component	📄 Documentation
ThoughtChain	Thought chain component	📄 Documentation
useRecord	Browser-built voice recognition API Hooks	📄 Documentation
useXStream	Stream mode interface Hooks	📄 Documentation
useSend & XRequest	Split version of stream mode Hooks (extended)	📄 Documentation

🎯 Development Plan (Updated Weekly)

🎀 We will collect everyone's encountered problems and demand scenarios in various aspects such as issues and communication groups, and develop short-term and long-term development plans. For more details, please move on 👉 Development Plan

🤝 Contribute

1. Fork the repository → 2. Create a Feature branch → 3. Submit a Pull Request

Details can be moved 👉 📄 Documentation

We welcome:

• 🐛 Bug fixes
• 💡 Proposals for new features
• 📝 Documentation improvements
• 🎨 Style optimizations

👥 Contributors

👥 Community Support