MCP Server

# Claude Code
/mcp__gridcraft__create-grid
/mcp__gridcraft__quick-start
/mcp__gridcraft__theme-grid
/mcp__gridcraft__upgrade-grid

# Cursor
/gridcraft:create-grid
/gridcraft:quick-start
/gridcraft:theme-grid
/gridcraft:upgrade-grid

# VS Code / Copilot  (type in the chat panel)
mcp.gridcraft.create-grid
mcp.gridcraft.quick-start
mcp.gridcraft.theme-grid
mcp.gridcraft.upgrade-grid

# Claude Code
/mcp__gridcraft__upgrade-grid

# Cursor
/gridcraft:upgrade-grid

# VS Code / Copilot
mcp.gridcraft.upgrade-grid

# Claude Code
/mcp__gridcraft__quick-start a products table with price and stock columns

# Cursor
/gridcraft:quick-start a products table with price and stock columns

# VS Code / Copilot
mcp.gridcraft.quick-start a products table with price and stock columns

# Claude Code
/mcp__gridcraft__create-grid an invoices table with a status filter,
  multi-select, CSV export, and a dark theme

# Cursor
/gridcraft:create-grid an invoices table with a status filter,
  multi-select, CSV export, and a dark theme

# VS Code / Copilot
mcp.gridcraft.create-grid an invoices table with a status filter,
  multi-select, CSV export, and a dark theme

AI: A few questions to build your grid —
  1. What's the row entity, and which columns? (key, label, type)
  2. Static in-memory data or an HTTP endpoint?
  3. Which features: selection, grouping, filtering, expansion,
     export, live updates, …?
  4. Layout — height, scroll mode, page size, row height?
  5. Theme — a built-in ("default" / "dark") or seed colours?

You: Invoice { id, customer, amount, status, dueDate } from
     /api/invoices. Multi-select, a status filter, CSV export,
     paging at 25/page, dark theme.

AI: → calls scaffold_grid → returns invoices.ts + invoices.html

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { GridcraftComponent, GridColumn, GridConfig, GridDataSource } from '@gridcraft/angular';

interface Invoice {
  id: number; customer: string; amount: number;
  status: string; dueDate: string;
}

@Component({
  selector: 'app-invoices',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [GridcraftComponent],
  templateUrl: './invoices.html',
})
export class InvoicesComponent {
  readonly columns: GridColumn<Invoice>[] = [
    { key: 'id',       name: 'ID',       prop: 'id',       width: 80, sortable: true },
    { key: 'customer', name: 'Customer', prop: 'customer', sortable: true,
      filter: { type: 'text' } },
    { key: 'amount',   name: 'Amount',   prop: 'amount',   sortable: true },
    { key: 'status',   name: 'Status',   prop: 'status',
      filter: { type: 'select', options: [/* … */] } },
    { key: 'dueDate',  name: 'Due',      prop: 'dueDate',  sortable: true },
  ];

  readonly config: GridConfig<Invoice> = {
    scrollMode: 'paging',
    pageSize: 25,
    theme: 'dark',
    filterMode: 'row',
    rowSelection: { mode: 'multi' },
    export: { formats: ['csv'] },
  };

  readonly dataSource: GridDataSource<Invoice> = { /* HTTP fetchRows(...) */ };
}

<gridcraft
  [columns]="columns"
  [dataSource]="dataSource"
  [config]="config"
  (selectionChange)="onSelection($event)"
/>

npx @modelcontextprotocol/inspector npx gridcraft-mcp