Eldora UI MCP Server

Instructions

Implementation Reference

• src/server.ts:216-247 (registration)

  Dynamic registration of category-based tools including 'getMotion'. The tool name is constructed as `get${category}` for category 'Motion'.

  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:137-199 (handler)

  Main execution logic for the getMotion tool: fetches details for each Motion component (animated-badge, card-flip-hover, integrations, testimonal-slider), generates install instructions, fetches examples, validates with schema, and returns formatted JSON.

  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/server.ts:94-99 (helper)

  Defines the specific components included in the 'Motion' category for the getMotion tool.

  Motion: [
    "animated-badge",
    "card-flip-hover",
    "integrations",
    "testimonal-slider",
  ],

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

  Zod schema used to validate each component's output structure in the getMotion tool response.

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

• src/server.ts:52-82 (helper)

  Helper function to map example components to their corresponding UI components, used to find relevant examples for Motion components in getMotion.

  function buildExampleComponentMap(
    allExampleComponents: Array<{
      name: string;
      registryDependencies?: string[];
    }>,
  ): Map<string, string[]> {
    const exampleMap = new Map<string, string[]>();
  
    for (const example of allExampleComponents) {
      if (
        example.registryDependencies &&
        Array.isArray(example.registryDependencies)
      ) {
        for (const depUrl of example.registryDependencies) {
          if (typeof depUrl === "string" && depUrl.includes("eldoraui.site")) {
            const componentNameMatch = depUrl.match(/\/r\/([^\/]+)$/);
            if (componentNameMatch && componentNameMatch[1]) {
              const componentName = componentNameMatch[1];
              if (!exampleMap.has(componentName)) {
                exampleMap.set(componentName, []);
              }
              if (!exampleMap.get(componentName)?.includes(example.name)) {
                exampleMap.get(componentName)?.push(example.name);
              }
            }
          }
        }
      }
    }
    return exampleMap;
  }