get-component

Instructions

Implementation Reference

• src/tools/get-component.ts:14-28 (handler)

  Async handler that finds a component by ID from DS_COMPONENTS array and returns its full details as JSON. Returns an error message if the component is not found.

    async ({ id }) => {
      const found = DS_COMPONENTS.find((c) => c.id === id);
  
      if (!found) {
        return {
          content: [{ type: 'text', text: `Componente "${id}" não encontrado. Use list-components para ver os disponíveis.` }],
          isError: true,
        };
      }
  
      return {
        content: [{ type: 'text', text: JSON.stringify(found, null, 2) }],
      };
    }
  );

• src/tools/get-component.ts:8-12 (schema)

  Input schema definition: requires a string 'id' parameter describing the component ID (e.g. 'button', 'list').

  {
    description: 'Retorna detalhes completos de um componente: inputs, outputs, exemplos de uso e import.',
    inputSchema: z.object({
      id: z.string().describe('ID do componente (ex: "button", "list")'),
    }),

• src/tools/get-component.ts:5-29 (registration)

  Registration function 'registerGetComponent' that registers the 'get-component' tool on the McpServer instance.

  export function registerGetComponent(server: McpServer): void {
    server.registerTool(
      'get-component',
      {
        description: 'Retorna detalhes completos de um componente: inputs, outputs, exemplos de uso e import.',
        inputSchema: z.object({
          id: z.string().describe('ID do componente (ex: "button", "list")'),
        }),
      },
      async ({ id }) => {
        const found = DS_COMPONENTS.find((c) => c.id === id);
  
        if (!found) {
          return {
            content: [{ type: 'text', text: `Componente "${id}" não encontrado. Use list-components para ver os disponíveis.` }],
            isError: true,
          };
        }
  
        return {
          content: [{ type: 'text', text: JSON.stringify(found, null, 2) }],
        };
      }
    );
  }

• src/tools/index.ts:8-11 (registration)

  Collective registration: 'registerAllTools' calls 'registerGetComponent(server)' to register the tool.

  registerListComponents(server);
  registerGetComponent(server);
  registerSearchComponents(server);
  registerGetComponentUsage(server);

• src/data/components.ts:3-67 (helper)

  Data source (DS_COMPONENTS array) containing component definitions used as the lookup data for the get-component handler.

  export const DS_COMPONENTS: DsComponent[] = [
    {
      id: 'button',
      name: 'Button',
      description: 'Botão reutilizável com variantes de estilo, tamanho e estados (loading, disabled).',
      category: 'form',
      selector: 'bunge-button',
      inputs: [
        { name: 'label', type: 'string', required: true, description: 'Texto exibido no botão.' },
        { name: 'variant', type: "'primary' | 'secondary' | 'outline' | 'ghost'", required: false, default: "'primary'", description: 'Estilo visual do botão.' },
        { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'Tamanho do botão.' },
        { name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Desabilita interações.' },
        { name: 'loading', type: 'boolean', required: false, default: 'false', description: 'Exibe spinner e desabilita clique.' },
        { name: 'icon', type: 'string', required: false, description: 'Nome do ícone a exibir antes do label.' },
      ],
      outputs: [
        { name: 'clicked', type: 'EventEmitter<void>', required: false, description: 'Emitido ao clicar no botão.' },
      ],
      usage: `<bunge-button label="Salvar" variant="primary" (clicked)="onSave()"></bunge-button>
  
  <bunge-button label="Cancelar" variant="outline" (clicked)="onCancel()"></bunge-button>
  
  <bunge-button label="Processando..." [loading]="true"></bunge-button>`,
      importExample: `import { BungeButtonComponent } from '@bunge/ds-components';
  
  @NgModule({
    imports: [BungeButtonComponent]
  })`,
      tags: ['button', 'form', 'action', 'cta'],
    },
    {
      id: 'list',
      name: 'List',
      description: 'Componente de lista para exibir coleções de itens com suporte a seleção, ações e virtualização.',
      category: 'data-display',
      selector: 'bunge-list',
      inputs: [
        { name: 'items', type: 'any[]', required: true, description: 'Array de itens a exibir.' },
        { name: 'selectable', type: 'boolean', required: false, default: 'false', description: 'Permite seleção de itens.' },
        { name: 'multiSelect', type: 'boolean', required: false, default: 'false', description: 'Permite seleção múltipla.' },
        { name: 'emptyMessage', type: 'string', required: false, default: "'Nenhum item encontrado'", description: 'Mensagem quando a lista está vazia.' },
        { name: 'virtualScroll', type: 'boolean', required: false, default: 'false', description: 'Ativa virtualização para listas grandes.' },
        { name: 'itemTemplate', type: 'TemplateRef<any>', required: false, description: 'Template customizado para cada item.' },
      ],
      outputs: [
        { name: 'selectionChange', type: 'EventEmitter<any[]>', required: false, description: 'Emitido quando a seleção muda.' },
        { name: 'itemClick', type: 'EventEmitter<any>', required: false, description: 'Emitido ao clicar em um item.' },
      ],
      usage: `<bunge-list [items]="users" [selectable]="true" (selectionChange)="onSelect($event)">
  </bunge-list>
  
  <!-- Com template customizado -->
  <bunge-list [items]="products">
    <ng-template #itemTemplate let-item>
      <div class="product-row">{{ item.name }} - {{ item.price | currency }}</div>
    </ng-template>
  </bunge-list>`,
      importExample: `import { BungeListComponent } from '@bunge/ds-components';
  
  @NgModule({
    imports: [BungeListComponent]
  })`,
      tags: ['list', 'data', 'collection', 'selection', 'virtual-scroll'],
    },
  ];