React - Incorrect generation of grid column `bodyTemplate` when using the MCP server

[viktorkombov]

Description:
When generating a React application from a prompt via the MCP server, grid components with a column bodyTemplate are generated incorrectly.

The generated templates access cell values using ctx.dataContext.rowData[fieldName], which does not follow the Ignite UI for React Grid (IgrGrid) API.

According to the official IgrGrid documentation, cell values in a bodyTemplate should be accessed via ctx.cell.value.

This mismatch leads to incorrect rendering, broken UI behavior, and runtime errors in the browser console.

Example prompt:
Build a modern CRM app with grids, lists, charts, forms, hierarchical grids, and combo components. Use the igniteui-local MCP server to create the components.

Generated (incorrect) template example:

const stageTemplate = React.useCallback((ctx: any) => { 
  const val: string = ctx.dataContext.rowData.stage;

  const colorMap: Record<string, { bg: string; color: string }> = {
    Lead: { bg: '#e3f2fd', color: '#1565c0' },
    Qualification: { bg: '#fff8e1', color: '#f57f17' },
    Proposal: { bg: '#f3e5f5', color: '#7b1fa2' },
    Negotiation: { bg: '#fff3e0', color: '#e65100' },
    'Closed Won': { bg: '#e8f5e9', color: '#2e7d32' },
    'Closed Lost': { bg: '#ffebee', color: '#c62828' },
  };

  const style = colorMap[val] ?? { bg: '#eceff1', color: '#546e7a' };

  return (
    <span style={{
      background: style.bg,
      color: style.color,
      padding: '2px 10px',
      borderRadius: 12,
      fontSize: 12,
      fontWeight: 600,
    }}>
      {val}
    </span>
  );
}, []);

Expected usage (according to IgrGrid documentation):

function normalViewTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div className="user-details">{ ctx.cell.value }</div>
            <UserDetailsComponent></UserDetailsComponent>
        </>
    );
}

---

Screenshots

[Marina-L-Stoyanova]

@viktorkombov I have tested with your prompt and specifically asked to use grid column bodyTemplate and the generation was correct. I have tested with Claude Sonnet 4.6 - Maximum reasoning depth. Can you share what model did you use and a screenshot of the reasoning - I want to see if it calls the right tools and extracts the data from our docs. Thank you.

[viktorkombov]

@Marina-L-Stoyanova

I am using Claude Sonnet 4.6 as well. I tried to reproduce this behavior again, but I wasn’t able to.

Here is the reasoning trace:

reasoning.txt