Examples/Quick Chat

Quick Chat

Get instant AI-powered answers about any element on your page. Ask questions, get styling tips, accessibility insights, and more - all from the context menu.

Try It

Right-click any element below and click the icon to open Quick Chat:

Card Component

Ask the AI about this card's styles, accessibility, or how to modify it.

AccessibleResponsiveAnimated

Features

  • Auto-focus text field when chat opens
  • Suggested prompts based on element context
  • Streaming AI responses with size limits
  • Context redaction - choose what info to share
  • Pin chat to keep it open across interactions
  • Quick actions: copy, research more, open in chat app

How It Works

1

Right-click any element

The context menu opens with the Quick Chat button (sparkles icon) in the header.

2

Review & redact context

Element info is automatically captured. Click "Edit" to exclude any pieces you don't want to share with the AI.

3

Ask or select a suggestion

Type your question or pick from AI-generated suggestions based on the element.

4

Get instant answers

Responses stream in real-time with quick actions to copy, research more, or open in your favorite chat app.

Implementation

1. Configure the Provider

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 }: { children: React.ReactNode }) {
  return (
    <AnyclickProvider 
      adapter={adapter}
      quickChatConfig={{
        endpoint: '/api/anyclick/chat',
        model: 'gpt-5-nano',
        maxResponseLength: 500,
        showRedactionUI: true,
        showSuggestions: true,
        placeholder: 'Ask about this element...',
        title: 'Quick Ask',
      }}
    >
      {children}
    </AnyclickProvider>
  );
}

2. Create the API Route

app/api/anyclick/chat/route.ts
import { createOpenAI } from "@ai-sdk/openai";
import { streamText, generateText } from "ai";


const openai = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});


export async function POST(request: Request) {
  const { action, context, message, model, maxLength } = await request.json();


  if (action === "suggest") {
    // Generate suggested prompts based on context
    const result = await generateText({
      model: openai(model || "gpt-5-nano"),
      system: "Generate 3-4 short questions about this element...",
      prompt: `Element context: ${context}`,
      maxTokens: 150,
    });
    return Response.json({ suggestions: JSON.parse(result.text) });
  }


  if (action === "chat") {
    // Stream the response
    const result = streamText({
      model: openai(model || "gpt-5-nano"),
      system: `Keep response under ${maxLength} chars. Context: ${context}`,
      prompt: message,
      maxTokens: 300,
    });
    return result.toTextStreamResponse();
  }
}

3. Add Environment Variable

Terminal
# OpenAI API Key for Quick Chat
OPENAI_API_KEY=sk-...

Configuration Options

OptionTypeDefaultDescription
endpointstring/api/anyclick/chatAPI endpoint for chat requests
modelstringgpt-5-nanoAI model for chat responses
maxResponseLengthnumber500Max characters in response
showRedactionUIbooleantrueShow context redaction controls
showSuggestionsbooleantrueShow AI-generated prompt suggestions
systemPromptstring-Custom system prompt for AI

Privacy Note

Quick Chat sends element context to the AI. The redaction UI lets users control exactly what information is shared. No data is stored - each conversation is ephemeral and scoped to the current session.

Explore More

See how Quick Chat works with other anyclick features like screenshot capture and custom menus.

Custom Menu Example