copilotkit_hackathon
View on GitHub →🌟 Architectural Vision & System Design
The system is designed around the paradigm of Agentic UI/UX, where the user interface is not merely a static display of data, but a dynamic, living canvas that an AI agent can read from, reason about, and mutate in real-time.
Instead of treating the AI as an isolated chat widget, this architecture integrates the LLM directly into the application’s state loop. The application acts as a state machine where the AI agent is granted scoped, permissioned access to execute state transitions on behalf of the user.
┌─────────────────────────────────────────────────────────────────────────┐
│ Client Browser (UI) │
│ │
│ ┌──────────────────┐ State Sync (useCopilotReadable) ┌──────┐ │
│ │ React State ├────────────────────────────────────────►│ │ │
│ └────────▲─────────┘ │ │ │
│ │ │ │ │
│ │ State Mutation (useCopilotAction) │Copilot│ │
│ ┌────────┴─────────┐ │ Kit │ │
│ │ Action Handlers │◄────────────────────────────────────────┤Context│ │
│ └──────────────────┘ │ │ │
└───────────────────────────────────────────────────────────────┤ ├──┘
│ │
│ │
└──▲───┘
│
Secure SSE Stream