Examples

Try the widget before you install it.

Test trigger modes, positions, presets, and generated snippets. Pick the version that fits your app today.

Try constructorSee positions
Context7 Widget Docs
Test position, preset, trigger mode, and panel size before touching your app.
Show the Vue setup.
Copy a component, composable, core helper, or hosted script from the same constructor.
Ask integration questions...Send
Powered byEnhanced by

Live constructor

Make decisions visually, then copy the integration.

The constructor renders a real widget instance. Try copy, position, preset, trigger mode, panel size, and behavior first; then copy the script, Vue, or core TypeScript version.

Constructor controlsContent
Identity
Texts
Live preview · glass · anchorOpen in new tab
<Context7Widget
  library="/desource-labs/context7-widget"
  title="Context7 Widget Docs"
  initial-message="Hello! I'm here to help with **{library}** docs. Ask about setup, props, events, styling, or integration patterns."
  placeholder="Ask integration questions..."
  theme="auto"
  position="anchor"
  preset="glass"
  custom-trigger
  launcher-variant="pill"
  launcher-label="Ask docs"
  panel-width="440px"
  panel-height="460px"
  :backdrop="false"
  :close-on-outside-click="true"
  :default-open="false"
  widget-id="docs-widget"
  @question="trackQuestion"
  @answer-complete="trackAnswer"
>
  <template #trigger="{ label }">
    <span class="docs-trigger-dot" />
    {{ label }}
  </template>
</Context7Widget>

Position use cases

Corner, centered, and anchored entry points.

Fixed corner works for classic docs pages. Centered dialog works when users ask for help intentionally. Anchored popovers work when the assistant belongs to your navigation, dashboard, command palette, or support menu.

Terminal preset

Centered dialog with backdrop and outside-click close.

Centered script
<button id="docs-help">Open centered help</button>

<script
  async
  src="https://context7.desource-labs.org/widget.js"
  data-library="/owner/repo"
  data-custom-trigger="#docs-help"
  data-position="center"
  data-preset="terminal"
  data-backdrop="true"
  data-close-on-outside-click="true"
></script>
Docs shell
Anchored to the trigger

Best for nav bars, command menus, dashboards, and custom design systems.

Vue anchored trigger
<button id="docs-trigger">Ask docs</button>

<Context7Widget
  library="/owner/repo"
  custom-trigger="docs-trigger"
  position="anchor"
  preset="glass"
  panel-height="420px"
  panel-width="420px"
/>

Fixed corner

Click the button to open a real bottom-right widget, the same placement used by script installs.

Official-compatible
<script
  async
  src="https://context7.desource-labs.org/widget.js"
  data-library="/owner/repo"
  data-preset="minimal"
  data-position="bottom-right"
  data-placeholder="Ask about the docs..."
></script>

Customization examples

Presets get you close. Variables make it yours.

minimal

Quiet product UI with low visual noise.

glass

Layered translucent surface for rich demos.

neo

Hard-edged playful docs widget.

terminal

Monospace assistant for dev-tool pages.

brutalist

High-contrast editorial surface.

Preset color fallback
<script
  async
  src="https://context7.desource-labs.org/widget.js"
  data-library="/owner/repo"
  data-preset="neo"
></script>

<!-- data-color is omitted, so neo owns the button color. -->
Managed Vue trigger
<Context7Widget
  library="/owner/repo"
  custom-trigger
  position="anchor"
  preset="glass"
  launcher-label="Ask docs"
/>
Trigger slot
<Context7Widget
  library="/owner/repo"
  custom-trigger
  position="anchor"
  preset="neo"
>
  <template #trigger="{ label, triggerId }">
    <span :data-trigger-id="triggerId" class="my-docs-button__dot" />
    {{ label }}
  </template>
</Context7Widget>
External trigger id
<button id="docs-trigger">Ask docs</button>

<Context7Widget
  library="/owner/repo"
  custom-trigger="docs-trigger"
  position="anchor"
  panel-width="420px"
/>
CSS overrides
context7-widget {
  --c7-accent: #ff6f91;
  --c7-panel-radius: 8px;
  --c7-launcher-radius: 8px;
}

context7-widget::part(send-button) {
  min-width: 5rem;
}
Core helper
import { mountContext7Widget } from "@desource/context7-widget";

mountContext7Widget({
  library: "/owner/repo",
  position: "center",
  preset: "neo",
  backdrop: true,
  closeOnOutsideClick: true,
  launcherVariant: "pill",
  launcherLabel: "Ask docs"
});
Vue composable
const docs = useContext7Widget({
  autoMount: true,
  library: "/owner/repo",
  widgetId: "docs",
  preset: "minimal"
});

await docs.send("Show installation examples");