Component MCP Server
About
# Component MCP Server # Overview ローカルにあるリポジトリのコンポーネントを検索し、コンポーネントの情報を取得するための MCP Server です。 ## Installation 1. 依存関係をインストールします。 ```bash npm install ``` 2. `.env`ファイルを作成し、リポジトリ内のコンポーネントのパスを指定します。 ``` COMPONENTS_PATH=/path/to/your/front/repository/components ``` ## Usage 1. build MCP Server ```bash npm run build ``` ###…
Details
- License
- MIT
Explore
- Searches components and returns their names and paths
- Retrieves the full source code of a specific component
- Built with TypeScript and the Model Context Protocol SDK
- Simple configuration via a single environment variable
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Component MCP ServerCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
1. 依存関係をインストールします。
npm install
2. .envファイルを作成し、リポジトリ内のコンポーネントのパスを指定します。
COMPONENTS_PATH=/path/to/your/front/repository/components
searchComponents
コンポーネントを検索し、その名前とパスを取得します。
getComponentInfo
コンポーネントのソースコードを取得します。
- searchComponents - コンポーネントを検索し、その名前とパスを取得します。
- getComponentInfo - コンポーネントのソースコードを取得します。
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"component mcp server": {
"component-mcp-server": {
"command": "npx",
"args": [
"@modelcontextprotocol/inspector",
"node",
"./dist/index.js"
]
}
}
}
}McpServers
{
"component-mcp-server": {
"command": "npx",
"args": [
"@modelcontextprotocol/inspector",
"node",
"./dist/index.js"
]
}
}Overview
ローカルにあるリポジトリのコンポーネントを検索し、コンポーネントの情報を取得するための MCP Server です。
Installation
1. 依存関係をインストールします。
npm install
2. .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
技術スタック
- TypeScript
- Node.js
- @modelcontextprotocol/sdk - MCP サーバー実装のための SDK
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
