<p>Add a button that instantly opens the current page in ChatGPT, Claude, or T3 Chat so users can ask questions about it—without copying or pasting a thing.</p>
<hr>
<h2>Why Add This Button?</h2>
<p>Sometimes your users get stuck. This button helps them get instant, smart answers from AI using your page content.</p>
<p>It’s especially useful for:</p>
<ul>
<li>Code tutorials and examples</li>
<li>Troubleshooting guides</li>
<li>Complex product features</li>
<li>Learning resources</li>
<li>Any help page where a user might need clarification</li>
</ul>
<p>Instead of making users explain the page to ChatGPT, this button does it for them.</p>
<hr>
<h2>Problems with Traditional Help</h2>
<p>Old-school help systems don’t always cut it:</p>
<ul>
<li>Contact forms take time</li>
<li>FAQs don’t cover everything</li>
<li>Search often misses the point</li>
<li>Live chat needs real people</li>
<li>Users want help <em>now</em></li>
</ul>
<p>This button solves all that by giving users direct, AI-powered assistance based on the exact page they're on.</p>
<hr>
<h2>How It Works</h2>
<p>The idea is simple: We create a button that links to ChatGPT, Claude, and T3 with the current page's URL and title included in the query. These tools then know what the user wants help with.</p>
<hr>
<h2>Step-by-Step Guide</h2>
<h3>1. Create the Button Component</h3>
<p>Create a file called <code>AskAIButton.jsx</code> in your <code>components</code> folder:</p>
<pre><code class="language-jsx">"use client";

