mirror of https://github.com/CopilotKit/CopilotKit.git synced 2026-09-14 16:26:20 +08:00

Files

T

History

Alem Tuzlak 79ce60c580 chore: migrate from eslint+prettier to oxlint+oxfmt

Replace eslint and prettier with oxlint and oxfmt for faster linting
and formatting across the monorepo. Remove all eslint and prettier
configs, dependencies, and related packages. Add .oxlintrc.json and
.oxfmtrc.json for the new tooling. Update CI workflows and lefthook
hooks accordingly. Reformat codebase with oxfmt.

https://claude.ai/code/session_01GMkSf29p78HuMR1mbXn8He

2026-04-02 16:39:05 +02:00

agent

feat: consolidate 47 demo repos into examples/

2026-03-12 13:06:02 -07:00

public

style: format all example files with prettier

2026-03-12 13:06:04 -07:00

src

style: format all example files with prettier

2026-03-12 13:06:04 -07:00

.gitignore

feat: consolidate 47 demo repos into examples/

2026-03-12 13:06:02 -07:00

copilotkit-world-demo.gif

feat: consolidate 47 demo repos into examples/

2026-03-12 13:06:02 -07:00

next.config.ts

feat: consolidate 47 demo repos into examples/

2026-03-12 13:06:02 -07:00

package.json

chore: migrate from eslint+prettier to oxlint+oxfmt

2026-04-02 16:39:05 +02:00

postcss.config.mjs

feat: consolidate 47 demo repos into examples/

2026-03-12 13:06:02 -07:00

README.md

feat: consolidate 47 demo repos into examples/

2026-03-12 13:06:02 -07:00

tsconfig.json

feat: consolidate 47 demo repos into examples/

2026-03-12 13:06:02 -07:00

README.md

🌍 CopilotKit World Explorer

Interactive world travel app demonstrating CopilotKit and AG-UI protocol integration with LangGraph agents.

Features

3D Globe: Click countries to explore
AI Agent: GPT-4o provides country information
Frontend Actions: Agent calls UI tools via AG-UI protocol
Progress Tracking: Level-based gamification with localStorage persistence

Architecture

Frontend (Next.js)
  ↓ CopilotKit Runtime
  ↓ AG-UI Protocol
Backend (LangGraph Agent)
  ↓ GPT-4o

Key Files:

src/app/api/copilotkit/route.ts - Connects frontend to LangGraph agent
src/components/MyChat.tsx - Registers renderCountry action via useCopilotAction
agent/agent.py - ReAct agent that calls frontend tools

Getting Started

Prerequisites: Node.js 18+, Python 3.13+, OpenAI API key

Setup:

Install dependencies:

npm install
cd agent && python -m venv .venv && source .venv/bin/activate && pip install -r requirements.txt

Create .env:
```
OPENAI_API_KEY=your_key_here
```

Run both servers:

# Terminal 1
npm run dev:agent

# Terminal 2
npm run dev

Open http://localhost:3000

How It Works

User clicks country on globe
handleVisit adds to journey & sends message to CopilotKit
LangGraph agent receives message, calls renderCountry frontend action
MyChat renders CountryCard + AI response in chat

Extending

Add Backend Tool (agent/agent.py):

@tool
def get_weather(country: str):
    """Get weather for a country."""
    return f"Weather for {country}"

backend_tools = [get_weather]

Add Frontend Action (any component):

useCopilotAction({
  name: "showMap",
  render: ({ args }) => <Map country={args.countryName} />,
});

Tech Stack

CopilotKit - Agentic Application Framework
AG-UI Protocol - Agent-UI communication
LangGraph - Agent framework
Next.js - React framework

License

MIT