/copilotkit Command
Scaffold and configure CopilotKit projects for building AI copilot interfaces.
Synopsis
/copilotkit <subcommand> [options]
Subcommands
init
Initialize a new CopilotKit project.
/copilotkit init <project-name>
What it creates:
src/components/CopilotProvider.tsx- CopilotKit provider wrappersrc/components/AgentChat.tsx- Chat interface componentpages/api/copilot.ts- API route for CopilotKit runtimecopilotkit.config.json- Configuration file
Example:
/copilotkit init my-ai-assistant
add-agent
Add a CODITECT agent to the CopilotKit configuration.
/copilotkit add-agent <agent-name>
What it creates:
- Agent configuration in
copilotkit.config.json - Agent handler in
src/agents/<agent-name>.ts
Example:
/copilotkit add-agent senior-architect
/copilotkit add-agent code-reviewer
add-a2ui-renderer
Add A2UI rendering support to the CopilotKit project.
/copilotkit add-a2ui-renderer
What it creates:
src/components/A2UIRenderer.tsx- A2UI rendering component- A2UI event handler in AG-UI configuration
add-multi-agent
Configure multi-agent support with agent selector.
/copilotkit add-multi-agent
What it creates:
src/components/AgentSelector.tsx- Agent selection dropdown- Multi-agent configuration in
copilotkit.config.json
configure-runtime
Configure CopilotKit runtime for CODITECT Cloud.
/copilotkit configure-runtime [--cloud|--self-hosted]
Options:
--cloud- Configure for Copilot Cloud (hosted)--self-hosted- Configure for self-hosted runtime
validate
Validate CopilotKit configuration.
/copilotkit validate
Checks:
- Configuration file syntax
- Agent definitions
- Runtime connectivity
- A2UI renderer setup
Full Examples
Create Complete AI Assistant
# Initialize project
/copilotkit init company-assistant
# Add CODITECT agents
/copilotkit add-agent senior-architect
/copilotkit add-agent code-reviewer
/copilotkit add-agent documentation-writer
# Enable A2UI for rich UIs
/copilotkit add-a2ui-renderer
# Configure for production
/copilotkit configure-runtime --cloud
# Validate setup
/copilotkit validate
Add to Existing Next.js Project
# Add CopilotKit to existing project
cd my-nextjs-app
/copilotkit init . --merge
# Add agent support
/copilotkit add-agent code-assistant
Configuration File
File: copilotkit.config.json
{
"copilotkit": {
"version": "1.0.0",
"runtime": {
"type": "cloud",
"url": "https://api.coditect.ai/copilot"
},
"agents": [
{
"name": "senior-architect",
"description": "System design and architecture",
"coditect_agent": "senior-architect"
}
],
"features": {
"a2ui_rendering": true,
"multi_agent": false,
"ag_ui_protocol": true
},
"ui": {
"component": "sidebar",
"position": "right",
"defaultOpen": true
}
}
}
Output Example
CopilotKit Project Initialized
Project: my-ai-assistant
Location: ./my-ai-assistant
Created files:
├── src/
│ ├── components/
│ │ ├── CopilotProvider.tsx
│ │ └── AgentChat.tsx
│ └── agents/
│ └── index.ts
├── pages/api/
│ └── copilot.ts
└── copilotkit.config.json
Next steps:
1. cd my-ai-assistant
2. npm install
3. Add your CODITECT Cloud API key to .env
4. npm run dev
5. Open http://localhost:3000
Documentation: https://docs.copilotkit.ai/
Environment Variables
# Required for CODITECT Cloud
COPILOTKIT_API_KEY=your-api-key
CODITECT_CLOUD_URL=https://api.coditect.ai
CODITECT_AUTH_TOKEN=your-auth-token
# Optional
COPILOTKIT_DEBUG=true
Related Components
- Agent:
agents/copilotkit-frontend-builder.md - Skill:
skills/copilotkit-runtime-integration/SKILL.md - Skill:
skills/ag-ui-protocol/SKILL.md - ADR:
internal/architecture/adrs/ADR-071-copilotkit-agentic-frontend-integration.md
Troubleshooting
| Issue | Solution |
|---|---|
init fails | Ensure directory is empty or use --merge |
| Runtime connection fails | Check COPILOTKIT_API_KEY in .env |
| Agent not found | Verify agent name matches CODITECT agents |
| A2UI not rendering | Run /copilotkit add-a2ui-renderer |
Version: 1.0.0 Created: 2026-01-13 Repository: CopilotKit/CopilotKit ADR: ADR-071