search-components

Instructions

Implementation Reference

• src/tools/search-components.ts:5-38 (handler)

  The main handler function 'registerSearchComponents' that registers the 'search-components' tool. It takes a query parameter, filters DS_COMPONENTS by name/description/tags, and returns matching components as formatted JSON text.

  export function registerSearchComponents(server: McpServer): void {
    server.registerTool(
      'search-components',
      {
        description: 'Busca componentes por nome, descrição ou tags.',
        inputSchema: z.object({
          query: z.string().describe('Termo de busca para encontrar componentes'),
        }),
      },
      async ({ query }) => {
        const term = query.toLowerCase();
  
        const results = DS_COMPONENTS.filter(
          (c) =>
            c.name.toLowerCase().includes(term) ||
            c.description.toLowerCase().includes(term) ||
            c.tags.some((t) => t.toLowerCase().includes(term))
        );
  
        const summary = results.map((c) => ({
          id: c.id,
          name: c.name,
          selector: c.selector,
          description: c.description,
          category: c.category,
          tags: c.tags,
        }));
  
        return {
          content: [{ type: 'text', text: JSON.stringify(summary, null, 2) }],
        };
      }
    );
  }

• src/tools/search-components.ts:8-12 (schema)

  Input schema for the 'search-components' tool. Defines a single required 'query' string parameter for searching components by name, description, or tags.

  {
    description: 'Busca componentes por nome, descrição ou tags.',
    inputSchema: z.object({
      query: z.string().describe('Termo de busca para encontrar componentes'),
    }),

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

  Import of the search-components registration function in the tools index.

  import { registerSearchComponents } from './search-components.js';

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

  Registration call for the search-components tool within registerAllTools.

  registerSearchComponents(server);

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

  The DS_COMPONENTS data array that the search-components tool queries against. Contains component objects with id, name, description, tags, and other metadata.

  import { DsComponent } from '../models/mcp-server.model.js';
  
  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'],
    },
  ];