list_ntv_components

Instructions

Implementation Reference

• src/tools/listComponents.ts:18-35 (handler)

  The execute handler function implementing the core logic of list_ntv_components: filters COMPONENTS_DB by optional category and returns total count with basic component info.

  execute: async (args: Record<string, unknown>) => {
    const category = args.category as string | undefined;
  
    let components = COMPONENTS_DB;
    if (category) {
      components = components.filter((c) => c.category === category);
    }
  
    return {
      total: components.length,
      components: components.map((c) => ({
        name: c.name,
        selector: c.selector,
        category: c.category,
        description: c.description,
      })),
    };
  },

• src/tools/listComponents.ts:8-17 (schema)

  Input schema for the tool, defining an optional 'category' parameter for filtering components.

  inputSchema: {
    type: "object",
    properties: {
      category: {
        type: "string",
        description:
          "Filter by category: ui, form, navigation, data, layout, utility",
      },
    },
  },

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

  Registration of the listComponentsTool (list_ntv_components) in the central componentTools array exported for server use.

  export const componentTools: MCPTool[] = [
    generateComponentTool,
    getComponentDocTool,
    listComponentsTool,
    generateComponentUsageTool,
    getComponentPropsToolDefinition,
    generateTemplateCodeTool,
    getComponentExamplesTool,
    getComponentUsagePatternTool,
  ];

• src/index.ts:27-35 (registration)

  Server registration handler for listing all tools, including list_ntv_components via componentTools.

  server.setRequestHandler(ListToolsRequestSchema, async () => {
    return {
      tools: componentTools.map((tool) => ({
        name: tool.name,
        description: tool.description,
        inputSchema: tool.inputSchema,
      })),
    };
  });