import { ChevronDown, ExternalLinkIcon, MessageCircleIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export default function AskAIButton({ slug }) {
  const currentUrl = typeof window !== "undefined" ? window.location.href : "";
  const pageTitle = typeof window !== "undefined" ? document.title : "";

  const q = `Please read the documentation from ${currentUrl} (titled: "${pageTitle}"). I want to discuss or get help with it.`;

  const gpt = `https://chatgpt.com/?${new URLSearchParams({
    hints: "search",
    q,
  })}`;
  const claude = `https://claude.ai/new?${new URLSearchParams({ q })}`;
  const t3 = `https://t3.chat/new?${new URLSearchParams({ q })}`;

  return (
    &#x3C;DropdownMenu>
      &#x3C;DropdownMenuTrigger asChild>
        &#x3C;Button variant="secondary">
          &#x3C;MessageCircleIcon className="size-4" />
          Ask AI
          &#x3C;ChevronDown className="size-4" />
        &#x3C;/Button>
      &#x3C;/DropdownMenuTrigger>
      &#x3C;DropdownMenuContent className="w-56">
        &#x3C;DropdownMenuItem asChild>
          &#x3C;a
            href={gpt}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            ChatGPT &#x3C;ExternalLinkIcon className="size-4 ms-auto" />
          &#x3C;/a>
        &#x3C;/DropdownMenuItem>
        &#x3C;DropdownMenuItem asChild>
          &#x3C;a
            href={claude}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            Claude &#x3C;ExternalLinkIcon className="size-4 ms-auto" />
          &#x3C;/a>
        &#x3C;/DropdownMenuItem>
        &#x3C;DropdownMenuItem asChild>
          &#x3C;a
            href={t3}
            target="_blank"
            rel="noreferrer noopener"
            className="flex gap-2"
          >
            T3 Chat &#x3C;ExternalLinkIcon className="size-4 ms-auto" />
          &#x3C;/a>
        &#x3C;/DropdownMenuItem>
      &#x3C;/DropdownMenuContent>
    &#x3C;/DropdownMenu>
  );
}
</code></pre>
<blockquote>
<p><strong>Note</strong>: This example uses UI components from <a href="https://hextaui.com?ref=preetsuthar.me">HextaUI</a>, but you can replace them with any UI library or plain HTML.</p>
</blockquote>
<hr>
<h3>2. Add the Button to Your Page</h3>
<h4>For a Static Page</h4>
<pre><code class="language-jsx">import AskAIButton from "@/components/AskAIButton";

export default function HelpPage() {
  return (
    &#x3C;div>
      &#x3C;h1>Help Page&#x3C;/h1>
      &#x3C;AskAIButton />
    &#x3C;/div>
  );
}
</code></pre>
<h4>For a Dynamic Blog Page (e.g., <code>[slug].jsx</code>)</h4>
<pre><code class="language-jsx">import AskAIButton from "@/components/AskAIButton";

export default function BlogPost({ params }) {
  return (
    &#x3C;div>
      &#x3C;h1>Blog Post&#x3C;/h1>
      &#x3C;AskAIButton slug={params.slug} />
    &#x3C;/div>
  );
}
</code></pre>
<hr>
<h2>Conclusion</h2>
<p>This small addition can dramatically improve your help experience.</p>
<ul>
<li>Makes help pages interactive</li>
<li>Reduces user frustration</li>
<li>Integrates AI tools seamlessly</li>
<li>Helps users get the answers they need fast</li>
</ul>


Add an Ask AI Button in Next.js

<h2>What is llms.txt?</h2>
<p>The <code>llms.txt</code> file helps artificial intelligence (AI) systems better understand your website by providing a clear outline of your site's structure and content, typically using Markdown syntax. It lists important page URLs and describes their content, making it easier for AI to interpret your site.</p>
<p>Having an accurate <code>llms.txt</code> is important—without it, AI tools may struggle to navigate your website or recognize the relationships between different pages. This can decrease your site's visibility in AI-driven search results.</p>
<p>While <code>llms.txt</code> is similar to <code>robots.txt</code> in that both assist web crawlers, they serve distinct roles. <code>robots.txt</code> controls crawler access, whereas <code>llms.txt</code> focuses on describing your site's content for AI understanding.</p>
<h2>How to Create &#x26; Generate Content for llms.txt</h2>
<p>The first step is to create a new file named <code>llms.txt</code> in the root directory of your website.</p>
<p>To generate content for <code>llms.txt</code>, simply head over to <a href="https://llmstxt.firecrawl.dev/">https://llmstxt.firecrawl.dev/</a>.</p>
<p><img src="https://i.ibb.co/ccQts2Kn/image.png" alt="preview"></p>
<p>Click on <code>Enter Firecrawl API key</code> to enter your Firecrawl API key.</p>
<p>If you don't have one, go to the <a href="https://firecrawl.dev">https://firecrawl.dev</a> website, create a free account, and find your API key.</p>
<p>Once you get the API key, paste it into the llms.txt generator website and hit save.</p>
<p><img src="https://i.ibb.co/cXr7jDBJ/image.png" alt="preview"></p>
<p>Here, you can enter your website URL, and it will automatically generate the content for you. You can also edit the content as per your requirements.</p>
<p>Now, just enter the URL of the website you want to generate the <code>llms.txt</code> for, and click on <code>Generate</code>.</p>
<p>This will automatically generate the content for your <code>llms.txt</code> file, so you can simply copy and paste it into your <code>llms.txt</code> file.</p>
<p><img src="https://i.ibb.co/dshptBL9/image.png" alt="preview"></p>
<p>After generating the content, simply copy it and paste it into your <code>llms.txt</code> file.</p>
<p>Once done, deploy your website and you will find your <code>llms.txt</code> file at <code>https://yourwebsite.com/llms.txt</code>.</p>
<p>Here's an example: <a href="https://hextaui.com/llms.txt">https://hextaui.com/llms.txt</a></p>
<p>Adding <code>llms.txt</code> to your website is a straightforward process that can significantly enhance how AI systems understand and interact with your content. By following the steps outlined above, you can ensure that your site is better equipped for AI-driven applications and search results.</p>
<p>For more information on <code>llms.txt</code>, you can refer to the following resources:</p>
<ul>
<li><a href="https://llmstxt.org/">The /llms.txt file</a></li>
<li><a href="https://docs.firecrawl.dev/">Firecrawl Documentation</a></li>
</ul>


Add llms.txt to your website

<p>When linking two pages in a Next.js application, the built-in <code>&#x3C;Link></code> component allows for seamless client-side navigation. Instead of triggering a full page reload like traditional websites, Next.js uses frontend routing to display the new page instantly, making for a faster user experience.</p>
<p>But that’s not all—Next.js also prefetches linked pages automatically. As soon as a <code>&#x3C;Link></code> element enters the viewport (i.e., becomes visible on screen), Next.js begins preloading the linked page in the background—provided it’s an internal link within your site. This makes navigation nearly instant when users click the link.</p>
<p>However, this prefetching behavior only works in <strong>production mode</strong>. If you're running your app in development with <code>npm run dev</code>, prefetching won't be triggered. To see it in action, stop the dev server, run <code>npm run build</code> to generate your production bundle, and start the app with <code>npm run start</code>.</p>
<p>You can observe this behavior in your browser’s Network tab. Once the page finishes loading (after the <code>load</code> event fires), links that are already visible (i.e., above the fold) start prefetching. Links that are out of view will be prefetched as the user scrolls them into the viewport.</p>
<p>Prefetching happens automatically on fast internet connections (like Wi-Fi or 3G+), unless the browser sends a <code>Save-Data</code> header indicating a preference for reduced data usage.</p>
<p>If you want to disable prefetching for a specific link, you can do so by passing <code>prefetch={false}</code> to the <code>&#x3C;Link></code> component:</p>
<pre><code class="language-jsx">&#x3C;Link href="/contact" prefetch={false}>
  Contact
&#x3C;/Link>
</code></pre>


preet

currently

writing

Add an Ask AI Button in Next.js

Add llms.txt to your website

Prefetching content in Next.js

where i've worked

@21st.devasBrand Ambassador

@InboundasDesign Engineer

work

HextaUI

Sorex Studio

Ikiform