257 lines
7.4 KiB
Markdown
257 lines
7.4 KiB
Markdown
# CopilotKit <> Microsoft Agent Framework Starter
|
|
|
|
This is a starter template for building AI agents using [Microsoft Agent Framework](https://github.com/microsoft/agents) and [CopilotKit](https://copilotkit.ai). 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](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic).
|
|
- or generate via `gh auth token` in your CLI (requires [GitHub CLI](https://github.com/cli/cli?tab=readme-ov-file#installation))
|
|
- **.NET 9.0 SDK**
|
|
- [Download directly](https://dotnet.microsoft.com/download/dotnet/9.0)
|
|
- macOS/Linux
|
|
- [Install via Homebrew](https://formulae.brew.sh/formula/dotnet) (`brew install dotnet@9`) or
|
|
- <details><summary>Install via <code>curl</code> install script</summary><br />
|
|
|
|
```bash
|
|
curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --channel 9.0
|
|
export PATH="$HOME/.dotnet:$PATH"
|
|
```
|
|
|
|
</details>
|
|
|
|
- Windows
|
|
- [Install via WinGet](https://winstall.app/apps/Microsoft.DotNet.SDK.9) (`winget install --id=Microsoft.DotNet.SDK.9 -e`)
|
|
|
|
- **Node.js 20+**
|
|
- [Download directly](https://nodejs.org/en/download)
|
|
- macOS/Linux
|
|
- [Install via Homebrew](https://formulae.brew.sh/formula/node@24) (`brew install node@24`) or
|
|
- <details><summary>Install via <code>curl</code> install script</summary><br />
|
|
|
|
```bash
|
|
# 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
|
|
```
|
|
|
|
</details>
|
|
|
|
- Windows
|
|
- [Install via WinGet](https://winstall.app/apps/OpenJS.NodeJS) (`winget install --id=OpenJS.NodeJS -v "24.11.0" -e`)
|
|
|
|
- Any of the following package managers:
|
|
- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) **(default)** (usually installed with Node.js)
|
|
- [pnpm](https://pnpm.io/installation)
|
|
- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
|
|
- [bun](https://bun.sh/)
|
|
|
|
## Getting Started
|
|
|
|
1. Install dependencies using your preferred package manager:
|
|
|
|
```bash
|
|
# Using npm (default)
|
|
npm install
|
|
|
|
# Using pnpm
|
|
pnpm 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:
|
|
>
|
|
> ```sh
|
|
> npm run install:agent
|
|
> ```
|
|
|
|
2. Set up your GitHub token for GitHub Models:
|
|
|
|
First, get your GitHub token:
|
|
|
|
```bash
|
|
gh auth token
|
|
```
|
|
|
|
Then, navigate to the agent directory and set it as a user secret:
|
|
|
|
```bash
|
|
cd agent
|
|
dotnet user-secrets set GitHubToken "<your-token>"
|
|
cd ..
|
|
```
|
|
|
|
Or set it in one command:
|
|
|
|
```bash
|
|
cd agent; dotnet user-secrets set GitHubToken "$(gh auth token)"; cd ..
|
|
```
|
|
|
|
3. Start the development server:
|
|
|
|
```bash
|
|
# Using npm (default)
|
|
npm run dev
|
|
|
|
# Using pnpm
|
|
pnpm 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](https://github.com/microsoft/agents) - Learn about Microsoft's agent framework
|
|
- [AG-UI Protocol](https://github.com/copilotkit/ag-ui) - AG-UI protocol specification
|
|
- [CopilotKit Documentation](https://docs.copilotkit.ai) - CopilotKit features and API
|
|
- [Next.js Documentation](https://nextjs.org/docs) - Next.js features and API
|
|
- [GitHub Models](https://github.com/marketplace/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):**
|
|
|
|
```bash
|
|
brew install dotnet@9
|
|
dotnet --version
|
|
```
|
|
|
|
**macOS/Linux (Install Script):**
|
|
|
|
```bash
|
|
curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --channel 9.0
|
|
export PATH="$HOME/.dotnet:$PATH"
|
|
```
|
|
|
|
**Windows (WinGet):**
|
|
|
|
```powershell
|
|
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:
|
|
|
|
```bash
|
|
# 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":
|
|
|
|
```bash
|
|
cd agent
|
|
dotnet user-secrets set GitHubToken "$(gh auth token)"
|
|
```
|
|
|
|
Or manually:
|
|
|
|
```bash
|
|
# 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
|