vuetifyjs/mcp

Developer tools

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。原文を見る

115 stars 6 forks 品質 89 トレンド 29MIT

Repository Install

🤖 エージェントチャットボットで使用するモデルコンテキストプロトコル(MCP)ライブラリ

概要

モデルコンテキストプロトコル(MCP)サーバーは、任意のMCP互換クライアントやIDEに対してVuetifyのコンポーネント情報とドキュメントを提供します。 Vuetifyモデルコンテキストプロトコル(MCP)サーバーは、Vuetifyの強力なコンポーネントライブラリとAI支援開発環境のギャップを埋めます。この統合により、開発ワークフロー内でVuetifyの広範なコンポーネントエコシステムにシームレスにアクセスできます。このMCPサーバーは、IDEやその他のModel Contextクライアントが以下の支援を可能にします: - 適切なプロップと属性を持つVuetifyコンポーネントの生成 - ベストプラクティスに基づく共通UIレイアウトやパターンの作成 - Vuetifyの機能やAPIに関する包括的な情報提供 - IDEを離れずにインストールガイド、FAQ、リリースノートにアクセスできる - カスタムデザインシステム構築のための@vuetify/v0コンポサブルやヘッドレスコンポーネントの扱い開発環境をVuetify MCPサーバーに接続することで、Vuetifyの...

概要（AI 翻訳）

モデルコンテキストプロトコル(MCP)サーバーは、任意のMCP互換クライアントやIDEに対してVuetifyのコンポーネント情報とドキュメントを提供します。

概要

Vuetifyモデルコンテキストプロトコル(MCP)サーバーは、Vuetifyの強力なコンポーネントライブラリとAI支援開発環境のギャップを埋めます。この統合により、開発ワークフロー内でVuetifyの広範なコンポーネントエコシステムにシームレスにアクセスできます。

このMCPサーバーは、IDEやその他のModel Contextクライアントが以下の支援を可能にします:

適切なプロップと属性を持つVuetifyコンポーネントの生成
ベストプラクティスに従って共通のUIレイアウトやパターンを作成すること
Vuetifyの機能およびAPIに関する包括的な情報提供
IDEを離れずにインストールガイド、FAQ、リリースノートにアクセスできる
カスタムデザインシステムを構築するための@vuetify/v0コンポーショナブルおよびヘッドレスコンポーネントの作業

開発環境をVuetify MCPサーバーに接続することで、Vuetifyのコンポーネント構造、スタイリング規則、実装の詳細を理解するAI支援を受けられます。

クイックスタート

ホスティングHTTPサーバー(最も簡単)

URLは2つ。Vuetify Oneに登録していない限り、/mcpを使ってください。

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。

README

以下は原文 README の抜粋です。原文を見る。

Model Context Protocol (MCP) server providing Vuetify component information and documentation to any MCP-compatible client or IDE.

Overview

The Vuetify Model Context Protocol (MCP) server bridges the gap between Vuetify’s powerful component library and AI-assisted development environments. This integration enables seamless access to Vuetify’s extensive component ecosystem directly within your development workflow.

This MCP server enables IDEs and other Model Context clients to assist with:

Generating Vuetify components with proper props and attributes
Creating common UI layouts and patterns following best practices
Providing comprehensive information about Vuetify features and APIs
Accessing installation guides, FAQs, and release notes without leaving your IDE
Working with @vuetify/v0 composables and headless components for building custom design systems

By connecting your development environment to the Vuetify MCP server, you gain AI-powered assistance that understands Vuetify’s component structure, styling conventions, and implementation details.

Quick Start

Hosted HTTP Server (Easiest)

Two URLs. Use /mcp unless you subscribe to Vuetify One.

URL	Auth	Tools
`https://mcp.vuetifyjs.com/mcp`	none	docs, APIs, install/upgrade guides
`https://mcp.vuetifyjs.com/one`	Vuetify One OAuth	docs plus ecosystem sites (Bin, Play, Link, and the rest of One)

The claude CLI below is Claude Code, not Claude Desktop — see Claude Desktop for that GUI client.

# Claude Code — public docs
claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp

# Optional — authenticate with Vuetify One
claude mcp add --transport http vuetify-one https://mcp.vuetifyjs.com/one

Grok Bot / Cursor Agents: add /mcp for docs (no Authorize card). Add /one to authenticate with Vuetify One; subscribers can then use ecosystem sites from that connector. Do not paste an API key.

Local Installation

Run Vuetify MCP locally:

# Start the Vuetify MCP server
npx -y @vuetify/mcp

GitHub で README 全文を見る

インストール

npx -y @vuetify/mcp

MCP 初心者？mcpskill.org のガイドから始めましょう →

設定

{
  "mcpServers": {
    "vuetify-mcp": {
      "command": "npx",
      "args": ["-y", "@vuetify/mcp"]
    }
  }
}