matechat-vue

When to use this skill

ALWAYS use this skill when the user mentions:

"MateChat", "MateChat Vue", "matechat-vue"
Building AI chat interfaces with Vue 3
Using chat UI components like Bubble, Input, Prompt, Layout, Markdown, etc.
"MateChat components", "AI chat UI", "AI Agent UI"
Requests to "implement a [component] with MateChat"
Requests for MateChat component API or configuration
Building conversational AI interfaces

How to use this skill

This skill is organized to provide comprehensive guidance for MateChat Vue 3 components, document source: https://matechat.gitcode.com/use-guide/introduction.html.

1. Identify the User's Need

Component Usage → See Component Categories below
API Reference → references/components/<componentName>/api.md
Demo Examples → references/components/<componentName>/demo.md
Use Guide → references/use-guide/ (installation, configuration, on-demand import, themes, i18n, CLI, etc.)

2. Component Categories

Conversation Components

Bubble - Bubble component, used to carry conversation content
- API: references/components/bubble/api.md
- Demo: references/components/bubble/demo.md

Input Components

Input - Input component, used for user message input
- API: references/components/input/api.md
- Demo: references/components/input/demo.md
Textarea - Textarea component
- API: references/components/textarea/api.md
- Demo: references/components/textarea/demo.md
Mention - Mention component, supports @mention functionality
- API: references/components/mention/api.md
- Demo: references/components/mention/demo.md

Layout Components

Layout - Layout component, provides the overall page layout
- API: references/components/layout/api.md
- Demo: references/components/layout/demo.md
Header - Header component
- API: references/components/header/api.md
- Demo: references/components/header/demo.md

Functional Components

Prompt - Prompt component, used for quick prompts
- API: references/components/prompt/api.md
- Demo: references/components/prompt/demo.md
List - List component, used to display the conversation list
- API: references/components/list/api.md
- Demo: references/components/list/demo.md
Toolbar - Toolbar component
- API: references/components/toolbar/api.md
- Demo: references/components/toolbar/demo.md

File Components

Attachment - Attachment component, used for file upload
- API: references/components/attachment/api.md
- Demo: references/components/attachment/demo.md
FileList - File list component
- API: references/components/fileList/api.md
- Demo: references/components/fileList/demo.md

Display Components

MarkdownCard - Markdown card component, used to render Markdown content
- API: references/components/markDownCard/api.md
- Demo: references/components/markDownCard/demo.md
Introduction - Introduction component
- API: references/components/introduction/api.md
- Demo: references/components/introduction/demo.md

3. Use Guide Documentation

The references/use-guide/ directory contains comprehensive guides for using MateChat:

Getting Started

introduction.md - Introduction to MateChat quick start guide，include installation etc.

Configuration

theme.md - Theme customization guide
require.md - Requirements and dependencies, on-demand import guide
i18n.md - Internationalization guide

CLI Usage

solution.md - Cli install and create a project with MateChat Cli
cli/multi-round-chat.md - Multi-round chat with CLI
cli-theme.md - CLI theme configuration

Model Integration

model/deepseek.md - DeepSeek model integration
model/openai.md - OpenAI model integration
model/other.md - Other model integrations

Other Resources

access.md - Access control
faq.md - Frequently asked questions
contributing.md - Contributing guide
changelog.md - Change log

To use guide documentation:

Identify the topic from the user's request
Load the corresponding guide file from reference/components/ or references/use-guide/
Follow the instructions and best practices in that guide

4. Installation

Using npm:

npm install @matechat/core

5. Basic Setup

Full Import:

import { createApp } from 'vue'
import MateChat from '@matechat/core'
import App from './App.vue'

const app = createApp(App)
app.use(MateChat)
app.mount('#app')

On-Demand Import:

import { McBubble, McInput } from '@matechat/core'

6. Quick Start Example

<template>
  <div class="chat-container">
    <McBubble 
      :content="message" 
      :avatarConfig="avatarConfig"
      align="left"
    />
    <McInput 
      :value="userInput"
      placeholder="Type your message..."
      @submit="handleSend"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { McBubble, McInput } from '@matechat/core'

const message = ref('Hello! How can I help you?')
const userInput = ref('')
const avatarConfig = {
  imgSrc: '/logo.svg',
  name: 'AI'
}

const handleSend = () => {
  console.log('Send message:', userInput.value)
  userInput.value = ''
}
</script>

API Reference

All component API documentation is available in the references/components/ directory, organized by component name:

Each component has two files:
- api.md - API documentation (props, events, slots, types)
- demo.md - Demo examples and usage patterns

To use API reference:

Identify the component you need help with
Load the corresponding API file: references/components/<componentName>/api.md
Load the demo file for examples: references/components/<componentName>/demo.md
Follow the examples and adapt to your use case

Automatic Documentation Updates

This skill includes an automatic documentation update mechanism to keep component documentation synchronized with the latest MateChat release.

Best Practices

Use on-demand import: Import only the components you need to reduce bundle size
Use Composition API: Prefer Composition API for better code organization
Handle events properly: Use proper event handlers for component interactions
Customize themes: Use theme variables for customization
Follow design specs: Follow MateChat design specifications
Use TypeScript: Leverage TypeScript for better type safety
When designing components for use, it is necessary to read the corresponding component API documentation from references/components/<componentName>/api.md

Component Selection Guide

For building a chat interface:

Start with Layout for overall structure
Use Header for navigation
Use Bubble for messages
Use Input or Textarea for user input
Use List for conversation history

For file handling:

Use Attachment for file upload
Use FileList for displaying uploaded files

For rich content:

Use MarkdownCard for rendering Markdown content
Use Mention for @mentions in input

For quick actions:

Use Prompt for quick prompt suggestions
Use Toolbar for action buttons

Resources

Official Documentation: https://matechat.gitcode.com/use-guide/introduction.html
GitCode Repository: https://gitcode.com/DevCloudFE/MateChat
NPM Package: https://www.npmjs.com/package/@matechat/core

Keywords

MateChat, matechat-vue, Vue 3, Vue3, AI chat, chat UI, Agent UI, conversation UI, bubble, input, prompt, layout, attachment, file list, markdown card, mention, toolbar, conversation components, chat interface, bubble, input box, prompt, layout, attachment, file list, Markdown card