Skip to main content

/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 wrapper
  • src/components/AgentChat.tsx - Chat interface component
  • pages/api/copilot.ts - API route for CopilotKit runtime
  • copilotkit.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
  • 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

IssueSolution
init failsEnsure directory is empty or use --merge
Runtime connection failsCheck COPILOTKIT_API_KEY in .env
Agent not foundVerify agent name matches CODITECT agents
A2UI not renderingRun /copilotkit add-a2ui-renderer

Version: 1.0.0 Created: 2026-01-13 Repository: CopilotKit/CopilotKit ADR: ADR-071