### Development Setup Commands

Source: https://github.com/desource-labs/context7-widget/blob/main/CONTRIBUTING.md

Initial setup commands to install dependencies, build the project, prepare development files, and start the demo.

```bash
pnpm install
pnpm build
pnpm dev:prepare
pnpm dev:demo
```

--------------------------------

### Install @desource/context7-widget-nuxt

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/nuxt/README.md

Install the Nuxt module with pnpm.

```bash
pnpm add @desource/context7-widget-nuxt
```

--------------------------------

### Install the React widget package

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/react/README.md

Install the @desource/context7-widget-react package via npm.

```bash
npm install @desource/context7-widget-react
```

--------------------------------

### Install and import stylesheet

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/svelte/README.md

Install the package and import the widget stylesheet once. The stylesheet import is required for the widget to render correctly.

```bash
npm install @desource/context7-widget-svelte
```

```ts
import '@desource/context7-widget-svelte/styles.css';
```

--------------------------------

### Local Development Commands

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Run the standard local development workflow for the monorepo: install dependencies, lint, build, run unit and e2e tests, prepare the dev environment, and start the demo site. The demo site builds every package, copies packages/core/dist/widget.js into demo/public/widget.js, then runs Nuxt.

```bash
pnpm install
pnpm lint
pnpm build
pnpm test:unit
pnpm test:e2e
pnpm dev:prepare
pnpm dev:demo
```

--------------------------------

### Install core TypeScript package

Source: https://github.com/desource-labs/context7-widget/blob/main/docs/INTEGRATION.md

Install the core @desource/context7-widget package via npm.

```bash
npm install @desource/context7-widget
```

--------------------------------

### React component: install and render Context7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/docs/INTEGRATION.md

Install the React package and render the component with controlled open state and event callbacks. The component accepts library, position, preset, customTrigger, and onQuestion props.

```bash
npm install @desource/context7-widget-react
```

```tsx
import { useState } from 'react';
import { Context7Widget } from '@desource/context7-widget-react/component';
import '@desource/context7-widget-react/styles.css';

export function DocsAssistant() {
  const [open, setOpen] = useState(false);

  return (
    <Context7Widget
      library="/owner/repo"
      open={open}
      onOpenChange={setOpen}
      position="anchor"
      preset="glass"
      customTrigger
      onQuestion={(detail) => analytics.track('Docs question', detail)}
    />
  );
}
```

--------------------------------

### Install Playwright Browsers

Source: https://github.com/desource-labs/context7-widget/blob/main/CONTRIBUTING.md

Installs Playwright browsers needed for e2e tests if they are not already installed locally.

```bash
pnpm exec playwright install chromium firefox webkit
```

--------------------------------

### Install @desource/context7-widget-vue with npm

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/vue/README.md

Install the Vue widget package using npm. This is the first step before importing the component or styles.

```bash
npm install @desource/context7-widget-vue
```

--------------------------------

### Conventional Commit Examples

Source: https://github.com/desource-labs/context7-widget/blob/main/CONTRIBUTING.md

Example Conventional Commit messages with recommended scopes such as core, vue, docs, test, and chore.

```text
feat(core): add preset option
fix(vue): normalize custom trigger ids
docs(readme): add CSP example
test(core): cover loader compatibility
chore(ci): add release workflow
```

--------------------------------

### Using the useContext7Widget composable

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/vue/README.md

Example of initializing the widget with autoMount enabled and triggering a message send via a button click.

```vue
<script setup lang="ts">
import { useContext7Widget } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';

const docs = useContext7Widget({
  autoMount: true,
  library: '/owner/repo',
  position: 'center',
  preset: 'terminal',
  widgetId: 'docs'
});

async function ask() {
  await docs.send('How do I customize the widget?');
  console.log(docs.isOpen.value, docs.isBusy.value, docs.messages.value);
}
</script>

<template>
  <button type="button" @click="ask">Ask documentation</button>
</template>
```

--------------------------------

### Angular: install and use Context7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Install and use the Context7 widget in an Angular application. Import the styles.css once in the application stylesheet or build configuration.

