Add the Chat Widget - Context7 MCP

Add an AI chat widget to your documentation site so visitors can ask questions and get instant answers powered by your library’s documentation on Context7.

The widget is a lightweight JavaScript snippet that renders a floating chat button. When clicked, it opens a chat panel where users can ask questions about your library and receive AI-generated answers grounded in your documentation.

Note

The chat widget is available to library owners who have claimed their library.

How It Works#

A visitor clicks the chat bubble on your site
They type a question about your library
The widget searches your library’s documentation on Context7
An AI model generates an answer using the relevant documentation
The response streams back in real time with markdown formatting

Setup#

Claim Your Library

You must be a verified owner of the library on Context7. If you haven’t claimed it yet, follow the Claim Your Library guide.

Enable the Widget

Navigate to your library’s admin page:

https://context7.com/{owner}/{repo}/admin

Open the Chat tab and toggle Enabled on.

Add Allowed Domains

Add the domains where the widget will be embedded. The widget will only work on domains you explicitly allow.

Examples:

docs.example.com — exact domain match
*.example.com — matches all subdomains (e.g., docs.example.com, blog.example.com) and example.com itself
example.com — matches the root domain only

Warning

The widget will not work on any external site until you add at least one allowed domain.

Save Settings

Click Save changes to persist your widget configuration.

Add the Script Tag

Copy the embed code from the admin panel and add it to your site’s HTML:

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

Place this tag in your root layout or HTML file so the widget loads on every page. The script loads asynchronously and does not block page rendering.

Adding with AI#

You can use an AI coding assistant to add the widget automatically. Copy the following prompt and paste it into Claude Code, Cursor, or any AI coding assistant. Replace /owner/repo with your library ID. The assistant will detect your framework and place the script tag in the correct location.

Add the Context7 chat widget to my documentation site. This is a lightweightJavaScript widget that adds an AI-powered chat assistant to any webpage. Itloads asynchronously and renders a floating chat button.The widget is loaded via a script tag:<script src="https://context7.com/widget.js" data-library="/owner/repo"></script>Detect which framework this project uses and add the widget accordingly. Placeit in the root layout or HTML file so it loads on every page.Optional attributes: data-color (hex color, default #059669), data-position(bottom-right or bottom-left), data-placeholder (input placeholder text),data-welcome-message (initial assistant message shown when the chat opens),data-width (panel width in px, 320-1200, default 400), data-height (panelheight in px, 400-1200, default 600).

Framework Examples#

Use the next/script component in your root layout so the widget loads on every page:

app/layout.tsx

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

Add the script to the scripts array in your Docusaurus config:

docusaurus.config.js

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

Customization#

The widget supports optional attributes for customization:

Attribute	Description	Default
`data-library`	Your library ID (required)	—
`data-color`	Brand color for the widget (hex code)	`#059669`
`data-position`	Widget position on the page	`bottom-right`
`data-placeholder`	Placeholder text in the input field	`Ask about the docs...`
`data-welcome-message`	Initial assistant message shown when the chat opens	Generated from library ID
`data-width`	Chat panel width in pixels (320-1200)	`400`
`data-height`	Chat panel height in pixels (400-1200)	`600`

Examples#

Custom color and position:

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

Custom placeholder text:

<script  src="https://context7.com/widget.js"  data-library="/vercel/next.js"  data-placeholder="Ask me anything about Next.js..."></script>

Custom welcome message:

<script  src="https://context7.com/widget.js"  data-library="/vercel/next.js"  data-welcome-message="Hello! I'm here to help you with the Next.js documentation."></script>

Custom size:

<script  src="https://context7.com/widget.js"  data-library="/vercel/next.js"  data-width="560"  data-height="750"></script>

The panel never grows larger than the browser window. On screens 640px wide or less, the widget always opens as a full-width sheet and ignores these values.

Position Options#

Value	Description
`bottom-right`	Fixed to the bottom-right corner
`bottom-left`	Fixed to the bottom-left corner

Domain Configuration#

Allowed Domains#

You can configure up to 20 allowed domains per library. The widget validates the requesting origin against this list on every chat request.

Pattern	Matches
`docs.example.com`	Only `docs.example.com`
`*.example.com`	Any subdomain: `docs.example.com`, `blog.example.com`, and `example.com` itself
`example.com`	Only the root domain `example.com`

Note

Domain validation is enforced server-side. Requests from domains not in your allowed list are rejected with a 403 error.

Adding and Removing Domains#

Manage domains from the Chat tab on your library’s admin page:

Click Add domain to add a new entry
Enter the domain (e.g., docs.example.com or *.example.com)
Click Save changes to apply changes

To remove a domain, click the X icon next to it and save.