Getting Started

Get anyclick running in your React application in under 5 minutes.

Prerequisites

Node.js 18.18.0 or later
React 19+ application (Next.js 14+, Vite, etc.)
GitHub repository (for GitHub Issues integration)

Step 1: Install Packages

Install the core packages you need. For a typical React + GitHub setup:

Terminal

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

Package Overview

@ewjdev/anyclick-react – React provider and UI components
@ewjdev/anyclick-github – GitHub Issues adapter
@ewjdev/anyclick-core – Automatically included as a dependency

Step 2: Set Up Environment Variables

Create a GitHub Personal Access Token with repo scope and add it to your environment:

.env.local

GITHUB_TOKEN=ghp_your_token_here
GITHUB_REPO=your-username/your-repo-name

⚠️ Security Note

Never expose your GitHub token to the browser. The token should only be used server-side in your API route.

Step 3: Create an API Route

Create a server-side API route that receives feedback and creates GitHub Issues:

app/api/feedback/route.ts

import { createGitHubAdapter } from '@ewjdev/anyclick-github/server';
import type { FeedbackPayload } from '@ewjdev/anyclick-core';

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) {
  try {
    const payload: FeedbackPayload = await request.json();
    const result = await github.submit(payload);
    
    return Response.json(result);
  } catch (error) {
    console.error('Feedback submission failed:', error);
    return Response.json(
      { success: false, error: 'Failed to create issue' },
      { status: 500 }
    );
  }
}

Step 4: Add the Provider

Wrap your application with the FeedbackProvider:

app/providers.tsx

'use client';

import { FeedbackProvider } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-github';
import type { ReactNode } from 'react';

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

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

Then use the provider in your layout:

app/layout.tsx

import { Providers } from './providers';

export default function RootLayout({ 
  children 
}: { 
  children: React.ReactNode 
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Step 5: Test It Out

Start your development server and right-click any element in your app:

Terminal

npm run dev

You're all set!

Right-click any element, select a feedback type, add a comment, and submit. A new GitHub Issue will be created with all the captured context.

Configuration Options

The FeedbackProvider accepts several configuration options:

Prop	Type	Description
`adapter`	FeedbackAdapter	Required. The adapter for submitting feedback.
`menuItems`	FeedbackMenuItem[]	Custom menu items (default: issue, feature, like)
`metadata`	Record<string, unknown>	Additional data to include with every submission
`highlightConfig`	HighlightConfig	Configure element highlighting behavior
`screenshotConfig`	ScreenshotConfig	Configure screenshot capture settings
`disabled`	boolean	Disable feedback capture entirely

Next Steps

React Provider

Learn about all provider props and customization options.

Adapters

Connect to Cursor AI agents or build custom adapters.

Examples

See anyclick in action with interactive examples.

Core Library

Deep dive into the core API and build custom integrations.