```bash
npm install @desource/context7-widget-angular
```

```ts
import { Component } from '@angular/core';
import { Context7Widget } from '@desource/context7-widget-angular';

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

--------------------------------

### React: install and use Context7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Install and use the Context7 widget in a React application. The component accepts library, position, preset, and customTrigger props.

```bash
npm install @desource/context7-widget-react
```

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

export function DocsAssistant() {
  return <Context7Widget library="/owner/repo" position="anchor" preset="glass" customTrigger />;
}
```

--------------------------------

### Install @desource/context7-widget-angular

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/angular/README.md

Install the Angular widget package via npm. Angular 22 is required.

```bash
npm install @desource/context7-widget-angular
```

--------------------------------

### Angular: Install and use Context7Widget standalone component

Source: https://github.com/desource-labs/context7-widget/blob/main/docs/INTEGRATION.md

Install the Angular package, import its styles.css once, and add the standalone component. Context7WidgetService exposes signal state and imperative controls; add provideContext7Widget(...) to bootstrapApplication or route providers for defaults without mounting anything.

```bash
npm install @desource/context7-widget-angular
```

```ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Context7Widget, type Context7WidgetQuestionEventDetail } from '@desource/context7-widget-angular';

@Component({
  selector: 'app-docs-assistant',
  standalone: true,
  imports: [Context7Widget],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <context7-widget
      library="/owner/repo"
      position="anchor"
      preset="glass"
      [customTrigger]="true"
      (question)="trackQuestion($event)"
    />
  `
})
export class DocsAssistant {
  trackQuestion(detail: Context7WidgetQuestionEventDetail): void {
    analytics.track('Docs question', detail);
  }
}
```

--------------------------------

### TypeScript: install and mount Context7 widget

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Install and initialize the Context7 widget in a TypeScript application using the mountContext7Widget function. Configure library, position, preset, backdrop, and closeOnOutsideClick options.

```bash
npm install @desource/context7-widget
```

```ts
import { mountContext7Widget } from '@desource/context7-widget';

mountContext7Widget({
  library: '/owner/repo',
  position: 'center',
  preset: 'glass',
  backdrop: true,
  closeOnOutsideClick: true
});
```

--------------------------------

### Enter beta prerelease mode and version changesets

Source: https://github.com/desource-labs/context7-widget/blob/main/RELEASE.md

Starts a prerelease cycle by entering the beta pre mode, adding a changeset, and consuming changesets to update versions and changelogs. Commit the versioned files and use the same reviewed release pull request; do not publish locally. For another prerelease, add a changeset and run pnpm changeset:version again. To return to stable releases, run pnpm changeset pre exit, apply pnpm changeset:version, and open the final release pull request.

```bash
pnpm changeset pre enter beta
pnpm changeset
pnpm changeset:version
```

--------------------------------

### Svelte: Install and use Context7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/docs/INTEGRATION.md

Install the Svelte package and use the Context7Widget component with bind:open, library, position, preset, customTrigger, and onQuestion. The component and controller imports are SSR-safe; DOM work begins only after mount.

```bash
npm install @desource/context7-widget-svelte
```

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

  let open = $state(false);
</script>

<Context7Widget
  bind:open
  library="/owner/repo"
  position="anchor"
  preset="glass"
  customTrigger
  onQuestion={(detail) => analytics.track('Docs question', detail)}
/>
```

--------------------------------

### Nuxt: install and configure Context7 widget module

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Install and configure the Context7 widget in a Nuxt application. The module auto-imports <Context7Widget /> and useContext7Widget().

```bash
npm install @desource/context7-widget-nuxt
```

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

--------------------------------

### Controlled open state example

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/react/README.md

Example of using the open and onOpenChange props to control the widget's open state from application state.

```tsx
const [docsOpen, setDocsOpen] = useState(false);

<Context7Widget library="/owner/repo" open={docsOpen} onOpenChange={setDocsOpen} />;
```

--------------------------------

### Vue: install and use Context7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Install and use the Context7 widget in a Vue application. The component accepts library, position, preset, theme, and an event handler for the 'question' event.

```bash
npm install @desource/context7-widget-vue
```

