vuetifyjs/mcp
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
🤖 에이전트 챗봇과 함께 사용하는 모델 컨텍스트 프로토콜(MCP) 라이브러리
개요
모델 컨텍스트 프로토콜(MCP) 서버는 모든 MCP 호환 클라이언트나 IDE에 Vuetify 컴포넌트 정보와 문서를 제공합니다. Vuetify 모델 컨텍스트 프로토콜(MCP) 서버는 Vuetify의 강력한 컴포넌트 라이브러리와 AI 지원 개발 환경 간의 간극을 메워줍니다. 이 통합은 개발 워크플로우 내에서 Vuetify의 광범위한 컴포넌트 생태계에 원활하게 접근할 수 있게 합니다. 이 MCP 서버는 IDE 및 기타 모델 컨텍스트 클라이언트가 다음을 지원할 수 있게 합니다: - 적절한 소품과 속성을 가진 Vuetify 컴포넌트 생성 - 모범 사례에 따른 공통 UI 레이아웃 및 패턴 생성 - Vuetify 기능 및 API에 대한 포괄적인 정보 제공 - IDE를 떠나지 않고도 설치 가이드, FAQ, 릴리스 노트 접근 - 맞춤형 설계 시스템 구축을 위한 @vuetify/v0 컴포즈블 및 헤드리스 컴포넌트 작업 개발 환경을 Vuetify MCP 서버에 연결함으로써, Vuetify의 ...
개요(AI 번역)
모델 컨텍스트 프로토콜(MCP) 서버는 모든 MCP 호환 클라이언트나 IDE에 Vuetify 컴포넌트 정보와 문서를 제공합니다.
개요
Vuetify 모델 컨텍스트 프로토콜(MCP) 서버는 Vuetify의 강력한 컴포넌트 라이브러리와 AI 지원 개발 환경 간의 간극을 메워줍니다. 이 통합은 개발 워크플로우 내에서 Vuetify의 광범위한 컴포넌트 생태계에 원활하게 접근할 수 있게 합니다.
이 MCP 서버는 IDE 및 기타 모델 컨텍스트 클라이언트가 다음을 지원할 수 있게 합니다:
- 적절한 소품과 속성을 가진 Vuetify 컴포넌트 생성
- 모범 사례를 따라 공통 UI 레이아웃 및 패턴 생성
- Vuetify 기능과 API에 대한 포괄적인 정보 제공
- IDE를 떠나지 않고도 설치 가이드, FAQ, 릴리스 노트에 접근할 수 있습니다
- @vuetify/v0 컴포저블 및 헤드리스 컴포넌트를 다루며 맞춤형 설계 시스템 구축
개발 환경을 Vuetify MCP 서버에 연결함으로써 Vuetify의 구성 요소 구조, 스타일링 규칙, 구현 세부사항을 이해하는 AI 기반 지원을 받을 수 있습니다.
퀵 스타트
호스팅 HTTP 서버 (가장 쉬움)
URL 두 개. 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
설치
npx -y @vuetify/mcp설정
{
"mcpServers": {
"vuetify-mcp": {
"command": "npx",
"args": ["-y", "@vuetify/mcp"]
}
}
}