Vibe Coding Agent

Vibe Coding Agent is an AI-powered application that connects multiple services (Agent, Sandbox, Kilo Gateway, Vercel, Modal Serverless) with a focus on easy-to-use interface for agent monitoring and control, dashboard with GitHub heatmap, Apple Watch chart, Line chart for agent activity tracking, trust-building features for users who want to let agents work autonomously. NOT a dev tool, but a connector/interface that makes complex things simple.

Features

• Agent activity monitoring (GitHub heatmap, Apple Watch chart, Line chart)
• Trust-building features for autonomous agent operation
• Multi-service connector (Kilo Gateway, Modal Serverless, Vercel, Sandbox)
• Session management with lock interfaces
• Workflow orchestration with Upstash
• Real-time dashboard and controls

Tech Stack

• Next.js with Turbopack
• AI SDK v7
• Kilo Gateway - OpenAI-compatible API endpoint
• Modal Serverless - Serverless functions and containers
• Agent Client Protocol (ACP) SDK - Standardized communication between editors and coding agents
• uipro-cli - UI/UX Pro Max skill for AI coding assistants
• Upstash - Workflow orchestration with durable execution
• Vercel Edge Runtime - For proxy and webhook handling
• Vercel AI Gateway
• Vercel Sandbox
• Tailwind CSS
• shadcn/ui
• zod - Schema validation
• Biome - Linter and formatter
• Knip - Unused detection
• CSpell - Spell checking
• Playwright - E2E testing
• Qwen Code

Getting Started

Prerequisites

• Node.js 20+
• pnpm

Run Locally

pnpm install
pnpm dev

Open http://localhost:3000.

AI Services Architecture

Note: This application leverages a multi-service AI architecture.

Development Environment

For full development environment with Python, Node, Rust tools, use Dev Containers:

1. Open in VS Code
2. Dev Containers: Reopen in Container when prompted
3. Tools will be automatically installed

Scripts

• pnpm dev - Start development server with Turbopack
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Lint code with Biome
• pnpm lint:fix - Fix linting issues
• pnpm format - Format code with Biome
• pnpm type-check - TypeScript checking
• pnpm test - Unit tests with Vitest
• pnpm test:run - Run tests once
• pnpm test:e2e - Run end-to-end tests with Playwright
• pnpm spellcheck - Spell check with CSpell
• pnpm knip - Check for unused files/exports
• pnpm markdownlint - Lint markdown files
• pnpm playwright:install - Install Playwright browsers

Code Quality

This project uses several tools for maintaining code quality:

• Biome: Fast linter and formatter replacing ESLint + Prettier
• Knip: Detects unused files, exports, and dependencies
• CSpell: Spell checker for code and documentation
• Markdownlint: Lints markdown files
• Playwright: End-to-end testing framework
• .editorconfig: Ensures consistent editor settings

Supported Models

• Models accessible via Kilo Gateway (Claude, GPT, Grok series)
• Qwen models for code assistance
• Upcoming integrations with other providers

Architecture

Brief link to docs/architecture.md

API Documentation

Link to docs/openapi.yaml

Schemas

Link to schemas/ directory

Deploy

Click the deploy button above or run:

vc deploy