• src/data/components.ts:47-671 (helper)

  The COMPONENTS_DB array providing the data source for the list_ntv_components tool, containing all NTV component definitions.

  export const COMPONENTS_DB: Component[] = [
    {
      name: "Button",
      selector: "ntv-button",
      category: "ui",
      description: "Versatile button component with multiple variants and states",
      configInterface: "ButtonConfig",
      props: [
        {
          name: "variant",
          type: "ButtonVariant",
          default: "primary",
          description:
            "Visual style variant (primary, secondary, success, warning, danger, outline, accent, description, info)",
        },
        {
          name: "size",
          type: "ButtonSize",
          default: "md",
          description: "Button size (sm, md, lg, xl)",
        },
        {
          name: "color",
          type: "ButtonColor",
          default: "blue",
          description:
            "Color scheme (blue, green, red, yellow, purple, gray, indigo, pink, custom)",
        },
        {
          name: "customColor",
          type: "string",
          description: "Hex color when color is set to 'custom'",
        },
        {
          name: "disabled",
          type: "boolean",
          default: "false",
          description: "Disable the button",
        },
        {
          name: "loading",
          type: "boolean",
          default: "false",
          description: "Show loading state",
        },
        {
          name: "fullWidth",
          type: "boolean",
          default: "false",
          description: "Make button take full width",
        },
        {
          name: "rounded",
          type: "ButtonRounded",
          default: "md",
          description: "Border radius (none, sm, md, lg, xl, full)",
        },
        {
          name: "shadow",
          type: "boolean",
          default: "true",
          description: "Apply shadow effect",
        },
        {
          name: "config",
          type: "ButtonConfig",
          description: "Configuration object combining all properties",
        },
      ],
      events: [
        {
          name: "buttonClick",
          type: "Event",
          description: "Emitted when button is clicked (not disabled or loading)",
        },
      ],
      examples: [
        {
          title: "Basic Button",
          description: "Simple primary button",
          template: `<ntv-button>Click me</ntv-button>`,
        },
        {
          title: "Button with Config",
          description: "Using config pattern for cleaner code",
          template: `<ntv-button [config]="{ variant: 'primary', size: 'lg', color: 'blue' }">
    Submit
  </ntv-button>`,
        },
        {
          title: "Loading State",
          description: "Button showing loading indicator",
          template: `<ntv-button [config]="{ loading: true, disabled: true }">
    Processing...
  </ntv-button>`,
        },
        {
          title: "Custom Color",
          description: "Button with custom hex color",
          template: `<ntv-button [config]="{ color: 'custom', customColor: '#ff6b35' }">
    Custom
  </ntv-button>`,
        },
      ],
      bestPractices: [
        "Use config pattern for multiple properties to reduce template verbosity",
        "Set loading and disabled together for loading states",
        "Use variant to convey semantic meaning (danger for destructive actions)",
        "Provide clear, action-oriented button text",
      ],
    },
    {
      name: "Input",
      selector: "ntv-input",
      category: "form",
      description: "Form input component with validation support",
      props: [
        {
          name: "type",
          type: "string",
          default: "text",
          description: "Input type (text, email, password, number, etc.)",
        },
        {
          name: "placeholder",
          type: "string",
          description: "Placeholder text",
        },
        {
          name: "disabled",
          type: "boolean",
          default: "false",
          description: "Disable the input",
        },
        {
          name: "required",
          type: "boolean",
          default: "false",
          description: "Mark as required",
        },
        {
          name: "error",
          type: "string",
          description: "Error message to display",
        },
      ],
      events: [
        {
          name: "change",
          type: "Event",
          description: "Emitted when input value changes",
        },
        {
          name: "blur",
          type: "Event",
          description: "Emitted when input loses focus",
        },
      ],
      slots: [
        {
          name: "prefix",
          description: "Content to display before the input",
        },
        {
          name: "suffix",
          description: "Content to display after the input",
        },
      ],
    },
    {
      name: "Card",
      selector: "ntv-card",
      category: "layout",
      description: "Flexible container component with comprehensive styling options",
      configInterface: "CardConfig",
      props: [
        {
          name: "variant",
          type: "CardVariant",
          default: "default",
          description: "Visual variant (default, elevated, outlined, filled)",
        },
        {
          name: "rounded",
          type: "CardRounded",
          default: "md",
          description: "Border radius (none, sm, md, lg, xl, full)",
        },
        {
          name: "shadow",
          type: "CardShadow",
          default: "sm",
          description: "Shadow intensity (none, sm, md, lg, xl)",
        },
        {
          name: "backgroundColor",
          type: "string",
          description: "Custom background color (hex or CSS color)",
        },
        {
          name: "borderColor",
          type: "string",
          description: "Custom border color (hex or CSS color)",
        },
        {
          name: "gradient",
          type: "string",
          description: "CSS gradient background",
        },
        {
          name: "hoverEffect",
          type: "boolean",
          default: "false",
          description: "Whether to apply hover effects",
        },
        {
          name: "clickable",
          type: "boolean",
          default: "false",
          description: "Whether the card is clickable",
        },
        {
          name: "fullWidth",
          type: "boolean",
          default: "false",
          description: "Whether card should take full width",
        },
        {
          name: "adaptToTheme",
          type: "boolean",
          default: "true",
          description: "Whether colors should adapt to dark/light mode",
        },
        {
          name: "config",
          type: "CardConfig",
          description: "Configuration object combining all properties",
        },
      ],
      events: [
        {
          name: "cardClick",
          type: "Event",
          description: "Emitted when card is clicked (only when clickable is true)",
        },
      ],
      slots: [
        {
          name: "default",
          description: "Card content",
        },
      ],
    },
    {
      name: "Autocomplete",
      selector: "ntv-autocomplete",
      category: "form",
      description: "Input with autocomplete suggestions",
      props: [
        {
          name: "options",
          type: "string[]",
          description: "Array of suggestion options",
        },
        {
          name: "placeholder",
          type: "string",
          description: "Placeholder text",
        },
        {
          name: "disabled",
          type: "boolean",
          default: "false",
          description: "Disable the autocomplete",
        },
        {
          name: "minChars",
          type: "number",
          default: "1",
          description: "Minimum characters to trigger suggestions",
        },
      ],
      events: [
        {
          name: "selected",
          type: "string",
          description: "Emitted when option is selected",
        },
      ],
    },
    {
      name: "Accordion",
      selector: "ntv-accordion",
      category: "navigation",
      description: "Collapsible content panels",
      props: [
        {
          name: "items",
          type: "AccordionItem[]",
          description: "Array of accordion items",
        },
        {
          name: "allowMultiple",
          type: "boolean",
          default: "false",
          description: "Allow multiple panels open",
        },
        {
          name: "expanded",
          type: "number[]",
          description: "Indices of expanded panels",
        },
      ],
      slots: [
        {
          name: "header",
          description: "Header content for each item",
        },
        {
          name: "content",
          description: "Content for each panel",
        },
      ],
    },
    {
      name: "Stepper",
      selector: "ntv-stepper",
      category: "navigation",
      description: "Multi-step workflow component",
      configInterface: "StepperConfig",
      props: [
        {
          name: "steps",
          type: "Step[]",
          description: "Array of step definitions",
        },
        {
          name: "activeStep",
          type: "number",
          default: "0",
          description: "Index of active step",
        },
        {
          name: "linear",
          type: "boolean",
          default: "false",
          description: "Only allow forward progression",
        },
      ],
      events: [
        {
          name: "stepChanged",
          type: "number",
          description: "Emitted when step changes",
        },
      ],
    },
    {
      name: "Popover",
      selector: "ntv-popover",
      category: "ui",
      description: "Contextual tooltip/popover component",
      props: [
        {
          name: "position",
          type: "string",
          default: "top",
          description: "Position (top, bottom, left, right)",
        },
        {
          name: "trigger",
          type: "string",
          default: "hover",
          description: "Trigger type (hover, click)",
        },
        {
          name: "content",
          type: "string",
          description: "Popover content",
        },
      ],
      slots: [
        {
          name: "trigger",
          description: "Element that triggers the popover",
        },
        {
          name: "default",
          description: "Popover content",
        },
      ],
    },
    {
      name: "ThumbnailGallery",
      selector: "ntv-thumbnail-gallery",
      category: "data",
      description: "Image gallery with thumbnails",
      props: [
        {
          name: "images",
          type: "string[]",
          description: "Array of image URLs",
        },
        {
          name: "columns",
          type: "number",
          default: "3",
          description: "Number of columns",
        },
        {
          name: "gap",
          type: "string",
          default: "1rem",
          description: "Gap between items",
        },
      ],
      slots: [
        {
          name: "default",
          description: "Gallery items",
        },
      ],
    },
    {
      name: "Modal",
      selector: "ntv-modal",
      category: "ui",
      description: "Dialog overlay component",
      props: [
        {
          name: "open",
          type: "boolean",
          default: "false",
          description: "Open/close state",
        },
        {
          name: "title",
          type: "string",
          description: "Modal title",
        },
        {
          name: "closeOnBackdrop",
          type: "boolean",
          default: "true",
          description: "Close when clicking backdrop",
        },
      ],
      events: [
        {
          name: "close",
          type: "void",
          description: "Emitted when modal should close",
        },
      ],
      slots: [
        {
          name: "header",
          description: "Modal header",
        },
        {
          name: "default",
          description: "Modal content",
        },
        {
          name: "footer",
          description: "Modal footer",
        },
      ],
    },
    {
      name: "Template",
      selector: "ntv-template",
      category: "layout",
      description: "Page template container with layout structure",
      props: [
        {
          name: "layout",
          type: "string",
          default: "default",
          description: "Template layout type",
        },
      ],
      slots: [
        {
          name: "header",
          description: "Header area",
        },
        {
          name: "sidebar",
          description: "Sidebar area",
        },
        {
          name: "default",
          description: "Main content area",
        },
        {
          name: "footer",
          description: "Footer area",
        },
      ],
    },
    {
      name: "Table",
      selector: "ntv-table",
      category: "data",
      description: "Feature-rich data table component with sorting and filtering",
      props: [
        {
          name: "data",
          type: "any[]",
          description: "Array of data to display in table",
        },
        {
          name: "columns",
          type: "TableColumn[]",
          description: "Column definitions",
        },
        {
          name: "sortable",
          type: "boolean",
          default: "true",
          description: "Enable sorting",
        },
        {
          name: "filterable",
          type: "boolean",
          default: "true",
          description: "Enable filtering",
        },
        {
          name: "pageable",
          type: "boolean",
          default: "false",
          description: "Enable pagination",
        },
      ],
      events: [
        {
          name: "rowClick",
          type: "any",
          description: "Emitted when a row is clicked",
        },
        {
          name: "sort",
          type: "SortEvent",
          description: "Emitted when sorting changes",
        },
      ],
    },
    {
      name: "Offcanvas",
      selector: "ntv-offcanvas",
      category: "utility",
      description: "Slide-out panel component for navigation and content",
      props: [
        {
          name: "open",
          type: "boolean",
          default: "false",
          description: "Open/close state",
        },
        {
          name: "position",
          type: "string",
          default: "start",
          description: "Position (start, end, top, bottom)",
        },
        {
          name: "backdrop",
          type: "boolean",
          default: "true",
          description: "Show backdrop overlay",
        },
        {
          name: "closeOnBackdrop",
          type: "boolean",
          default: "true",
          description: "Close when clicking backdrop",
        },
      ],
      events: [
        {
          name: "close",
          type: "void",
          description: "Emitted when offcanvas should close",
        },
      ],
      slots: [
        {
          name: "default",
          description: "Offcanvas content",
        },
      ],
    },
    {
      name: "ThumbnailItem",
      selector: "ntv-thumbnail-item",
      category: "data",
      description: "Individual thumbnail item for use in galleries",
      props: [
        {
          name: "image",
          type: "string",
          description: "Image URL",
        },
        {
          name: "alt",
          type: "string",
          description: "Alt text for image",
        },
        {
          name: "caption",
          type: "string",
          description: "Caption for thumbnail",
        },
      ],
      events: [
        {
          name: "click",
          type: "void",
          description: "Emitted when thumbnail is clicked",
        },
      ],
    },
  ];