7 Context7 Widget

Script replacement · TypeScript core · Vue bindings

Context7 Widget

A themeable Context7-compatible widget system for product sites that need the docs chat to look native, emit useful events, and still ship through a single hosted script.

Configure GitHub Examples Customize

Documentation as an interface

Readable enough to ship, visual enough to remember.

The page teaches the install paths while demonstrating the design contract: shadow parts, CSS variables, events, custom triggers, and package-level helpers all appear as live surfaces instead of a static README.

Context7 Docs
Ask about setup, API usage, or styles.Use my own trigger?Set data-custom-trigger; the launcher steps aside.
Ask about the docs...
theme.scss
context7-widget {
  --c7-accent: #7cffb2;
  --c7-panel-radius: 8px;
}

context7-widget::part(send-button) {
  text-transform: uppercase;
}
readyopenquestionfirst-tokentool-callanswer-completeerror

Three integration paths

Pick the surface that matches the project.

Replace the script URL, install the core helpers, or use Vue props and composables when the widget belongs inside a component tree.

01

/widget.js

The lowest-friction replacement for existing Context7 users. Keep data-library, swap the script origin.

02

Core TypeScript

Typed helpers for creating widgets, generating copy-paste script tags, and controlling instances from app code.

03

Vue package

A Vue 3 component, composable, plugin helper, typed events, and optional SCSS-built trigger styles.

Drop-in script
<script
  async
  src="https://context7.desource-labs.org/widget.js"
  data-library="/vercel/next.js"
  data-color="#10b981"
></script>
Core package
pnpm add @desource/context7-widget

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

mountContext7Widget({
  library: "/vercel/next.js",
  theme: "auto",
  color: "#10b981"
});
Vue package
pnpm add @desource/context7-widget-vue

<Context7Widget
  library="/vercel/next.js"
  color="#10b981"
  @question="trackQuestion"
/>

Live configuration

Tune the widget contract before you paste it.

Change the runtime props, inspect the script tag, then open the same widget instance from the custom trigger.

Theme
Accent
/widget.js
<script src="https://context7.desource-labs.org/widget.js" async data-backdrop="false" data-close-on-outside-click="true" data-custom-trigger="#context7-lab-trigger" data-launcher-label="Ask docs" data-launcher-variant="pill" data-library="/desource-labs/context7-widget" data-panel-height="460px" data-panel-width="440px" data-placeholder="Ask integration questions..." data-position="anchor" data-preset="glass" data-theme="auto"></script>
Vue component
<Context7Widget
  library="/desource-labs/context7-widget"
  <!-- color omitted: preset owns the action color -->
  theme="auto"
  position="anchor"
  preset="glass"
  launcher-variant="pill"
  :backdrop="false"
  :close-on-outside-click="true"
  panel-height="460px"
  custom-trigger="#context7-lab-trigger"
  launcher-label="Ask docs"
  placeholder="Ask integration questions..."
  @question="trackQuestion"
/>
Questions 0Completed answers 0Widget id site-lab

Use cases

Useful beyond a prettier launcher.

01

Design-system theming

Expose custom properties and shadow parts so the widget can match dense dashboards, editorial docs, or launch pages.

02

Product instrumentation

Listen for question, first-token, answer-complete, tool-call, and error events for analytics or user research.

03

Custom triggers

Bind the widget to a header button, command palette, or support menu item; the launcher hides automatically.

04

One runtime, many hosts

Use the same runtime from plain HTML, framework code, Vue apps, and this Nuxt information site.

Maintenance loop

Upstream stays visible.

The scanner keeps the official Context7 widget snapshot in the repository and opens an issue when the unversioned script changes, so compatibility work is explicit instead of accidental.

Daily scanner
pnpm scan:upstream

# stores:
# upstream/context7-widget.latest.js
# upstream/context7-widget.normalized.js
# upstream/context7-widget.sha256