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 token in your CLI (requires GitHub CLI)
• .NET 9.0 SDK
  • Download directly
  • macOS/Linux

    • Install via Homebrew (brew install dotnet@9) or

    • Install via curl install 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)
• Node.js 20+
  • Download directly
  • macOS/Linux

    • Install via Homebrew (brew install node@24) or

    • Install via curl install 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)
• Any of the following package managers:
  • pnpm (recommended)
  • npm (usually installed with Node.js)
  • yarn
  • bun

Note: This repository ignores lock files (package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb) to avoid conflicts between different package managers. Each developer should generate their own lock file using their preferred package manager. After that, make sure to delete it from the .gitignore.

Getting Started

1. Install dependencies using your preferred package manager:

   # Using pnpm (recommended)
   pnpm install
   
   # Using npm
   npm install
   
   # Using yarn
   yarn install
   
   # Using bun
   bun install

   Note: This will automatically setup the C# agent as well (restore NuGet packages).

   If you have manual issues, you can run:

   npm run install:agent

2. Set up your GitHub token for GitHub Models:

   First, get your GitHub token:

   gh auth token

   Then, 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 ..

3. Start the development server:

   # Using pnpm
   pnpm dev
   
   # Using npm
   npm run dev
   
   # Using yarn
   yarn dev
   
   # Using bun
   bun run dev

   This 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 mode
• dev:debug - Starts development servers with debug logging enabled
• dev:ui - Starts only the Next.js UI server
• dev:agent - Starts only the C# agent server
• build - Builds the Next.js application for production
• start - Starts the production server
• lint - Runs ESLint for code linting
• install: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:

1. The C# agent is running on port 8000
2. Your GitHub token is set correctly via user secrets
3. 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 - Update applicationUrl
• src/app/api/copilotkit/route.ts - Update the HttpAgent URL