Context7 answers, your interface

Context7 Widget

Add docs chat to your product, docs, or dashboard. Use the Context7 backend, but control the trigger, position, theme, and product feel.

Try it now Customize GitHub
Context7 Widget Docs
Add Context7 answers without sending users away from your product.
Can it match our interface?
Use presets, CSS variables, custom triggers, and events while Context7 handles the docs.
Ask about the docs...Send
Powered byEnhanced by

Who it is for

Same answers. Better surface.

Some teams already use the official script and need styling. Others just want users to find answers without opening support. Both start here.

Already using Context7

Keep the backend. Replace the surface.

Change the script URL. Keep Context7. Add presets, custom triggers, centered dialogs, variables, parts, and events.

New to Context7

Add docs help without building support chat.

Context7 reads your docs. This widget gives visitors a branded place to ask questions on your site.

Product owner

Ship a helpful assistant before a long roadmap.

Start with the script. Developers can move to Vue or TypeScript later without changing the visitor experience.

Documentation as a product surface

The assistant should match the product it explains.

Context7 provides the grounded documentation answers. This widget provides the production layer around them: placement, presets, custom triggers, analytics events, and a styling contract that design systems can trust.

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

Choose an entry point

One widget contract, three ways to ship it.

Start with a script tag. Move to TypeScript helpers or Vue when the widget becomes part of your application code.

01

/widget.js

For static docs, Docusaurus, Astro, marketing pages, and quick product installs. Paste one tag and keep moving.

Open hosted script
02

Core TypeScript

For apps that need typed options, runtime control, script generation, and shared types for framework bindings.

View core package
03

Vue package

For Vue apps that want a component, composable, typed events, managed trigger button, and scoped styles.

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

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

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

<Context7Widget
  library="/owner/repo"
  color="#10b981"
  @question="trackQuestion"
/>

Where it fits

Put docs help where the question happens.

01

Developer dashboards

Put a small trigger in the product shell and answer setup questions before users leave the screen.

02

Guided product moments

Use a centered dialog for deliberate help moments: onboarding, empty states, and pricing or API pages.

03

Custom help entry points

Anchor the widget to a nav item, command palette action, header button, or existing support menu.

04

Framework-ready apps

Use script, TypeScript, or Vue today. React, Nuxt, Svelte, and Angular packages are next on the same core.