feedback-chat

feedback-chat

The feedback-chat is an innovative AI-powered feedback widget designed specifically for Next.js applications. This tool streamlines the user feedback process by enabling real-time conversations with an intelligent AI advisor. Feedback provided by users is seamlessly transformed into GitHub issues, while an autonomous agent takes charge of implementing the feedback. The system continuously adapts and improves by learning from its own failures, enhancing both user experience and development efficiency.

Workflow Overview

The core functioning of the feedback-chat can be visualized in the following workflow:

User chats → GitHub issue → Claude agent implements → PR → preview → approve
                                    ↓ (on failure)
                              Haiku classifies → self-improve job → fix PR

Features

• Interactive Demo: A demonstration of the widget is available, showcasing its capabilities in action.

• Quick Actions: Start developing and testing the feedback system efficiently with the following commands:

  npm run dev          # Start everything (widget + dashboard + agent dev)
  npm run build        # Build all packages
  npm run test         # Run tests
  npm run switch       # Toggle worker between local and Railway
  

• Dashboard: The dashboard provides invaluable insights, including project management features, project pipeline runs, failure classifications, self-improvement PRs, feedback sessions, tester activity, and AI-generated proposals. Access the production version at loop.joincoby.com.

Technical Architecture

The project structure is organized as follows:

feedback-chat/
├── packages/
│   ├── widget/      ← npm package (@nikitadmitrieff/feedback-chat)
│   │   └── src/
│   │       ├── client/   ← React components (FeedbackPanel, PipelineTracker)
│   │       ├── server/   ← Route handler factories
│   │       └── cli/      ← npx setup wizard + deploy script
│   ├── agent/       ← Managed worker (polls Supabase, runs Claude CLI)
│   │   └── src/
│   │       ├── managed-worker.ts   ← Job loop (claim → process → retry/fail)
│   │       ├── worker.ts           ← Implement jobs (clone → Claude → validate → PR)
│   │       ├── setup-worker.ts     ← Setup jobs (widget installation on consumer repos)
│   │       ├── self-improve-worker.ts ← Self-fix jobs (clone feedback-chat → fix → PR)
│   │       ├── strategize-worker.ts   ← AI proposals from feedback themes
│   │       ├── classify-failure.ts    ← Haiku failure classification
│   │       └── oauth.ts              ← Claude Max token refresh
│   └── dashboard/   ← Next.js app (Supabase backend)
│       ├── src/app/projects/   ← Project management, runs, feedback, proposals
│       └── supabase/migrations/
├── scripts/
│   └── switch-worker.sh   ← Local/Railway toggle
└── docs/

How It Works

The feedback pipeline consists of several steps:

1. Feedback – Users interact with the widget, and the AI refines the feedback into a GitHub issue.
2. Queue – The issue is placed in a job queue for processing in Supabase.
3. Implement – A worker claims the job, clones the relevant repository, runs the necessary commands, validates the build, and creates a pull request (PR).
4. Retry – If any job fails, it will attempt to retry up to three times.
5. Classify – After three failed attempts, a classification happens to determine the cause of failure.
6. Self-improve – For specific types of failures, a self-improvement job is initiated to create a fix PR.
7. Strategize – The AI analyzes feedback themes and suggests product improvements for manual review.

Getting Started

Developers can easily implement the feedback widget. The setup involves creating API routes, preparing environment variables, and implementing the feedback component into their Next.js application. A detailed guide can be found in the README, providing all necessary configurations and examples.

Overall, the feedback-chat project leverages AI technology to optimize feedback mechanisms, making the development process more efficient and enhancing user engagement.