Skip to content

playground

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

playground

README.md

CopilotKit Chat Playground

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

Demo Gif

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

npm install

The postinstall script sets up the Python agent automatically.

Running Locally

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

  1. Adjust settings in the left panel (colors, fonts, text, spacing)
  2. See changes in real-time in the center preview
  3. Click "Export Code" when finished
  4. 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:

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

Module not found

Reinstall node dependencies:

rm -rf node_modules package-lock.json
npm install

Port in use

Kill the process or use a different port:

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/