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
| 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 ''; } }