```vue
<script setup lang="ts">
import { Context7Widget, type Context7WidgetQuestionEventDetail } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';

function trackQuestion(detail: Context7WidgetQuestionEventDetail) {
  console.log(detail.library, detail.question);
}
</script>

<template>
  <Context7Widget library="/owner/repo" position="anchor" preset="glass" theme="auto" @question="trackQuestion" />
</template>
```

--------------------------------

### Create the release branch

Source: https://github.com/desource-labs/context7-widget/blob/main/RELEASE.md

Start from an up-to-date main branch and create a release branch. Replace X.Y.Z with the intended version.

```bash
git switch main
git pull --ff-only
git switch -c chore/release-X.Y.Z
```

--------------------------------

### Svelte: install and use Context7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Install and use the Context7 widget in a Svelte application. The component supports bind:open for controlling the open state.

```bash
npm install @desource/context7-widget-svelte
```

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

  let open = $state(false);
</script>

<Context7Widget bind:open library="/owner/repo" position="anchor" preset="glass" customTrigger />
```

--------------------------------

### Use the Context7Widget component

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/react/README.md

Example of using the Context7Widget component with a ref, custom trigger, and onQuestion handler. Replace /owner/repo with your library's id.

```tsx
import { useRef } from 'react';
import { Context7Widget, type Context7WidgetHandle } from '@desource/context7-widget-react/component';
import '@desource/context7-widget-react/styles.css';

export function DocsAssistant() {
  const widget = useRef<Context7WidgetHandle>(null);

  return (
    <Context7Widget
      ref={widget}
      library="/owner/repo"
      position="anchor"
      preset="glass"
      customTrigger
      launcherLabel="Ask docs"
      onQuestion={(detail) => console.log(detail.question)}
    />
  );
}
```

--------------------------------

### Configure global styles in Nuxt

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/vue/README.md

Equivalent global setup for Nuxt, adding the stylesheet to the Nuxt configuration's css array.

```ts
export default defineNuxtConfig({
  css: ['@desource/context7-widget-vue/styles.css']
});
```

--------------------------------

### Nuxt module: install, configure defaults, and use Context7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/docs/INTEGRATION.md

Install the Nuxt module, configure global defaults in nuxt.config, and use the auto-imported component. The module adds the Vue stylesheet before application CSS and auto-imports Context7Widget and useContext7Widget; set component, composable, or css to false when unused.

```bash
npm install @desource/context7-widget-nuxt
```

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

```vue
<template>
  <Context7Widget position="anchor" custom-trigger />
</template>
```

--------------------------------

### Useful Commands

Source: https://github.com/desource-labs/context7-widget/blob/main/CONTRIBUTING.md

Common development commands for formatting, linting, testing, building, size checking, and validating packages.

```bash
pnpm format
pnpm lint
pnpm lint:fix
pnpm test:unit
pnpm test:e2e
pnpm test:unit:coverage
pnpm build
pnpm build:all
pnpm size:check
pnpm validate:packages
pnpm check:release
```

--------------------------------

### Configure Context7 widget with preset, theme, and position

Source: https://github.com/desource-labs/context7-widget/blob/main/README.md

Configure the widget with a preset, theme, and position. Replace /owner/repo with your library's id. The data-placeholder sets the input placeholder text.

```html
<script
  async
  src="https://context7.desourcelabs.com/widget.js"
  data-library="/owner/repo"
  data-position="anchor"
  data-preset="glass"
  data-theme="auto"
  data-placeholder="Ask about setup, API usage, or examples..."
></script>
```

--------------------------------

### Create a changeset with pnpm changeset

Source: https://github.com/desource-labs/context7-widget/blob/main/RELEASE.md

Run this command to create a changeset for a publishable change. Select every public package, choose the same semver bump, and write a complete user-facing summary.

```bash
pnpm changeset
```

--------------------------------

### Run the release gate with pnpm check:release

Source: https://github.com/desource-labs/context7-widget/blob/main/RELEASE.md

Run the complete release gate before committing. Verify all six package.json files contain the intended version, all six changelogs contain the release summary, packages/core/CHANGELOG.md has the content wanted for the GitHub release, all temporary changeset files were consumed, and no unrelated files changed.

```bash
pnpm check:release
```

--------------------------------

### Use Context7Widget component with event tracking

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/vue/README.md

Vue component example showing how to use the Context7Widget with a question event handler. The library prop should be replaced with your claimed library's id.

```vue
<script setup lang="ts">
import { Context7Widget, type Context7WidgetQuestionEventDetail } from '@desource/context7-widget-vue';
import '@desource/context7-widget-vue/styles.css';

