Examples/t3.chat Integration

t3.chat Integration

Select text anywhere on the page and send it directly to t3.chat for AI-powered answers. Perfect for quick research and code questions.

Try It

Select some text below, then right-click and choose "Ask t3.chat" to send it to t3.chat:

Sample Code

function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

Select any part of this code and ask t3.chat about it!

Technical Content

React Server Components allow you to render components on the server and send only the HTML to the client. This reduces the JavaScript bundle size and improves initial page load performance. Combined with Suspense boundaries, you can create streaming SSR experiences.

Error Message

TypeError: Cannot read properties of undefined (reading 'map')

Select this error and ask t3.chat how to fix it!

Features

  • Text Selection Detection - Menu item only appears when text is selected
  • Quick Chat Integration - Send questions from the built-in Quick Chat to t3.chat
  • Pre-filled Query - Selected text is automatically added to the t3.chat input
  • Opens in New Tab - Your workflow isn't interrupted

Setup

Add t3.chat integration to your Anyclick setup:

1. Using the Chrome Preset (Recommended)

app/layout.tsx
import { AnyclickProvider, createPresetMenu } from "@ewjdev/anyclick-react";


// Chrome preset includes t3.chat menu item by default
const chromePreset = createPresetMenu("chrome");


export default function Layout({ children }) {
  return (
    <AnyclickProvider
      adapter={adapter}
      menuItems={chromePreset.menuItems}
    >
      {children}
    </AnyclickProvider>
  );
}

2. Adding to Custom Menus

app/layout.tsx
import {
  AnyclickProvider,
  createT3ChatMenuItem,
} from "@ewjdev/anyclick-react";


const menuItems = [
  { label: "Report Bug", type: "bug", showComment: true },
  { label: "Feature Idea", type: "feature", showComment: true },
  createT3ChatMenuItem(), // Adds "Ask t3.chat" item
];


export default function Layout({ children }) {
  return (
    <AnyclickProvider adapter={adapter} menuItems={menuItems}>
      {children}
    </AnyclickProvider>
  );
}

3. Quick Chat t3.chat Button

The Quick Chat component includes a t3.chat button by default. Users can type a question and send it directly to t3.chat:

app/layout.tsx
import { AnyclickProvider } from "@ewjdev/anyclick-react";


export default function Layout({ children }) {
  return (
    <AnyclickProvider
      adapter={adapter}
      quickChatConfig={{
        endpoint: "/api/anyclick/chat",
        // t3.chat button is enabled by default
        t3chat: {
          enabled: true,
          baseUrl: "https://t3.chat",
        },
      }}
    >
      {children}
    </AnyclickProvider>
  );
}

Standalone Package

For custom integrations, use the t3.chat adapter package directly:

Terminal
npm install @ewjdev/anyclick-t3chat
your-component.tsx
import {
  createT3ChatAdapter,
  getSelectedText,
  hasTextSelection,
} from "@ewjdev/anyclick-t3chat";


const adapter = createT3ChatAdapter({
  baseUrl: "https://t3.chat",
  openInNewTab: true,
});


// Check if text is selected
if (hasTextSelection()) {
  const text = getSelectedText();
  adapter.sendQuery(text);
}


// Or send selected text directly
adapter.sendSelectedText();

Next Steps

Explore more integrations and features:

UploadThing IntegrationQuick ChatTry t3.chat