Skip to main content
Glama
lallen30
by lallen30

get_component_example

Retrieve React Native component examples from BluestoneApps coding standards to implement UI elements correctly.

Instructions

Get a React Native component example

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
component_nameYesComponent Name

Implementation Reference

  • Handler function that implements the get_component_example tool logic: validates input, loads exact or fuzzy-matched component example code from resources/code-examples/react-native/components using getExampleContent and findClosestMatch helpers, returns as MCP text content or error.
    async ({ component_name }) => { if (!component_name) { return { content: [ { type: "text", text: "Component name not specified", }, ], }; } try { // First try exact match const result = getExampleContent("components", component_name); if (result.error) { // Try to find by fuzzy match const componentsDir = path.join(CODE_EXAMPLES_DIR, "react-native", "components"); const closestMatch = findClosestMatch(componentsDir, component_name); if (closestMatch) { const fuzzyResult = getExampleContent("components", closestMatch); return { content: [ { type: "text", text: fuzzyResult.content?.[0] ?? fuzzyResult.error ?? "Error: No content available", }, ], }; } else { return { content: [ { type: "text", text: `Component ${component_name} not found`, }, ], }; } } return { content: [ { type: "text", text: result.content?.[0] ?? result.error ?? "Error: No content available", }, ], }; } catch (err) { console.error(`Error getting component example ${component_name}:`, err); return { content: [ { type: "text", text: `Error getting component example: ${err}`, }, ], }; } }, );
  • Zod input schema defining the required 'component_name' string parameter.
    { component_name: z.string().describe("Component Name"), },
  • src/index.ts:226-296 (registration)
    MCP tool registration using McpServer.tool(), specifying name, description, schema, and inline handler function.
    server.tool( "get_component_example", "Get a React Native component example", { component_name: z.string().describe("Component Name"), }, async ({ component_name }) => { if (!component_name) { return { content: [ { type: "text", text: "Component name not specified", }, ], }; } try { // First try exact match const result = getExampleContent("components", component_name); if (result.error) { // Try to find by fuzzy match const componentsDir = path.join(CODE_EXAMPLES_DIR, "react-native", "components"); const closestMatch = findClosestMatch(componentsDir, component_name); if (closestMatch) { const fuzzyResult = getExampleContent("components", closestMatch); return { content: [ { type: "text", text: fuzzyResult.content?.[0] ?? fuzzyResult.error ?? "Error: No content available", }, ], }; } else { return { content: [ { type: "text", text: `Component ${component_name} not found`, }, ], }; } } return { content: [ { type: "text", text: result.content?.[0] ?? result.error ?? "Error: No content available", }, ], }; } catch (err) { console.error(`Error getting component example ${component_name}:`, err); return { content: [ { type: "text", text: `Error getting component example: ${err}`, }, ], }; } }, );
  • Core helper function used by the handler to load example code file content from the react-native subcategory directory using glob-based search.
    function getExampleContent(subcategory: string, filename: string): { content?: string[]; path?: string; error?: string } { const searchDir = path.join(CODE_EXAMPLES_DIR, "react-native", subcategory); const filePath = findFileInSubdirectories(searchDir, filename); if (!filePath || !fs.existsSync(filePath)) { return { error: `Example ${filename} not found` }; } try { const content = fs.readFileSync(filePath, 'utf8'); return { content: [content], path: path.relative(BASE_DIR, filePath) }; } catch (err) { console.error(`Error reading example ${filename}:`, err); return { error: `Error reading example ${filename}` }; } }
  • Helper function for fuzzy matching: finds the first file in directory whose basename (no ext) contains the search name (case-insensitive).
    function findClosestMatch(directory: string, searchName: string, extensions: string[] = ['.js', '.jsx', '.ts', '.tsx']) { if (!fs.existsSync(directory)) return null; let closestMatch = null; for (const ext of extensions) { const files = glob.sync(`${directory}/**/*${ext}`); for (const filePath of files) { const fileName = path.basename(filePath); const fileNameNoExt = path.basename(fileName, path.extname(fileName)); if (fileNameNoExt.toLowerCase().includes(searchName.toLowerCase())) { closestMatch = fileNameNoExt; break; } } if (closestMatch) break; } return closestMatch; }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/lallen30/mcp-remote-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server