Component MCP Server
Description
# Component MCP Server # Overview ローカルにあるリポジトリのコンポーネントを検索し、コンポーネントの情報を取得するための MCP Server です。 ## Installation 1. 依存関係をインストールします。 ```bash npm install ``` 2. `.env`ファイルを作成し、リポジトリ内のコンポーネントのパスを指定します。 ``` COMPONENTS_PATH=/path/to/your/front/repository/components ``` ## Usage 1. build…
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
- Author
- hnegishi
- GitHub stars
- 1
- Downloads
- 152
- Categories
- Other
Jump to
- 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. Install dependencies: npm install. 2. Create a .env file with COMPONENTS_PATH pointing to the repository’s components directory. 3. Build the server: npm run build. 4. Configure in VSCode with command: "node", args: ["./build/index.js"], and the COMPONENTS_PATH environment variable.
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"
]
}
}Component MCP Server
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.
