matechat-vue

このスキルを使用するタイミング

ユーザーが次の内容に言及した場合は、必ずこのスキルを使用してください：

• 「MateChat」、「MateChat Vue」、「matechat-vue」
• Vue 3 を使用した AI チャットインターフェースの構築
• Bubble、Input、Prompt、Layout、Markdown などのチャット UI コンポーネントの使用
• 「MateChat コンポーネント」、「AI チャット UI」、「AI エージェント UI」
• 「MateChat で [コンポーネント] を実装する」という依頼
• MateChat コンポーネントの API や設定に関する依頼
• 対話型 AI インターフェースの構築

このスキルの使用方法

このスキルは、MateChat Vue 3 コンポーネントに関する包括的なガイダンスを提供するよう構成されています。ドキュメントのソース：https://matechat.gitcode.com/use-guide/introduction.html。

1. ユーザーのニーズを特定する

• コンポーネントの使用方法 → 以下のコンポーネントカテゴリーを参照
• API リファレンス → references/components/<componentName>/api.md
• デモ例 → references/components/<componentName>/demo.md
• 使用ガイド → references/use-guide/（インストール、設定、オンデマンドインポート、テーマ、i18n、CLI など）

2. コンポーネントカテゴリー

会話コンポーネント（Conversation Components）

• Bubble - 会話内容を表示するバブルコンポーネント
  • API: references/components/bubble/api.md
  • Demo: references/components/bubble/demo.md

入力コンポーネント（Input Components）

• Input - ユーザーがメッセージを入力するための入力コンポーネント
  • API: references/components/input/api.md
  • Demo: references/components/input/demo.md
• Textarea - テキストエリアコンポーネント
  • API: references/components/textarea/api.md
  • Demo: references/components/textarea/demo.md
• Mention - @メンション機能に対応したメンションコンポーネント
  • API: references/components/mention/api.md
  • Demo: references/components/mention/demo.md

レイアウトコンポーネント（Layout Components）

• Layout - ページ全体のレイアウトを提供するレイアウトコンポーネント
  • API: references/components/layout/api.md
  • Demo: references/components/layout/demo.md
• Header - ヘッダーコンポーネント
  • API: references/components/header/api.md
  • Demo: references/components/header/demo.md

機能コンポーネント（Functional Components）

• Prompt - クイックプロンプト用のプロンプトコンポーネント
  • API: references/components/prompt/api.md
  • Demo: references/components/prompt/demo.md
• List - 会話リストを表示するリストコンポーネント
  • API: references/components/list/api.md
  • Demo: references/components/list/demo.md
• Toolbar - ツールバーコンポーネント
  • API: references/components/toolbar/api.md
  • Demo: references/components/toolbar/demo.md

ファイルコンポーネント（File Components）

• Attachment - ファイルアップロード用の添付ファイルコンポーネント
  • API: references/components/attachment/api.md
  • Demo: references/components/attachment/demo.md
• FileList - ファイルリストコンポーネント
  • API: references/components/fileList/api.md
  • Demo: references/components/fileList/demo.md

表示コンポーネント（Display Components）

• MarkdownCard - Markdown コンテンツをレンダリングする Markdown カードコンポーネント
  • API: references/components/markDownCard/api.md
  • Demo: references/components/markDownCard/demo.md
• Introduction - 紹介コンポーネント
  • API: references/components/introduction/api.md
  • Demo: references/components/introduction/demo.md

3. ガイドドキュメントの利用

references/use-guide/ ディレクトリには、MateChat の使用に関する包括的なガイドが含まれています。

はじめに（入门指南）

• introduction.md - MateChat の概要とクイックスタートガイド（インストールなどを含む）

設定（配置）

• theme.md - テーマのカスタマイズガイド
• require.md - 要件と依存関係、および必要なものだけをインポートするガイド
• i18n.md - 国際化ガイド

CLI の使用方法（CLI使用）

