Building Interactive Financial Copilots: Generative UI, State Synchronization, and LLM Integration

If a user says "Summarize this table," the LLM needs to know what table they are looking at and what data is inside it. Passing massive data tables via standard React Context or generic props during an active LLM token stream causes the entire component tree to re-render 60 times a second (once per token), destroying performance.

import { useCopilotReadable } from "@copilotkit/react-core";
import { useStore } from "@/store/zustand";

export function PortfolioGrid() {
  // 1. Fetch data from atomic store (avoids prop drilling)
  const activeHoldings = useStore(state => state.filteredHoldings);
  const currentSort = useStore(state => state.sortConfiguration);

  // 2. Automatically sync this specific data to the LLM
  // The LLM now literally knows what is on the screen.
  useCopilotReadable({
    description: "The currently filtered list of financial assets...",
    value: {
      data: activeHoldings,
      sortedBy: currentSort
    },
  });

  return (
    <div className="ag-theme-alpine">
      <AgGridReact rowData={activeHoldings} />
    </div>
  );
}

Instead of just generating chat text, the LLM acts as an autonomous agent. We define strict JSON Schemas representing our React functions. The LLM reasons about the user's intent and executes Tool Calls that trigger those frontend hooks, updating the DOM instantly.

import { useCopilotAction } from "@copilotkit/react-core";

function DashboardControls() {
  const { setDateRange, fetchMetrics } = useDashboardStore();

  useCopilotAction({
    name: "updateDashboardDateRange",
    description: "Changes the global date range and fetches new data.",
    parameters: [
      { name: "startDate", type: "string", required: true },
      { name: "endDate", type: "string", required: true }
    ],
    handler: async ({ startDate, endDate }) => {
      setDateRange(startDate, endDate);
      await fetchMetrics(startDate, endDate);
      return `Successfully updated UI`;
    }
  });

  return <DateSlider />;
}

Financial ledgers and logs exceed the 128k/200k token limits of modern models rapidly. Dumping a million rows of CSV into a prompt is slow, expensive, and leads to hallucinations.

• 1. Text-to-SQL (For Structured Data)

  Instead of giving the LLM the data, give it the Database Schema. The LLM generates a SQL query based on the user's question, your backend executes it safely, and returns just the aggregate results.

• 2. Hybrid RAG (For Unstructured Data)

  For 10-K filings or PDF research reports, use Retrieval-Augmented Generation. Combine Dense Vector Search for semantic meaning with Sparse Keyword Search for exact ticker matches.

• 3. Hierarchical Chat Memory

  Implement patterns like MemGPT/Letta. Track "working memory" and summarize older chat history periodically into "semantic memory" to prevent context overflow across multi-week sessions.