get_theme_example

Retrieve React Native theme code examples from BluestoneApps coding standards to implement consistent styling in mobile applications.

Instructions

Get code for a React Native theme

Input Schema

TableJSON Schema

Name	Required	Description	Default
`theme_name`	Yes	Theme Name

Implementation Reference

src/index.ts:520-582 (handler)

Handler function for the get_theme_example tool. It takes theme_name, attempts exact match with getExampleContent, falls back to fuzzy match using findClosestMatch, and returns the code content or error message.

async ({ theme_name }) => {
  if (!theme_name) {
    return {
      content: [
        {
          type: "text",
          text: "Theme name not specified",
        },
      ],
    };
  }
  
  try {
    // First try exact match
    const result = getExampleContent("theme", theme_name);
    
    if (result.error) {
      // Try to find by fuzzy match
      const themesDir = path.join(CODE_EXAMPLES_DIR, "react-native", "theme");
      const closestMatch = findClosestMatch(themesDir, theme_name);
      
      if (closestMatch) {
        const fuzzyResult = getExampleContent("theme", closestMatch);
        return {
          content: [
            {
              type: "text",
              text: fuzzyResult.content?.[0] ?? fuzzyResult.error ?? "Error: No content available",
            },
          ],
        };
      } else {
        return {
          content: [
            {
              type: "text",
              text: `Theme ${theme_name} not found`,
            },
          ],
        };
      }
    }
    
    return {
      content: [
        {
          type: "text",
          text: result.content?.[0] ?? result.error ?? "Error: No content available",
        },
      ],
    };
  } catch (err) {
    console.error(`Error getting theme example ${theme_name}:`, err);
    return {
      content: [
        {
          type: "text",
          text: `Error getting theme example: ${err}`,
        },
      ],
    };
  }
},

src/index.ts:517-519 (schema)
Zod schema defining the input parameter theme_name as a required string.
```
{
  theme_name: z.string().describe("Theme Name"),
},
```

src/index.ts:514-583 (registration)

Registration of the get_theme_example tool on the MCP server with name, description, schema, and inline handler function.

server.tool(
  "get_theme_example",
  "Get code for a React Native theme",
  {
    theme_name: z.string().describe("Theme Name"),
  },
  async ({ theme_name }) => {
    if (!theme_name) {
      return {
        content: [
          {
            type: "text",
            text: "Theme name not specified",
          },
        ],
      };
    }
    
    try {
      // First try exact match
      const result = getExampleContent("theme", theme_name);
      
      if (result.error) {
        // Try to find by fuzzy match
        const themesDir = path.join(CODE_EXAMPLES_DIR, "react-native", "theme");
        const closestMatch = findClosestMatch(themesDir, theme_name);
        
        if (closestMatch) {
          const fuzzyResult = getExampleContent("theme", closestMatch);
          return {
            content: [
              {
                type: "text",
                text: fuzzyResult.content?.[0] ?? fuzzyResult.error ?? "Error: No content available",
              },
            ],
          };
        } else {
          return {
            content: [
              {
                type: "text",
                text: `Theme ${theme_name} not found`,
              },
            ],
          };
        }
      }
      
      return {
        content: [
          {
            type: "text",
            text: result.content?.[0] ?? result.error ?? "Error: No content available",
          },
        ],
      };
    } catch (err) {
      console.error(`Error getting theme example ${theme_name}:`, err);
      return {
        content: [
          {
            type: "text",
            text: `Error getting theme example: ${err}`,
          },
        ],
      };
    }
  },
);

src/index.ts:65-84 (helper)

Shared helper function to retrieve code content from example files in the specified subcategory directory (e.g., 'theme'), used by get_theme_example and other example tools.

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

src/index.ts:87-109 (helper)

Shared helper function that performs fuzzy matching to find the closest filename containing the search term in a directory, used for fallback in get_theme_example.

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

BluestoneApps MCP Remote Server