function trackQuestion(detail: Context7WidgetQuestionEventDetail) {
  console.log(detail.library, detail.question);
}
</script>

<template>
  <Context7Widget library="/owner/repo" position="anchor" preset="glass" theme="auto" @question="trackQuestion" />
</template>
```

--------------------------------

### Vue Context7Widget trigger CSS variables

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/vue/README.md

Customizes the trigger button appearance using the dedicated trigger CSS variables. See the live customization guide for every public token and part.

```css
.context7-widget-trigger {
  --c7-trigger-background: #111827;
  --c7-trigger-border: rgba(255, 255, 255, 0.16);
  --c7-trigger-color: #f8fafc;
  --c7-trigger-focus: rgba(124, 255, 178, 0.42);
  --c7-trigger-radius: 8px;
  --c7-trigger-shadow: none;
}
```

--------------------------------

### Reactive controller with createContext7Widget

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/svelte/README.md

Use the createContext7Widget reactive controller to own a programmatic widget. Mount it on mount and unmount on cleanup. The controller exposes reactive element, isOpenState, isBusyState, and messages getters plus the full imperative API. mount(overrides) creates or updates one owned widget; update(options) applies live options without replacing it.

```svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { createContext7Widget } from '@desource/context7-widget-svelte';
  import '@desource/context7-widget-svelte/styles.css';

  const docs = createContext7Widget({
    library: '/owner/repo',
    position: 'center',
    preset: 'terminal'
  });

  onMount(() => {
    docs.mount();
    return docs.unmount;
  });
</script>

<button onclick={() => docs.open()}>Open docs</button><p>{docs.messages.length} messages</p>
```

--------------------------------

### Apply the version with pnpm changeset:version

Source: https://github.com/desource-labs/context7-widget/blob/main/RELEASE.md

Apply the version. This consumes all pending changesets and updates the six package versions and changelogs. A pnpm install is not required because internal packages use workspace:*.

```bash
pnpm changeset:version
```

--------------------------------

### Configure Content-Security-Policy for Context7 widget

Source: https://github.com/desource-labs/context7-widget/blob/main/docs/INTEGRATION.md

Use this Content-Security-Policy for the hosted script and default Context7 backend. It allows scripts from the hosted domain, connections to https://context7.com for chat requests, and data URLs for the embedded DeSource Labs mark. If hosting widget.js elsewhere, add that script origin and keep https://context7.com in connect-src. Browsers needing the inline <style> fallback also require a style-src policy; merge these sources into your existing nonce/hash-based policy and verify in every supported browser.

```http
Content-Security-Policy:
  script-src 'self' https://context7.desourcelabs.com;
  connect-src 'self' https://context7.com;
  img-src 'self' data:;
```

--------------------------------

### Inject Context7WidgetService and send a message

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/angular/README.md

Use this snippet to inject the Context7WidgetService and programmatically select, open, and send a message to a widget. The service exposes reactive signals for widget state, and the example shows a component that triggers the widget on a button click.

```ts
import { Component, inject } from '@angular/core';
import { Context7WidgetService } from '@desource/context7-widget-angular';

@Component({
  selector: 'docs-actions',
  standalone: true,
  template: `<button type="button" (click)="ask()">Explain setup</button>`
})
export class DocsActions {
  readonly docs = inject(Context7WidgetService);

