Free, open-source widget upgrade

Context7 chat, your design.

Your site has a design of its own. Give Context7 docs chat the same attention, with your fonts, colors, and help button, plus a better experience for readers.

Try the upgrade Customize GitHub

Why we built it

Your docs widget should look like it belongs.

Context7 provides its docs widget and hosted AI answers for free. The official widget has basic styling options, which can leave the chat feeling out of place on a carefully designed page. We built this upgrade so you can give the assistant the same care as the rest of your product.

Context7 made docs chat free for library owners. We built on that initiative with a free, open-source interface you can make your own. Context7 continues to host the documentation search and AI answers.

Already using Context7

Upgrade your existing widget.

Replace the official script URL with ours. Your library and allowed domains carry over. Then style the widget to match your site.

New to Context7

Help visitors try your product.

Let visitors ask about capabilities, find a code example, and work through setup while they explore your site.

Product owner

Keep your design in every detail.

Match the fonts, spacing, buttons, and colors you have already chosen. Put chat in the corner, beside a trigger, or in a centered dialog.

Designed for your app

Style every part of the conversation.

Set the type, spacing, colors, and panel shape. Open it from your own help button. Visitors can copy code, ask multiline questions, stop a response, or retry. When they scroll up to read, the conversation stays put.

theme.scss

context7-widget {
  --c7-accent: #7cffb2;
  --c7-panel-radius: 8px;
}

context7-widget::part(send-button) {
  text-transform: uppercase;
}

readyopencancelquestionfirst-tokentool-callanswer-completeerror

Make the switch

Choose the integration for your stack.

Already using the official widget? Replace its script URL with ours and keep your library settings. For a new integration, choose the script or a native package for your framework.

New to Context7? Claim your library, enable its widget in Admin → Chat, and allow your site's domain. Replace /owner/repo below with your library id.

Context7 setup

/widget.js

Replace the official script URL or add one tag to a new site. Works with static pages, docs, and marketing sites.

Open hosted script

Core TypeScript

Mount and control the widget with TypeScript, generate script tags, or build your own interface from shared helpers.

View core package

Vue package

Add a native Vue component, style it with your CSS, and open it from a slot or the composable.

View Vue package

Nuxt module

View Nuxt module

React package

Use a native React component with controlled state, typed callbacks, custom triggers, and a hook.

View React package

Svelte package

Use Svelte 5 snippets for your trigger, bind visibility, and control chat through a reactive controller.

View Svelte package

Angular package

Add a standalone component with signals, app defaults, custom trigger content, and an injectable service.

View Angular package

Drop-in script

<script
  async
  src="https://context7.desourcelabs.com/widget.js"
  data-library="/owner/repo"
  data-color="#10b981"
></script>

Core package

npm install @desource/context7-widget

import { mountContext7Widget } from "@desource/context7-widget";

mountContext7Widget({
  library: "/owner/repo",
  theme: "auto",
  color: "#10b981"
});

Vue package

npm install @desource/context7-widget-vue

<script setup>
import { Context7Widget } from "@desource/context7-widget-vue";
import "@desource/context7-widget-vue/styles.css";
</script>

<template>
  <Context7Widget library="/owner/repo" color="#10b981" />
</template>

Nuxt module

npm install @desource/context7-widget-nuxt

export default defineNuxtConfig({
  modules: ["@desource/context7-widget-nuxt"],
  context7Widget: {
    defaults: { library: "/owner/repo", preset: "glass" }
  }
});

React package

npm install @desource/context7-widget-react

import { Context7Widget } from "@desource/context7-widget-react/component";
import "@desource/context7-widget-react/styles.css";

export function DocsHelp() {
  return <Context7Widget library="/owner/repo" color="#10b981" />;
}

Svelte package

npm install @desource/context7-widget-svelte

<script>
import { Context7Widget } from "@desource/context7-widget-svelte";
import "@desource/context7-widget-svelte/styles.css";
</script>

<Context7Widget
  library="/owner/repo"
  preset="glass"
  customTrigger
/>

Angular package

npm install @desource/context7-widget-angular

// In styles.css: @import '@desource/context7-widget-angular/styles.css';
import { Component } from "@angular/core";
import { Context7Widget } from "@desource/context7-widget-angular";

@Component({
  selector: 'docs-help',
  imports: [Context7Widget],
  template: `<context7-widget
    library="/owner/repo"
    preset="glass"
    [customTrigger]="true"
  />`
})
export class DocsHelp {}

Where it fits

Help people go from browsing to building.

Product discovery

Answer questions about features and integration on your product pages, while visitors decide whether your library fits.

The first integration

Give new users a place to ask about setup and copy an example as they work through their first integration.

Documentation sites

Add chat beside your docs navigation so readers can ask a follow-up question without losing their place.

In-product help

Open help from an empty state, dashboard, or existing support menu, with the same styling as the rest of your app.