CopilotKit <> Microsoft Agent Framework Starter
This is a starter template for building AI agents using Microsoft Agent Framework and CopilotKit. It provides a modern Next.js application with an integrated proverbs management agent that demonstrates AG-UI protocol features including shared state, generative UI, and human-in-the-loop workflows.
Prerequisites
-
GitHub Personal Access Token (for GitHub Models API)
- Retrieve from GitHub using these instructions.
- or generate via
gh auth tokenin your CLI (requires GitHub CLI)
-
.NET 9.0 SDK
-
macOS/Linux
-
Install via Homebrew (
brew install dotnet@9) or -
Install via
curlinstall script
curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --channel 9.0 export PATH="$HOME/.dotnet:$PATH"
-
-
Windows
- Install via WinGet (
winget install --id=Microsoft.DotNet.SDK.9 -e)
- Install via WinGet (
-
Node.js 20+
-
macOS/Linux
-
Install via Homebrew (
brew install node@24) or -
Install via
curlinstall script
# Download and install nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # in lieu of restarting the shell \. "$HOME/.nvm/nvm.sh" # Download and install Node.js: nvm install 24
-
-
Windows
- Install via WinGet (
winget install --id=OpenJS.NodeJS -v "24.11.0" -e)
- Install via WinGet (
-
Any of the following package managers:
Getting Started
-
Install dependencies using your preferred package manager:
# Using npm (default) npm install # Using pnpm pnpm install # Using yarn yarn install # Using bun bun installNote: This will automatically setup the C# agent as well (restore NuGet packages).
If you have manual issues, you can run:
npm run install:agent -
Set up your GitHub token for GitHub Models:
First, get your GitHub token:
gh auth tokenThen, navigate to the agent directory and set it as a user secret:
cd agent dotnet user-secrets set GitHubToken "<your-token>" cd ..Or set it in one command:
cd agent; dotnet user-secrets set GitHubToken "$(gh auth token)"; cd .. -
Start the development server:
# Using npm (default) npm run dev # Using pnpm pnpm dev # Using yarn yarn dev # Using bun bun run devThis will start both the Next.js UI (port 3000) and C# agent server (port 8000) concurrently.
Available Scripts
The following scripts can also be run using your preferred package manager:
dev- Starts both UI and agent servers in development modedev:debug- Starts development servers with debug logging enableddev:ui- Starts only the Next.js UI serverdev:agent- Starts only the C# agent serverbuild- Builds the Next.js application for productionstart- Starts the production serverlint- Runs ESLint for code lintinginstall:agent- Restores NuGet packages for the C# agent
Project Structure
├── agent/ # C# Agent (Microsoft Agent Framework)
│ ├── Program.cs # Main agent implementation with tools
│ ├── ProverbsAgent.csproj # .NET project file
│ └── Properties/ # Configuration (launch settings)
├── src/
│ ├── app/
│ │ ├── page.tsx # Main UI with CopilotKit sidebar
│ │ ├── layout.tsx # CopilotKit provider setup
│ │ └── api/
│ │ └── copilotkit/
│ │ └── route.ts # AG-UI integration endpoint
│ ├── components/ # UI components (weather, proverbs, moon)
│ └── lib/ # Types and utilities
└── scripts/ # Helper scripts for agent setup/run
Features Demonstrated
This starter showcases key AG-UI protocol features:
- 🔄 Shared State: Proverbs list synchronized between frontend and agent
- 🎨 Generative UI: Weather card rendered from backend tool
- 👤 Human-in-the-Loop: Moon card with approval workflow
- 🛠️ Frontend Actions: Theme color changes from agent
- 💬 Agentic Chat: Natural language interface with tool calling
📚 Documentation
- Microsoft Agent Framework - Learn about Microsoft's agent framework
- AG-UI Protocol - AG-UI protocol specification
- CopilotKit Documentation - CopilotKit features and API
- Next.js Documentation - Next.js features and API
- GitHub Models - Free AI models via GitHub
Contributing
Feel free to submit issues and enhancement requests! This starter is designed to be easily extensible.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Troubleshooting
Agent Connection Issues
If you see "I'm having trouble connecting to my tools", make sure:
- The C# agent is running on port 8000
- Your GitHub token is set correctly via user secrets
- Both servers started successfully (check terminal output)
.NET SDK Not Installed
If you don't have .NET 9.0 installed:
macOS/Linux (Homebrew):
brew install dotnet@9
dotnet --version
macOS/Linux (Install Script):
curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --channel 9.0
export PATH="$HOME/.dotnet:$PATH"
Windows (WinGet):
winget install --id=Microsoft.DotNet.SDK.9 -e
Windows/macOS (Direct Download):
- Visit https://dotnet.microsoft.com/download/dotnet/9.0
- Download and run the installer
.NET SDK Issues
If you encounter .NET-related errors:
# Verify .NET SDK is installed
dotnet --version # Should be 9.0.x or higher
# Restore packages manually
cd agent
dotnet restore
dotnet run
GitHub Token Issues
If the agent fails to start with "GitHubToken not found":
cd agent
dotnet user-secrets set GitHubToken "$(gh auth token)"
Or manually:
# Get your token
gh auth token
# Set it as a user secret
cd agent
dotnet user-secrets set GitHubToken "YOUR_TOKEN_HERE"
Port Conflicts
If port 8000 is already in use, you can change it in:
agent/Properties/launchSettings.json- UpdateapplicationUrlsrc/app/api/copilotkit/route.ts- Update the HttpAgent URL