  async ask(): Promise<void> {
    this.docs.select('docs');
    this.docs.open();
    await this.docs.send('How do I configure the widget?');
  }
}
```

--------------------------------

### Customize Context7 widget with CSS variables and parts

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/svelte/README.md

Style the Context7 widget by setting CSS variables on the `.context7-widget` root and targeting public `part` attributes. The example customizes the accent color, font family, panel border, and trigger background and radius.

```css
.context7-widget {
  --c7-accent: #7c3aed;
  --c7-font-family: Inter, system-ui, sans-serif;
}

.context7-widget [part~='panel'] {
  border-color: color-mix(in srgb, var(--c7-accent), transparent 65%);
}

.context7-widget-trigger {
  --c7-trigger-background: #7c3aed;
  --c7-trigger-radius: 10px;
}
```

--------------------------------

### Listen to c7:answer-complete event

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/core/README.md

Listen for the 'c7:answer-complete' event at the document level. The event detail type is inferred from the event name, and the Context7WidgetQuestionEventDetail type can be used for explicit typing. The example logs the library and answer from the event detail, and a function demonstrates accessing the question property.

```ts
import type { Context7WidgetQuestionEventDetail } from '@desource/context7-widget';

document.addEventListener('c7:answer-complete', (event) => {
  // `event.detail` is inferred from the event name.
  console.log(event.detail.library, event.detail.answer);
});

function trackQuestion(detail: Context7WidgetQuestionEventDetail) {
  console.log(detail.question);
}
```

--------------------------------

### Use Context7Widget component

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/angular/README.md

Example Angular component that uses the Context7Widget component. It sets the library, position, preset, and theme, and listens to the question event. The component exposes methods like open, close, toggle, send, cancel, retry, reset, isOpen, isBusy, getMessages, and subscribe via a viewChild reference.

```ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Context7Widget, type Context7WidgetQuestionEventDetail } from '@desource/context7-widget-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Context7Widget],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <context7-widget
      library="/owner/repo"
      position="anchor"
      preset="glass"
      theme="auto"
      (question)="trackQuestion($event)"
    />
  `
})
export class App {
  trackQuestion(detail: Context7WidgetQuestionEventDetail): void {
    console.log(detail.library, detail.question);
  }
}
```

--------------------------------

### Drop-in browser script for Context7 widget

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/core/README.md

Drop-in browser script that loads the widget without a package manager or build step. Replace /owner/repo with your library's id. Multiple script tags are supported for multiple widgets; give each a unique data-widget-id.

```html
<script
  async
  src="https://context7.desourcelabs.com/widget.js"
  data-library="/owner/repo"
  data-position="anchor"
  data-preset="glass"
></script>
```

--------------------------------

### Style widget with CSS variables and shadow parts

Source: https://github.com/desource-labs/context7-widget/blob/main/docs/INTEGRATION.md

Override public CSS variables and shadow parts for the widget. Use presets as a starting point. Do not target internal .c7-* classes; they are implementation details. In native framework packages, apply the same CSS variables to .context7-widget; shadow parts apply only to the core custom element.

```css
context7-widget[widget-id='docs'] {
  --c7-accent: #7cffb2;
  --c7-panel-background: #101513;
  --c7-panel-color: #f7f2e8;
  --c7-border-color: rgba(247, 242, 232, 0.18);
  --c7-panel-radius: 8px;
}

context7-widget::part(send-button) {
  min-width: 5rem;
  text-transform: uppercase;
}
```

--------------------------------

### Controlled Context7Widget component with useState

Source: https://github.com/desource-labs/context7-widget/blob/main/packages/react/README.md

Use this controlled widget when application state owns visibility. The component is imported from '@desource/context7-widget-react/component' and styles from '@desource/context7-widget-react/styles.css'. The `open` state controls visibility, and `onOpenChange` updates it. The example sets `position="center"`, enables `backdrop`, uses `preset="glass"`, and provides a `customTrigger`.

```tsx
import { useState } from 'react';
import { Context7Widget } from '@desource/context7-widget-react/component';
import '@desource/context7-widget-react/styles.css';

export function DocsHelp() {
  const [open, setOpen] = useState(false);

  return (
    <Context7Widget
      library="/owner/repo"
      open={open}
      onOpenChange={setOpen}
      position="center"
      backdrop
      preset="glass"
      customTrigger
    />
  );
}

```