Skip to content

NathanTarbert/my-vibe-coded-mcp-app

Repository files navigation

🚀 Vibe Code Board

A powerful, AI-powered Kanban board application built with Next.js, TypeScript, Tailwind CSS, and CopilotKit. Manage your projects with the help of an intelligent AI assistant that can understand your workflow and take actions on your behalf.

Vibe Code Board TypeScript Tailwind CSS CopilotKit

✨ Features

🎯 Kanban Board

  • Drag & Drop: Intuitive task management with visual feedback
  • Status Columns: To Do, In Progress, Review, Done
  • Priority Levels: Low, Medium, High with color coding
  • Team Management: Add, remove, and assign team members
  • Responsive Design: Works perfectly on all devices

🤖 CopilotKit-Powered Assistant

  • Natural Language: Chat with AI using everyday language
  • Smart Actions: AI can create, move, and manage tasks
  • Context Awareness: AI understands your current project state
  • Dynamic Suggestions: Intelligent recommendations based on your workflow
  • Real-time Updates: AI stays in sync with your board changes

🚀 Tech Stack

  • Next.js 15: Latest React framework with App Router
  • TypeScript: Type-safe development experience
  • Tailwind CSS: Utility-first CSS framework
  • CopilotKit: Advanced AI integration framework
  • React 19: Latest React with concurrent features

🎮 Quick Start

  1. Clone the repository

    git clone https://github.com/NathanTarbert/my-vibe-coded-mcp-app
    cd my-vibe-coded-mcp-app
  2. Install dependencies

    pnpm install
  3. Get your CopilotKit API key

  4. Create environment file

    # .env.local
    NEXT_PUBLIC_COPILOT_CLOUD_PUBLIC_API_KEY=your_api_key_here
  5. Start development server

    pnpm run dev
  6. Open your browser Navigate to http://localhost:3000

  7. Add the MCP Server to Your App Choose an AI Powered code editor and follow the instructions: https://docs.copilotkit.ai/mcp

Example AI Commands

"Add a new high-priority task for database optimization"
"Move the landing page task to in-progress"
"Show me a summary of all high-priority tasks"
"Add John Smith to the team"
"Reassign the API documentation task to Sarah"

🌟 CopilotKit Features

Copilot Actions

  • Task Management: Create, move, assign, and prioritize tasks
  • Team Management: Add and remove team members
  • Analytics: Get insights and summaries of your project

Copilot Readables

  • Real-time State: AI always knows your current project status
  • Context Awareness: Understands relationships between tasks and team members
  • Dynamic Updates: Automatically stays in sync with your changes

Copilot Suggestions

  • Smart Recommendations: AI suggests next actions based on your workflow
  • Context-Aware: Considers task distribution and team workload
  • Real-time Updates: Suggestions evolve as your project changes

This project is licensed under the MIT License - see the LICENSE file for details.

Star this repository if you find it helpful! ⭐

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors