What is Copilotkit Mcp Demo

CopilotKit MCP Demo is an example implementation of the MCP server-client integrations designed to manage projects and tasks from project management applications like Linear.

Use cases

Use cases include managing project tasks, facilitating team communication, providing AI-driven insights, and enhancing user experience in project management applications.

How to use

To use CopilotKit MCP Demo, clone the repository, install the necessary dependencies, set up the environment variables, and run the development server to start interacting with the application.

Key features

Key features include a CopilotKit AI chat interface for user assistance, real-time interactivity with dynamic state changes, robust state management and agent coordination, and a responsive modern UI designed with Tailwind CSS.

Where to use

CopilotKit MCP Demo can be used in project management, task tracking, and any application requiring interactive AI assistance for managing workflows.

Working Memory is an example for the implementation of the MCP server-client integrations to handle and manage your projects and tasks from your project management applications like Linear.

Key Features

• CopilotKit AI Chat Interface:
  Chat with the CopilotKit AI which acts as useful assitant who can able to provide answers to user queries and perform executable actions inside the application.

• Real-Time Interactivity:
  Enjoy a live chat powered by @copilotkit/react-ui that orchestrates dynamic state changes and agent responses.

• State Management & Agent Coordination:
  Leverages @copilotkit/react-core for robust agent state management and smooth integration of travel and research functionalities.

• Responsive & Modern UI:
  Designed with Tailwind CSS to ensure your experience is smooth and adaptive across all devices.

Technology Stack

• Framework: Next.js

• UI Library: React, CopilotKit UI

• State Management: CopilotKit React Core

• Styling: Tailwind CSS

• Additional Libraries:

  • React Query for data fetching
  • Framer Motion for animations
  • Radix UI for accessible components
  • React Flow for flow diagrams

Setup Instructions

1. Prerequisites:

   • Node.js (LTS version recommended)
   • npm, yarn, or pnpm

2. Installation:

   # Clone the repository
   git clone <repository-url>
   
   # Install dependencies
   npm install
   # or
   yarn install
   # or
   pnpm install
   

3. Environment Setup:
   Create a .env file in the root directory with the necessary environment variables.

    OPENAI_API_KEY = YOUR_API_KEY
   

4. Running the Development Server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   

   Then, open http://localhost:3000 in your browser.

Project Structure

• /src/app:
  Contains Next.js page components, layouts, and global styles.

• /src/components:
  Houses reusable components including agent interfaces (Travel, Research, Chat, Map, Sidebar) and UI elements.

• /src/providers:
  Wraps the global state providers responsible for managing agent states.

• /src/lib:
  Contains utility functions and configuration files.

• /src/hooks:
  Custom React hooks for shared functionality.

• /src/contexts:
  React context providers for global state management.

Development

• Linting:

  npm run lint
  # or
  yarn lint
  # or
  pnpm lint
  

• Building for Production:

  npm run build
  # or
  yarn build
  # or
  pnpm build
  

Deployment

The easiest way to deploy this project is with Vercel. Build and start your application with:

npm run build
npm run start

Follow Vercel’s deployment guide for more details if needed.

Contributing

Contributions are welcome! Fork the repository and submit a pull request with any improvements, bug fixes, or new features.

License

Distributed under the MIT License. See LICENSE for more information.