mcpField
C
Component MCP Server

Component MCP Server

本地服务
github.com/hnegishi开发工具176 周前更新

关于 Component MCP Server

Component MCP Server 可供开发者搜索本地仓库中的组件并获取其源代码。它通过配置组件目录路径来定位目标仓库。

主要功能

  1. 01搜索仓库中的组件
  2. 02返回组件名称和路径
  3. 03获取组件源代码
  4. 04配置本地组件目录路径

适用场景

  1. 01在前端仓库中查找组件
  2. 02查看组件源代码

MCP 相关

它向 MCP 客户端提供 `searchComponents`,用于查找组件名称和路径;并提供 `getComponentInfo`,用于获取源代码。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"component": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/inspector"
]
}
}
}
启动命令npx -y @modelcontextprotocol/inspector

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npm@modelcontextprotocol/inspector

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具,维护者暂未提供工具列表。

README 原文English

来自项目 README

README 暂无中文译文,以下为英文原文;中文介绍见上方。

Component MCP Server

Overview

ローカルにあるリポジトリのコンポーネントを検索し、コンポーネントの情報を取得するための MCP Server です。

Installation

  1. 依存関係をインストールします。
npm install
  1. .envファイルを作成し、リポジトリ内のコンポーネントのパスを指定します。
COMPONENTS_PATH=/path/to/your/front/repository/components

Usage

  1. build MCP Server
npm run build
VSCode
{
  "servers": {
    "component-mcp-server": {
      "command": "node",
      "args": ["./build/index.js"],
      "env": {
        "COMPONENTS_PATH": "/path/to/your/front/repository/components"
      }
    }
  }
}

Tools

  • searchComponents - コンポーネントを検索し、その名前とパスを取得します。
  • getComponentInfo - コンポーネントのソースコードを取得します。

Debug

component-mcp-server をテストおよびデバッグするための開発者ツールが立ち上がります。

npx @modelcontextprotocol/inspector node ./build/index.js

技術スタック

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。