Skip to main content
Glama
lallen30

BluestoneApps MCP Remote Server

by lallen30

get_screen_example

Retrieve React Native screen code examples to implement UI components following BluestoneApps coding standards.

Instructions

Get a React Native screen example

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
screen_nameYesScreen Name

Implementation Reference

  • Registration and inline handler implementation for the 'get_screen_example' tool. Handles input validation, fetches screen example code from files with exact and fuzzy matching.
    server.tool(
      "get_screen_example",
      "Get a React Native screen example",
      {
        screen_name: z.string().describe("Screen Name"),
      },
      async ({ screen_name }) => {
        if (!screen_name) {
          return {
            content: [
              {
                type: "text",
                text: "Screen name not specified",
              },
            ],
          };
        }
        
        try {
          // First try exact match
          const result = getExampleContent("screens", screen_name);
          
          if (result.error) {
            // Try to find by fuzzy match
            const screensDir = path.join(CODE_EXAMPLES_DIR, "react-native", "screens");
            const closestMatch = findClosestMatch(screensDir, screen_name);
            
            if (closestMatch) {
              const fuzzyResult = getExampleContent("screens", closestMatch);
              return {
                content: [
                  {
                    type: "text",
                    text: fuzzyResult.content?.[0] ?? fuzzyResult.error ?? "Error: No content available",
                  },
                ],
              };
            } else {
              return {
                content: [
                  {
                    type: "text",
                    text: `Screen ${screen_name} not found`,
                  },
                ],
              };
            }
          }
          
          return {
            content: [
              {
                type: "text",
                text: result.content?.[0] ?? result.error ?? "Error: No content available",
              },
            ],
          };
        } catch (err) {
          console.error(`Error getting screen example ${screen_name}:`, err);
          return {
            content: [
              {
                type: "text",
                text: `Error getting screen example: ${err}`,
              },
            ],
          };
        }
      },
    );
  • Helper function to retrieve content from example files in the code-examples directory by subcategory and filename.
    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 filenames containing the search term within a directory.
    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;
    }
  • Zod schema for the tool input parameter 'screen_name'.
    {
      screen_name: z.string().describe("Screen Name"),
    },

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