get_component_by_path
Retrieve a specific UI component from the Magic UI design system by providing its file path, enabling MCP clients to locate and use components in their applications.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Path to the component file |
Implementation Reference
- src/server.ts:58-90 (handler)The handler function for the 'get_component_by_path' MCP tool. Extracts the 'path' parameter, fetches the component file content using GitHubService.getFileContent(path), and returns it as text content or an error response.async (params: any) => { const path = params.path as string; try { // Obter o conteúdo do arquivo const content = await githubService.getFileContent(path); if (!content) { return { content: [{ type: "text", text: `Component file at path '${path}' not found or empty`, }], isError: true, }; } return { content: [{ type: "text", text: content, }], }; } catch (error) { return { content: [{ type: "text", text: `Error fetching component at path '${path}': ${error}`, }], isError: true, }; } }
- src/server.ts:55-57 (schema)Input schema for the tool: requires a 'path' string parameter describing the path to the component file.{ path: z.string().describe("Path to the component file"), },
- src/server.ts:54-91 (registration)Registration of the 'get_component_by_path' tool on the MCP server using server.tool(name, schema, handler)."get_component_by_path", { path: z.string().describe("Path to the component file"), }, async (params: any) => { const path = params.path as string; try { // Obter o conteúdo do arquivo const content = await githubService.getFileContent(path); if (!content) { return { content: [{ type: "text", text: `Component file at path '${path}' not found or empty`, }], isError: true, }; } return { content: [{ type: "text", text: content, }], }; } catch (error) { return { content: [{ type: "text", text: `Error fetching component at path '${path}': ${error}`, }], isError: true, }; } } );
- src/services/github.ts:149-175 (helper)GitHubService.getFileContent helper method called by the tool handler. Fetches file content from the 'magicuidesign/magicui' GitHub repository using Octokit, base64 decodes it, and returns the string content or empty string on error (including rate limits).async getFileContent(path: string): Promise<string> { try { // Fetch content of a specific file const { data } = await this.octokit.repos.getContent({ owner: this.owner, repo: this.repo, path, }); if ('content' in data) { // Decode content from base64 return Buffer.from(data.content, 'base64').toString('utf-8'); } throw new Error(`Could not get content for path: ${path}`); } catch (error: any) { // Check if it's a rate limit error if (error.status === 403 && error.message.includes('API rate limit exceeded')) { console.error('GitHub API rate limit exceeded. Consider using a token.'); // Return empty string instead of throwing return ''; } console.error(`Error fetching file content for ${path}:`, error); return ''; } }