• solution.md - CLI をインストールし、MateChat CLI でプロジェクトを作成する方法
• cli/multi-round-chat.md - CLI を使用した複数ターンのチャット
• cli-theme.md - CLI のテーマ設定

モデルの統合（模型集成）

• model/deepseek.md - DeepSeek モデルの統合
• model/openai.md - OpenAI モデルの統合
• model/other.md - その他のモデルの統合

その他のリソース（其他资源）

• access.md - アクセス制御
• faq.md - よくある質問
• contributing.md - コントリビューションガイド
• changelog.md - 変更履歴

ガイドドキュメントを利用するには：

1. ユーザーのリクエストからトピックを特定します
2. reference/components/ または references/use-guide/ から対応するガイドファイルを読み込みます
3. そのガイドの手順とベストプラクティスに従います

4. インストール

npm を使用する場合：

npm install @matechat/core

5. 基本設定

すべてをインポートする場合：

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

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

必要なものだけをインポートする場合：

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

6. クイックスタートの例

<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 リファレンス

すべてのコンポーネント API ドキュメントは references/components/ ディレクトリにあり、コンポーネント名ごとに整理されています。

• 各コンポーネントには 2 つのファイルがあります。
  • api.md - API ドキュメント（props、イベント、スロット、型）
  • demo.md - デモの例と使用パターン

API リファレンスを利用するには：

1. サポートが必要なコンポーネントを特定します
2. 対応する API ファイル references/components/<componentName>/api.md を読み込みます
3. 例を確認するため、デモファイル references/components/<componentName>/demo.md を読み込みます
4. 例に従い、ユースケースに合わせて調整します

ドキュメントの自動更新

このスキルには、コンポーネントのドキュメントを MateChat の最新リリースと同期させるための、自動ドキュメント更新の仕組みが含まれています。

ベストプラクティス

1. 必要なものだけをインポートする：必要なコンポーネントのみをインポートして、バンドルサイズを削減します
2. Composition API を使用する：コードを整理しやすくするため、Composition API を優先します
3. イベントを適切に処理する：コンポーネントとのインタラクションには、適切なイベントハンドラーを使用します
4. テーマをカスタマイズする：カスタマイズにはテーマ変数を使用します
5. デザイン仕様に従う：MateChat のデザイン仕様に従います
6. TypeScript を使用する：型安全性を高めるために TypeScript を活用します
7. 使用するコンポーネントを設計する際は、references/components/<componentName>/api.md にある対応するコンポーネント API ドキュメントを読む必要があります

コンポーネント選択ガイド

チャットインターフェースを構築する場合：

• 全体の構成には Layout を使用します
• ナビゲーションには Header を使用します
• メッセージには Bubble を使用します
• ユーザー入力には Input または Textarea を使用します
• 会話履歴には List を使用します

ファイルを扱う場合：

• ファイルのアップロードには Attachment を使用します
• アップロードされたファイルの表示には FileList を使用します

リッチコンテンツの場合：

• Markdown コンテンツのレンダリングには MarkdownCard を使用します
• 入力内の @メンションには Mention を使用します

クイックアクションの場合：

• クイックプロンプトの候補には Prompt を使用します
• アクションボタンには Toolbar を使用します

リソース

• 公式ドキュメント：https://matechat.gitcode.com/use-guide/introduction.html
• GitCode リポジトリ：https://gitcode.com/DevCloudFE/MateChat
• NPM パッケージ：https://www.npmjs.com/package/@matechat/core

キーワード

MateChat, matechat-vue, Vue 3, Vue3, AI チャット, チャット UI, エージェント UI, 会話 UI, バブル, 入力, プロンプト, レイアウト, 添付ファイル, ファイルリスト, Markdown カード, メンション, ツールバー, 会話コンポーネント, チャットインターフェース, バブル, 入力欄, プロンプト, レイアウト, 添付ファイル, ファイルリスト, Markdown カード