Examples/Basic Setup

Basic Setup

The simplest possible anyclick implementation. Uses default menu items and minimal configuration.

Right-click any of these.

Card Component

A sample card. Right-click it to report an issue or request a feature.

Tag 1Tag 2Tag 3

What's different: nothing. This is the default menu (issue, feature, like) with a scoped provider and the GitHub adapter behind /api/feedback. Every other example changes one thing about this.

app/providers.tsx

'use client';

import { AnyclickProvider } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-github';

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

export function Providers({ children }) {
  return (
    <AnyclickProvider adapter={adapter} scoped>
      {children}
    </AnyclickProvider>
  );
}

What You Get

Right-click context menu on any element
Three default feedback types: Issue, Feature, Like
Full DOM context capture (selector, text, HTML)
Page context (URL, viewport, timestamp)
Optional comment field

Implementation

1. Create the Provider

app/providers.tsx

'use client';

import { AnyclickProvider } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-github';

// Create adapter pointing to your API
const adapter = createHttpAdapter({
  endpoint: '/api/feedback',
});

export function Providers({ children }: { children: React.ReactNode }) {
  // That's it! Default menu items are automatically included
  return (
    <AnyclickProvider adapter={adapter}>
      {children}
    </AnyclickProvider>
  );
}

2. Wrap Your App

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>
  );
}

3. Create API Route

app/api/feedback/route.ts

import { createGitHubAdapter } from '@ewjdev/anyclick-github/server';
import type { AnyclickPayload } 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) {
  const payload: AnyclickPayload = await request.json();
  const result = await github.createIssue(payload);
  return Response.json(result);
}

Default Menu Items

When no menuItems prop is provided, these defaults are used:

const defaultMenuItems = [
  { type: 'issue', label: 'Report an issue', showComment: true },
  { type: 'feature', label: 'Request a feature', showComment: true },
  { type: 'like', label: 'I like this!', showComment: false },
];

Ready for more?

Check out the custom menu example to learn how to customize the feedback menu with your own branding, icons, and role-based items.

Custom Menu Example