Understand the Langrepl AG-UI Demo structure
mainThe demo project is organized into the following key areas:
Application Logic (src/app/)
api/copilotkit/route.ts: Acts as a proxy between the CopilotKit runtime and theLangGraphHttpAgent.layout.tsx: Contains theCopilotKitprovider and dark theme configuration.page.tsx: Implements a two-panel layout consisting of a chat interface and a state inspector.globals.css: Contains Tailwind CSS andCopilotChatoverrides.
UI Components (src/components/)
approval-handler.tsx: Handles interrupt dialogs for tool approval.state-inspector.tsx: A JSON viewer for inspecting the agent's state.step-progress.tsx: A visual indicator for processing steps.