CopilotKit Chat Playground

A visual playground for customizing CopilotKit chat components. Adjust colors, fonts, and text, then export production-ready code.

Overview

This tool lets you customize CopilotKit chat appearance with a live preview and export the code when you're done. Useful for designers and developers who want to integrate AI chat into their applications.

Getting Started

Prerequisites

Node.js 18+
npm, pnpm, yarn, or bun
OpenAI API key (for the live preview agent)

Installation

bash

npm install

The postinstall script sets up the Python agent automatically.

Running Locally

bash

npm run dev

This starts the UI on localhost:3000 and the agent on localhost:8123. Open your browser to http://localhost:3000.

How It Works

Adjust settings in the left panel (colors, fonts, text, spacing)
See changes in real-time in the center preview
Click "Export Code" when finished
Copy the generated files into your project

The export includes:

MyChat.tsx - Your customized chat component
layout.tsx - CopilotKit wrapper
route.ts - API route
.env.local - Environment variables template

Available Scripts

npm run dev - Start UI and agent
npm run dev:ui - Start UI only
npm run dev:agent - Start agent only
npm run build - Build for production
npm run start - Run production build

Project Structure

src/
├── app/
│   ├── page.tsx                    # Main playground
│   ├── layout.tsx                  # Root layout
│   ├── preview/                    # Preview iframe
│   └── api/copilotkit-preview/     # Preview API
├── components/
│   ├── playground/
│   │   ├── PlaygroundContainer.tsx
│   │   ├── SettingsPanel.tsx
│   │   ├── PreviewPanel.tsx
│   │   ├── CodeExporter.tsx
│   │   └── AgentSetupModal.tsx
│   └── ui/                         # shadcn/ui components
├── hooks/
│   └── usePlaygroundConfig.ts
├── types/
│   └── playground.ts
└── utils/
    └── codeGenerator.ts

agent/
├── agent.py
├── langgraph.json
├── requirements.txt
└── .env

Troubleshooting

Preview not loading

The preview needs the agent running. Check:

Agent is running on port 8123
OpenAI API key is set in agent/.env
No console errors in browser

Agent won't start

Reinstall Python dependencies:

bash

cd agent
rm -rf .venv
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

Module not found

Reinstall node dependencies:

bash

rm -rf node_modules package-lock.json
npm install

Port in use

Kill the process or use a different port:

bash

lsof -ti:3000 | xargs kill
# or
PORT=3001 npm run dev:ui

Documentation

License

MIT

Demo built by Mark Morgan in collaboration with CopilotKit Team. Mark Morgan LinkedIn: https://www.linkedin.com/in/markmdev/