npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

feedback-bot-kit

v1.0.1

Published

Feedback system with Telegram bot, GitHub issues, and optional AI agent triggers

Downloads

51

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

riccardo.dallariccardo.dalla

Keywords

feedbacktelegramgithub-issuesnextjsreactvercelai-agentscreenshot

Readme

feedback-bot-kit

Collect user feedback from your Next.js app. Creates GitHub issues automatically, sends Telegram notifications, captures screenshots, and can trigger AI agents to auto-fix bugs.

Environment Variables

# Required
GITHUB_TOKEN=ghp_xxx              # GitHub token (setup below)
GITHUB_REPO=owner/repo            # Your repo in owner/repo format

# Optional - Telegram notifications
TELEGRAM_BOT_TOKEN=123456:ABC     # From @BotFather (setup below)
TELEGRAM_CHAT_ID=-100xxx          # Chat ID to receive notifications

# Optional - Screenshot storage (any S3-compatible)
S3_ENDPOINT=https://xxx.r2.cloudflarestorage.com
S3_ACCESS_KEY_ID=xxx
S3_SECRET_ACCESS_KEY=xxx
S3_BUCKET=feedback
S3_PUBLIC_URL=https://your-public-url.com

# Optional - AI agent webhook
FEEDBACK_AGENT_WEBHOOK_URL=https://your-webhook.com
FEEDBACK_AGENT_WEBHOOK_SECRET=optional-bearer-token

GitHub Setup

  1. Go to github.com/settings/tokens
  2. Click Generate new token (classic)
  3. Select the repo scope (or public_repo for public repos only)
  4. Copy the token → set as GITHUB_TOKEN
  5. Set GITHUB_REPO to your repo (e.g., myusername/myproject)

Optional - Create labels (auto-applied to issues):

gh label create bug --color d73a4a
gh label create enhancement --color a2eeef
gh label create user-feedback --color 0e8a16

Telegram Setup

  1. Open Telegram and message @BotFather
  2. Send /newbot and follow the prompts to create your bot
  3. Copy the token → set as TELEGRAM_BOT_TOKEN
  4. Get your chat ID:
    • Add @userinfobot to your chat, or
    • Check https://api.telegram.org/bot<YOUR_TOKEN>/getUpdates after sending a message
  5. Set TELEGRAM_CHAT_ID
  6. After deploying your app, register the webhook by visiting:
    https://yourapp.com/api/telegram/webhook?action=setup
  7. Test by sending /start to your bot

Bot Commands: | Command | Description | |---------|-------------| | /new | Create new issue | | /issues | List open issues | | /issues bug | Filter by label | | /close 123 | Close issue #123 |

Screenshot Storage (Optional)

Without storage configured, issues are created without screenshots. Any S3-compatible storage works:

Cloudflare R2 (free tier):

S3_ENDPOINT=https://ACCOUNT_ID.r2.cloudflarestorage.com
S3_ACCESS_KEY_ID=xxx
S3_SECRET_ACCESS_KEY=xxx
S3_BUCKET=feedback
S3_PUBLIC_URL=https://pub-xxx.r2.dev

AWS S3:

S3_ENDPOINT=https://s3.us-east-1.amazonaws.com
S3_ACCESS_KEY_ID=xxx
S3_SECRET_ACCESS_KEY=xxx
S3_BUCKET=my-bucket
S3_REGION=us-east-1
S3_PUBLIC_URL=https://my-bucket.s3.us-east-1.amazonaws.com

AI Agent Webhook (Optional)

When FEEDBACK_AGENT_WEBHOOK_URL is set, each feedback triggers a POST request you can use to start automated fixes:

{
  "event": "feedback_created",
  "issue": { "number": 123, "title": "[🐛 BUG] ...", "url": "https://github.com/..." },
  "feedback": { "category": "bug", "description": "...", "screenshotUrl": "..." },
  "timestamp": "2024-01-15T10:30:00Z"
}

Installation

npm install feedback-bot-kit modern-screenshot

Add API Routes

// app/api/feedback/route.ts
export { feedbackHandler as POST, feedbackStatusHandler as GET } from 'feedback-bot-kit';

// app/api/telegram/webhook/route.ts (if using Telegram)
export { telegramWebhookHandler as POST, telegramWebhookSetup as GET } from 'feedback-bot-kit';

Add Feedback Button

// app/layout.tsx
import { FeedbackButton } from 'feedback-bot-kit';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackButton />
      </body>
    </html>
  );
}

Props:

<FeedbackButton
  position="bottom-right"  // bottom-right | bottom-left | top-right | top-left
  buttonLabel="Feedback"
  enableScreenshots={true}
  categories={[
    { value: 'bug', label: 'Bug', emoji: '🐛' },
    { value: 'enhancement', label: 'Enhancement', emoji: '✨' },
  ]}
/>

Programmatic Usage

import { createFeedback, createGitHubIssue } from 'feedback-bot-kit';

await createFeedback({
  category: 'bug',
  description: 'Something broke',
  pageUrl: '/dashboard',
});

Requirements

  • Next.js 14+ (App Router)
  • Any hosting: Vercel, Netlify, AWS, Railway, Docker, etc.

License

MIT