How to Integrate the Context7 Chat Widget with Your Application

Integrate the Context7 chat widget by adding a single script tag from https://context7.com/widget.js to your site's HTML after claiming and enabling your library in the Context7 admin panel.

The Context7 chat widget is a lightweight JavaScript solution that embeds an AI-powered documentation assistant directly into your website. According to the upstash/context7 repository, this widget streams real-time answers from your library's indexed documentation, helping visitors find precise information without leaving your site.

What Is the Context7 Chat Widget?

The Context7 chat widget is a client-side script that renders a floating chat interface on your documentation pages. When a visitor submits a question, the widget queries your library's documentation stored on Context7, generates an answer using a large language model (LLM), and streams the response back in real-time.

The widget loads asynchronously from https://context7.com/widget.js and requires no build-step integration. It communicates with the Context7 backend to retrieve context-specific answers based on your documentation corpus.

Prerequisites for Integrating the Context7 Chat Widget

Before adding the script to your site, you must complete three administrative steps in the Context7 platform. These steps are documented in docs/howto/chat-widget.mdx.

Claim Your Library

You must be a verified owner of the library to enable the chat widget. Navigate to your library's page on Context7 and complete the verification process to claim ownership. Only claimed libraries can activate the widget functionality.

Enable the Widget and Whitelist Domains

Once verified, access your library's admin page at https://context7.com/{owner}/{repo}/admin. Under the Chat tab, toggle the widget to enabled. You must also specify allowed domains—the widget only functions on URLs you explicitly whitelist. You can specify exact domains (e.g., docs.example.com), wildcard subdomains (e.g., *.example.com), or root domains (e.g., example.com).

How to Add the Context7 Chat Widget to Your Site

After completing the prerequisites, integrate the widget by inserting a single script tag into your site's HTML. The script requires a data-library attribute containing your library identifier in the format /owner/repo.

Standard HTML Integration

Place the following script tag in the <head> or at the end of the <body> of your HTML document:

<script
  src="https://context7.com/widget.js"
  data-library="/owner/repo"
></script>

Replace /owner/repo with your actual library path (e.g., /vercel/next.js or /upstash/redis-js).

Next.js Integration

For Next.js applications using the App Router, add the script to your root layout file (typically app/layout.tsx) using the next/script component:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://context7.com/widget.js"
          data-library="/owner/repo"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

The afterInteractive strategy ensures the widget loads after the page becomes interactive, minimizing impact on initial page load performance.

Docusaurus Integration

For Docusaurus sites, add the widget to your docusaurus.config.js file in the scripts array:

export default {
  // ... other configuration
  scripts: [
    {
      src: "https://context7.com/widget.js",
      "data-library": "/owner/repo",
      async: true,
    },
  ],
};

Docusaurus automatically injects these scripts into every page during the build process.

Customizing the Widget Appearance

You can customize the widget's appearance and behavior using additional data-* attributes on the script tag. As documented in docs/howto/chat-widget.mdx, the following options are available:

<script
  src="https://context7.com/widget.js"
  data-library="/vercel/next.js"
  data-color="#0070F3"
  data-position="bottom-left"
  data-placeholder="Ask me anything about Next.js..."
></script>

• data-color: Sets the primary color of the chat button and interface (hex color code).
• data-position: Controls the placement of the chat button. Accepts bottom-right (default) or bottom-left.
• data-placeholder: Customizes the placeholder text in the chat input field.

How the Context7 Chat Widget Works

When a visitor loads a page containing the widget script, the following process occurs:

1. Script Loading: The browser asynchronously loads public/widget.js from the Context7 CDN.
2. UI Rendering: The script injects a floating chat button into the DOM at the specified position.
3. Query Processing: When a user submits a question, the widget sends the query to Context7's API along with your library identifier.
4. Context Retrieval: The backend retrieves relevant documentation chunks from your indexed library.
5. Response Generation: An LLM generates an answer using the retrieved context and streams the response back to the widget in real-time.

This architecture ensures that answers are always grounded in your actual documentation, reducing hallucinations while providing immediate assistance to your users.

Summary

• Claim and verify your library ownership on Context7 before enabling the widget.
• Whitelist specific domains in the admin panel to control where the widget can operate.
• Add a single script tag pointing to https://context7.com/widget.js with your data-library identifier.
• Customize appearance using data-color, data-position, and data-placeholder attributes.
• The widget streams real-time, documentation-grounded answers from an LLM using your indexed content.

Frequently Asked Questions

Do I need to be the library owner to integrate the Context7 chat widget?

Yes, you must be a verified owner of the library to enable the chat widget. The verification process ensures that only authorized maintainers can embed AI assistants that represent the official documentation. You can initiate the claiming process from your library's page on Context7.

Can I use the Context7 chat widget on multiple domains?

Yes, but you must explicitly whitelist each domain in your library's admin settings. The widget validates the current page's domain against your allowlist before initializing. You can specify exact domains (e.g., docs.example.com), wildcard subdomains (e.g., *.example.com), or root domains to cover all subpaths.

Does the Context7 widget support server-side rendering (SSR)?

The widget is designed for client-side execution and loads asynchronously via the widget.js script. For SSR frameworks like Next.js, you should use the next/script component with the afterInteractive strategy to ensure the widget loads only after hydration completes. This prevents server-client mismatches while maintaining performance.

How do I update the appearance of the Context7 chat widget after deployment?

You can modify the widget's appearance by updating the data-* attributes on the script tag. Changes to data-color, data-position, or data-placeholder take effect immediately on the next page load without requiring redeployment of your application. For dynamic updates, you can remove and re-inject the script with new attributes, though a simple page refresh is typically sufficient.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}