handleAIResponse

Updated on May 15, 2026

Processes an AI response and returns the updated grid state. This is a pure function that takes the current state and AI response, and returns a new state object with all the changes applied.

tsx

const App = () => {
  const [gridState, setGridState] = useState<GridAIState>({
    sort: [],
    filter: undefined,
    group: [],
    columnsState: initialColumns,
    skip: 0,
    take: 20
  });
  const gridRef = useRef<GridHandle>(null);

  const handleAIRequest = async (prompt: string) => {
    const data = await fetch('/api/ai/grid', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt, columns: gridState.columnsState })
    }).then((res) => res.json());
    const result = handleAIResponse({ data }, gridState, gridRef.current);

    // Update state with AI changes
    setGridState(result.state);

    // Handle PDF export if requested
    if (result.shouldExportPdf && gridRef.current) {
      gridRef.current.exportAsPdf();
    }

    // Show messages to user
    console.log(result.messages);
  };

  return (
    <Grid
      ref={gridRef}
      data={data}
      {...gridState}
      onSortChange={(e) => setGridState(prev => ({ ...prev, sort: e.sort }))}
      onFilterChange={(e) => setGridState(prev => ({ ...prev, filter: e.filter }))}
      onGroupChange={(e) => setGridState(prev => ({ ...prev, group: e.group }))}
      onColumnsStateChange={(e) => setGridState(prev => ({ ...prev, columnsState: e.columnsState }))}
      onPageChange={(e) => setGridState(prev => ({ ...prev, skip: e.page.skip, take: e.page.take }))}
    />
  );
};

Parameters

response

GridAIResponse<any>

The response from the AI service containing commands

currentState

GridAIState

The current grid state

gridRef

"null" | Pick<GridHandle>

Reference to grid methods (getTotal, getLeafDataItems, exportAsPdf)

Returns

GridAIResponseResult

Object containing the new state, messages, and export flag