mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Benjamin Taylor
e1f88ebc12
Addresses review feedback that channel-host.mts is doing too much.
Two changes, both scoped to the starters:
1. Channel construction moves to a new `channels.mts` beside `agent.ts` —
name resolution, `createChannel`, and the `onMessage` handler. That is
also the file to edit to customise a Channel (commands, reactions,
onMention), which previously meant editing the host.
The per-framework agent import moves with it, so `channel-host.mts` is now
byte-identical in all 15 starters rather than 13 + 2.
2. The host no longer stands up an HTTP server. Its comment claimed the
server was what "keeps the lifecycle-owning process alive"; that is false.
An open undici WebSocket holds the event loop on its own — verified with a
standalone repro where a process with no HTTP server and no timers of its
own stayed up indefinitely on a single WebSocket connection. The server was
therefore serving a second, uncalled copy of the runtime API on port 8300
for no reason.
With the server gone, `createCopilotNodeListener` was the wrong factory —
it builds a request listener purely for its activation side effect. The
host now uses `createCopilotRuntimeHandler` + `ready()`, which is the
documented long-running-host pattern (see fetch-handler.ts). This also
drops `node:http`, `basePath`, and the CHANNEL_PORT env var.
Behaviour is unchanged: same Channel, same agent, same status reporting, and
the same non-zero exit on activation failure.
Verified: 14/14 starters with a `typecheck:channel` script pass; mastra has no
such script by design (166dc94691) and its pre-existing Mastra `Memory` type
error is byte-identical before and after. `npm run channel` exercised on both
failure paths — missing channels.json, and missing INTELLIGENCE_API_KEY with a
name supplied — confirming the new `./channels.mjs` specifier resolves under
tsx as well as tsc. `parity:check` output identical to the pre-change baseline.
Refs #6315
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
146 lines
4.4 KiB
Markdown
146 lines
4.4 KiB
Markdown
# CopilotKit <> MCP Apps Starter
|
|
|
|
This is a starter template for integrating [MCP Apps](https://mcpui.dev) with [CopilotKit](https://copilotkit.ai). It uses the [Three.js example](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/threejs-server) from the official Model Context Protocol organization on GitHub.
|
|
|
|
https://github.com/user-attachments/assets/8908af31-2b64-4426-9c83-c51ab86256de
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
.
|
|
├── app/ # Next.js App Router pages and API routes
|
|
│ ├── page.tsx # Main page
|
|
│ └── api/copilotkit/ # CopilotKit API route
|
|
├── threejs-server/ # MCP App Server (Three.js)
|
|
│ ├── server.ts # Server entry point
|
|
│ ├── src/ # Three.js app source
|
|
│ └── package.json
|
|
├── scripts/ # MCP server run scripts
|
|
├── next.config.ts
|
|
├── tsconfig.json
|
|
└── package.json
|
|
```
|
|
|
|
## Prerequisites
|
|
|
|
- Node.js 20+
|
|
- Any of the following package managers:
|
|
- npm (default)
|
|
- [pnpm](https://pnpm.io/installation)
|
|
- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/)
|
|
- [bun](https://bun.sh/)
|
|
- OpenAI API Key
|
|
|
|
## 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
|
|
```
|
|
|
|
> The `postinstall` script automatically installs the MCP server dependencies in `threejs-server/`.
|
|
|
|
2. Set up your environment variables:
|
|
|
|
```bash
|
|
echo 'OPENAI_API_KEY=your-openai-api-key-here' > .env
|
|
```
|
|
|
|
3. Start the development servers:
|
|
|
|
```bash
|
|
# Using npm (default)
|
|
npm run dev
|
|
|
|
# Using pnpm
|
|
pnpm dev
|
|
|
|
# Using yarn
|
|
yarn dev
|
|
|
|
# Using bun
|
|
bun run dev
|
|
```
|
|
|
|
This starts both the Next.js app and the MCP server concurrently.
|
|
|
|
## Running a Channel
|
|
|
|
`channel-host.mts` mounts the same agent as an Intelligence Channel
|
|
(Slack, Teams). It requires `INTELLIGENCE_API_KEY` and a declared Channel in
|
|
`.copilotkit/channels.json` — set both up with `copilotkit init` or
|
|
`copilotkit channels add`, which write that file and the credentials your
|
|
`.env` needs, then:
|
|
|
|
```bash
|
|
npm run channel
|
|
```
|
|
|
|
The host reads which Channel to hold from `.copilotkit/channels.json`. If a
|
|
project declares more than one, set `INTELLIGENCE_CHANNEL_NAME` to pick one.
|
|
|
|
The host holds no provider credentials and exposes no provider endpoint —
|
|
Intelligence owns the provider edge — so the same file works for every provider.
|
|
|
|
The Channel itself is declared in `channels.mts` — that is where to add commands,
|
|
reactions, or an `onMention` handler. `channel-host.mts` only owns the process
|
|
lifetime, and is byte-identical in every starter.
|
|
|
|
Once startup finishes, the log reports the truth per Channel:
|
|
|
|
- `Channel "<name>" is online.` — the session is up and can send.
|
|
- `Channel "<name>" is declared but no provider is attached yet.` —
|
|
a normal waiting state, not a failure. Run `copilotkit channels status` to
|
|
see what setup remains.
|
|
|
|
Neither message proves the provider app is installed, reachable, or that
|
|
anyone can message it — verify that separately (invite the bot, then message
|
|
it) before treating the Channel as working.
|
|
|
|
## Available Scripts
|
|
|
|
The following scripts can also be run using your preferred package manager:
|
|
|
|
- `dev` - Starts both the UI and MCP server in development mode
|
|
- `dev:ui` - Starts only the Next.js UI server
|
|
- `dev:mcp` - Starts only the MCP App Server
|
|
- `build` - Builds the Next.js application for production
|
|
- `start` - Starts the production server
|
|
- `channel` - Holds an Intelligence Channel open (see "Running a Channel" above)
|
|
- `typecheck:channel` - Type-checks the channel host on its own `tsconfig.channel.json`
|
|
|
|
## Customization
|
|
|
|
The main UI component is in `app/page.tsx`. You can:
|
|
|
|
- Modify the theme colors and styling
|
|
- Add new frontend actions
|
|
- Customize the CopilotKit sidebar appearance
|
|
|
|
The MCP App Server code is in `threejs-server/`.
|
|
|
|
## Documentation
|
|
|
|
- [CopilotKit Documentation](https://docs.copilotkit.ai) - Explore CopilotKit's capabilities
|
|
- [Next.js Documentation](https://nextjs.org/docs) - Learn about Next.js features and API
|
|
- [MCP Apps Documentation](https://mcpui.dev/guide/introduction) - Learn more about MCP Apps and how to use it
|
|
|
|
## 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.
|