A
argbe.tech - news
1min read

CopilotKit shows a direct-to-LLM pattern for agentic React UIs

A LogRocket walkthrough outlines how CopilotKit connects React state and user-invoked actions to an LLM runtime, enabling UI agents that operate inside the app instead of around it.

LogRocket’s Emmanuel John demonstrates an agentic-UI approach where CopilotKit lets an LLM read frontend state and trigger app actions inside a React interface.

  • CopilotKit is positioned as a React framework that exposes “readable state” and callable actions to a model, plus an optional prebuilt chat UI for natural-language control.
  • The example setup installs @copilotkit/react-core, @copilotkit/react-ui, and a backend runtime package (@copilotkit/runtime) to broker requests from the UI to a model provider.
  • A Next.js App Router API route is configured at /api/copilotkit using CopilotKit’s runtime endpoint helper and a Google Generative AI adapter.
  • The referenced adapter configuration targets the gemini-3-flash-preview model and expects a Google AI key provided via GOOGLE_API_KEY in .env.local.
  • The frontend wiring wraps the app in a CopilotKit provider that points runtimeUrl to the /api/copilotkit route so the UI can route intent → actions through the runtime.