Skip to content

ewjdev/anyclick

Repository files navigation

anyclick

Why not click on everything?

npm version License: MIT

Right-click any element in your app to capture feedback with full DOM context, screenshots, and automatic integration with GitHub Issues or AI coding agents.

Features

  • 🎯 Context-Aware Capture - Extract CSS selectors, data attributes, ancestors, and page context
  • 📸 Screenshot Capture - Automatic screenshots of target, container, and full page
  • 🐙 GitHub Integration - Create rich GitHub Issues with embedded screenshots
  • 🤖 AI Agent Integration - Launch Cursor AI agents for automatic code fixes
  • ⚛️ React Provider - Drop-in component with customizable context menu
  • 🔌 Adapter Pattern - Flexible architecture for custom integrations
  • Custom Theme - Customize the look of the users interaction with your website

Quick Start

Installation

yarn install @ewjdev/anyclick-react @ewjdev/anyclick-github

Usage

1. Create API Route

// app/api/feedback/route.ts
import { createGitHubAdapter } from "@ewjdev/anyclick-github/server";

const repoName = process.env.GITHUB_REPO!;
const [owner, repo] = repoName.split("/");
const github = createGitHubAdapter({
  owner,
  repo,
  token: process.env.GITHUB_TOKEN!,
});

export async function POST(request: Request) {
  const payload = await request.json();
  const result = await github.submit(payload);
  return Response.json(result);
}

2. Add Provider

"use client";

import { FeedbackProvider } from "@ewjdev/anyclick-react";
import { createHttpAdapter } from "@ewjdev/anyclick-github";

const adapter = createHttpAdapter({ endpoint: "/api/feedback" });

export function Providers({ children }: { children: React.ReactNode }) {
  return <FeedbackProvider adapter={adapter}>{children}</FeedbackProvider>;
}

3. Right-click any element!

That's it! Users can now right-click any element to submit feedback.

Packages

Package Description
@ewjdev/anyclick-core Framework-agnostic core library
@ewjdev/anyclick-react React provider and context menu UI
@ewjdev/anyclick-github GitHub Issues adapter
@ewjdev/anyclick-cursor Cursor Cloud Agent adapter
@ewjdev/anyclick-cursor-local Local Cursor CLI adapter

Documentation

Visit anyclick.ewj.dev for full documentation:

Development

# Install dependencies
yarn install

# Build all packages
yarn build

# Start development mode
yarn dev

# Format code
yarn format

# Create a changeset
yarn changeset

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

MIT © anyclick

About

Capture rich context for every click – and send it to your issues, metrics, and AI tools.

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages