get_component_by_path
Retrieve UI components from the Magic UI design system by specifying their file path, enabling AI assistants and MCP clients to access and use design system elements.
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 that implements the core logic of the 'get_component_by_path' tool. It extracts the path parameter, fetches the file content via GitHubService.getFileContent, handles errors, and returns the content as MCP text 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:56-56 (schema)Zod input schema defining the 'path' parameter for the tool.path: z.string().describe("Path to the component file"),
- src/server.ts:54-54 (registration)Registration of the 'get_component_by_path' tool on the MCP server instance."get_component_by_path",
- src/services/github.ts:149-175 (helper)Supporting helper method in GitHubService that performs the actual GitHub API call to retrieve file content by path, decodes base64, and handles errors gracefully.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 ''; } }