CopilotKit

# MISSION: Scaffold "CopilotKit" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **CopilotKit**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: CopilotKit
- **What It Does**: CopilotKit is an open-source SDK for building agent-native applications: shared frontend packages for React, Vue, Angular and React Native talk to a common AG-UI-protocol backend runtime, with adapters connecting the same agent to Slack, Microsoft Teams, Discord, Telegram and WhatsApp.
- **Domain & Category**: AI Copilot & Assistant SDK
- **Production Scale**: 2-5 people
- **Development Mode**: AI-AGENT
- **Architectural Rationale**: A shared AG-UI protocol plus a PlatformAdapter-based channel architecture let one agent implementation power web, mobile and chat-platform surfaces from a single Nx/pnpm monorepo instead of building a separate integration per surface.
- **Live Website Reference**: https://copilotkit.ai
- **Source Repository**: https://github.com/CopilotKit/CopilotKit
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: TypeScript, React, Vue, Angular, React Native, Python, AG-UI, Model Context Protocol, LangGraph
- **Primary Language(s)**: TypeScript, Python, MDX
- **License of the reference repo**: MIT
- **Frontend**: React — Primary framework surface; @copilotkit/react-core and react-ui provide the copilot chat, generative UI and headless hooks.; Vue — Vue package built via the same Nx pipeline (build:vue target) for the Vue surface.; Angular — @copilotkit/angular wraps the same AG-UI client for Angular 22, built with ng-packagr.; React Native — @copilotkit/react-native ships polyfills (streams, encoding, crypto, DOM) so the same headless core runs on mobile.; Tailwind CSS — Styles the chat UI, web components and web inspector; each package runs its own build:css step against tailwindcss.; Zod — Schema validation and JSON-schema generation (zod-to-json-schema) in the core client.
- **Backend & APIs**: Model Context Protocol — packages/mcp-apps-renderer implements the app<->host protocol (ext-apps AppBridge) and sandbox proxy shared by the React, Vue and Angular frontends.; Python — sdk-python ships a Poetry-packaged SDK (copilotkit) integrating with LangGraph, LangChain and CrewAI for Python-based agents.; Slack — channels-slack adapts the shared channel engine to Slack via Block Kit and Socket Mode.; Microsoft Teams — channels-teams adapts the channel engine to Teams using Adaptive Cards and Microsoft's M365 Agents SDK.; Discord — channels-discord implements the PlatformAdapter for Discord bots.
- **Data & persistence**: SQLite — packages/sqlite-runner provides a SQLite-backed state-store implementation used for conformance testing across channel adapters.
- **Infrastructure & deploy**: Nx — Orchestrates builds, tests, type-checks and caching across the whole workspace (nx run-many targets in root package.json).; pnpm — Workspace package manager; pnpm-workspace.yaml enumerates every package/example glob, including exclusions for demos that need canary protocol versions.; GitHub Actions — Runs canary/stable release pipelines, quality gates and a showcase test/deploy suite (canary.yml, publish-release.yml, static_quality.yml).
- **Tooling, testing & ops**: AG-UI — CopilotKit's agent-to-UI streaming protocol (@ag-ui/client); one pinned version across core, angular, agentcore-runner and demo-agents.; LangGraph — intelligence-langgraph (TS) and intelligence-langgraph-python deliver "learned skills" to LangGraph agents.; Mastra — intelligence-mastra delivers the same learned-skill mechanism to Mastra agents.; Google ADK — copilotkit-intelligence-adk (intelligence-adk-python) delivers learned skills to native Google ADK agents, depending on google-adk.; AWS Bedrock — @copilotkit/agentcore-runner is an AWS Bedrock AgentCore-compatible agent runner.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/CopilotKit/CopilotKit @ 011538a)
1. **One agent transport (AG-UI) instead of a bespoke protocol per surface**: packages/core, packages/angular, packages/agentcore-runner and packages/demo-agents all depend on the same @ag-ui/client version, so React, Vue, Angular, React Native and the AWS Bedrock runner exchange agent events in one wire format rather than each surface inventing its own.
2. **Five backend runtimes implement the same protocol in different languages**: The workspace contains packages/runtime (Node/TypeScript), runtime-python, runtime-go, runtime-ruby and runtime-dotnet; root package.json has a dedicated build:native-runtimes Nx target for them, so teams can self-host the Copilot Runtime in whichever backend language their app already uses.
3. **Chat platforms are swappable PlatformAdapters behind one engine, not separate frameworks**: packages/channels-core exposes createChannel, Thread, PlatformAdapter and ActionStore; packages/channels-slack, channels-teams, channels-discord, channels-telegram and channels-whatsapp each implement only the platform-specific piece (Slack Block Kit/Socket Mode, Teams Adaptive Cards/M365 Agents SDK, Telegram via grammy, WhatsApp Cloud API).
4. **Agent-framework integrations are per-framework "intelligence" adapters over a shared core**: packages/intelligence-langgraph, intelligence-mastra, intelligence-langgraph-python, intelligence-adk-python and intelligence-agent-framework-dotnet each build on packages/intelligence-delivery-core (or intelligence-delivery-python-core) rather than the runtime hard-coding support for every agent framework.
5. **MCP Apps get one framework-agnostic renderer instead of three UI implementations**: packages/mcp-apps-renderer's own description states it is "the app<->host protocol (ext-apps AppBridge), sandbox proxy, and shared renderer consumed by the React, Vue, and Angular frontends" — the MCP UI logic lives once, not per framework package.
6. **The showcase demo needing unreleased protocol versions sits outside the pnpm workspace**: pnpm-workspace.yaml documents that examples/showcases/reskinnable-demo ships its own lockfile and installs canary @ag-ui/*/@copilotkit/* builds from npm because the released @ag-ui/client 0.0.57 "rejects SUBAGENT_* events in the HTTP transport"; keeping it out of the workspace avoids forcing that canary onto every other package, at the documented cost that the demo is currently unbuilt and untype-checked in CI.
7. **Linting and formatting run on oxlint/oxfmt rather than ESLint/Prettier**: Root package.json defines "lint": "oxlint ." and "format": "oxfmt --write .", configured via .oxlintrc.json and .oxfmtrc.json, replacing the more common ESLint/Prettier pairing for a large TypeScript monorepo.
8. **Build and release versioning run on Nx + Changesets across pnpm workspaces**: nx.json defines cached build/test/check-types targets with dependsOn: ["^build"] graph ordering, pnpm-workspace.yaml lists packages/*, tools/*, and multiple examples/* globs, and a .changeset directory holds pending release notes consumed by the publish-release.yml workflow.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Expo Router v4 with file-based navigation. Apply NativeWind for cross-platform styling and wrap screens with SafeAreaProvider for native iOS and Android gesture and notch support.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (SQLite): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.