Eldora UI MCP Server

Instructions

Implementation Reference

• src/server.ts:211-249 (registration)

  Dynamically registers the 'getEffects' tool (and other category tools) using `get${category}` naming convention for the 'Effects' category.

    for (const [category, categoryComponents] of Object.entries(
      componentCategories,
    )) {
      const componentNamesString = categoryComponents.join(", ");
  
      server.tool(
        `get${category}`,
        `Provides implementation details for ${componentNamesString} components.`,
        {},
        async () => {
          try {
            const categoryResults = await fetchComponentsByCategory(
              categoryComponents,
              components,
              exampleNamesByComponent,
            );
  
            return {
              content: [
                {
                  type: "text",
                  text: JSON.stringify(categoryResults, null, 2),
                },
              ],
            };
          } catch (error) {
            let errorMessage = `Error processing ${category} components`;
            if (error instanceof Error) {
              errorMessage += `: ${error.message}`;
            }
            return {
              content: [{ type: "text", text: errorMessage }],
              isError: true,
            };
          }
        },
      );
    }
  }

• src/server.ts:220-246 (handler)

  Handler function for the 'getEffects' tool that fetches and formats components for the Effects category.

  async () => {
    try {
      const categoryResults = await fetchComponentsByCategory(
        categoryComponents,
        components,
        exampleNamesByComponent,
      );
  
      return {
        content: [
          {
            type: "text",
            text: JSON.stringify(categoryResults, null, 2),
          },
        ],
      };
    } catch (error) {
      let errorMessage = `Error processing ${category} components`;
      if (error instanceof Error) {
        errorMessage += `: ${error.message}`;
      }
      return {
        content: [{ type: "text", text: errorMessage }],
        isError: true,
      };
    }
  },

• src/server.ts:137-199 (helper)

  Core helper function that fetches detailed component information, examples, and formats data for categories like Effects.

  async function fetchComponentsByCategory(
    categoryComponents: string[],
    allComponents: any[],
    exampleNamesByComponent: Map<string, string[]>,
  ) {
    const componentResults = [];
  
    for (const componentName of categoryComponents) {
      const component = allComponents.find((c) => c.name === componentName);
      if (!component) continue;
  
      try {
        const componentDetails = await fetchComponentDetails(componentName);
        const componentContent = componentDetails.files[0]?.content;
  
        const relevantExampleNames =
          exampleNamesByComponent.get(componentName) || [];
  
        // Generate installation instructions
        const installInstructions = `Install the component using the same process as \
        shadcn/ui. If you run into linter or dependency errors, make sure to install the \
        component using these instructions. For example, with npm/npx: npx shadcn@latest add \
        "https://eldoraui.site/r/${componentName}.json" (Rules: make sure the URL is wrapped in \
        double quotes and use shadcn not shadcn-ui, or the command will fail). After installation, \ 
        you can import the component like this: import { ${formatComponentName(component.name)} } from \
        "@/components/ui/${componentName}";`;
        
        const disclaimerText = `The code below is for context only. It helps you understand \
        the component's props, types, and behavior. To actually install and use the \
        component, refer to the install instructions above. After installing, the component \
        will be available for import via: import { ${formatComponentName(component.name)} } \
        from "@/components/ui/${componentName}";`;
  
        const exampleDetailsList = await Promise.all(
          relevantExampleNames.map((name) => fetchExampleDetails(name)),
        );
  
        const formattedExamples = exampleDetailsList
          .filter((details) => details !== null)
          .map((details) => ({
            name: details.name,
            type: details.type,
            description: details.description,
            content: details.files[0]?.content,
          }));
  
        const validatedComponent = IndividualComponentSchema.parse({
          name: component.name,
          type: component.type,
          description: component.description,
          install: installInstructions,
          content: componentContent && disclaimerText + componentContent,
          examples: formattedExamples,
        });
  
        componentResults.push(validatedComponent);
      } catch (error) {
        console.error(`Error processing component ${componentName}:`, error);
      }
    }
  
    return componentResults;
  }

• src/utils/schemas.ts:19-23 (schema)

  Zod schema used to validate and parse individual component data in the getEffects response.

  export const IndividualComponentSchema = ComponentSchema.extend({
    install: z.string(),
    content: z.string(),
    examples: z.array(ExampleSchema),
  });

• src/server.ts:116-122 (helper)

  List of components specific to the Effects category, used to populate the getEffects tool.

  Effects: [
    "animated-frameworks",
    "map",
    "svg-ripple-effect",
    "clerk-otp",
    "cobe-globe",
  ],