mcp__getComponentLink

Instructions

Implementation Reference

• src/tools/get-component-link.ts:26-55 (handler)

  The execute method of GetComponentLinkTool that performs the HTTP GET request to fetch component documentation from the given URL and returns the content.

    async execute({ url }: z.infer<typeof this.schema>) {
      try {
        const data = await this.httpUtil.request({
          method: "GET",
          url,
        });
  
        return {
          content: [
            {
              type: "text" as const,
              text: `${data}`,
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text" as const,
              text: JSON.stringify({
                error: "Failed to get component documentation",
                message: error instanceof Error ? error.message : String(error),
              }),
            },
          ],
        };
      }
    }
  }

• src/tools/get-component-link.ts:18-24 (schema)

  Zod schema defining the input parameter: a 'url' string describing the component documentation link.

  schema = z.object({
    url: z
      .string()
      .describe(
        "Component documentation link URL, from the componentDocumentLinks property, please ensure the URL is valid"
      ),
  });

• src/index.ts:42-42 (registration)

  Registration of GetComponentLinkTool in the main entry point, which calls register() on the MCP server.

  new GetComponentLinkTool(httpUtil).register(server);

• src/tools/base-tool.ts:9-15 (registration)

  The register method in BaseTool calls server.tool() with the tool's name, description, schema, and execute handler.

  register(server: McpServer) {
    server.tool(
      this.name,
      this.description,
      this.schema.shape,
      this.execute.bind(this)
    );

• src/http-util.ts:87-113 (helper)

  The getDsl method in HttpUtil that returns componentDocumentLinks and includes a rule instructing the LLM to use mcp__getComponentLink to fetch component documentation.

  public async getDsl(fileId: string, layerId: string): Promise<DslResponse> {
    try {
      const params: any = { fileId, layerId };
  
      const response = await this.httpClient.get("/mcp/dsl", { params });
      const result = {
        dsl: response.data,
        componentDocumentLinks: this.handleDslComponentDocumentLinks(
          response.data
        ),
        rules: [
          "token filed must be generated as a variable (colors, shadows, fonts, etc.) and the token field must be displayed in the comment",
          `
            componentDocumentLinks is a list of frontend component documentation links used in the DSL layer, designed to help you understand how to use the components.
            When it exists and is not empty, you need to use mcp__getComponentLink in a for loop to get the URL content of all components in the list, understand how to use the components, and generate code using the components.
            For example: 
              \`\`\`js  
                const componentDocumentLinks = [
                  'https://example.com/ant/button.mdx',
                  'https://example.com/ant/button.mdx'
                ]
                for (const url of componentDocumentLinks) {
                  const componentLink = await mcp__getComponentLink(url);
                  console.log(componentLink);
                }
              \`\`\`
          `,