Setting up the LaunchDarkly developer toolbar

import { render } from 'react-dom';
import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
import { 
  useLaunchDarklyToolbar, 
  FlagOverridePlugin, 
  EventInterceptionPlugin 
} from '@launchdarkly/toolbar';
// Pass the same instance of these plugins into both the LaunchDarkly
// React client as well as the developer toolbar
const flagOverridePlugin = new FlagOverridePlugin();
const eventInterceptionPlugin = new EventInterceptionPlugin();
(async () => {
  const LDProvider = await asyncWithLDProvider({
    clientSideID: 'example-client-side-id',
    context: {
      kind: 'user',
      key: 'example-user-key',
      name: 'Sandy Smith',
      email: 'sandy@example.com',
    },
    options: {
      plugins: [
        flagOverridePlugin,
        eventInterceptionPlugin,
        // other plugins...
      ],
      // other options...
    },
  });
  function App() {
    // Initialize toolbar with the same plugin instances
    useLaunchDarklyToolbar({
      flagOverridePlugin, // For flag overrides (SDK Mode only)
      eventInterceptionPlugin, // For event monitoring (works in both modes)
      // OR Dev Server Mode: Connect to LaunchDarkly dev server
      devServerUrl: 'http://localhost:8080',
      projectKey: 'my-project', // Optional: auto-detects if not provided
      // Common options
      position: 'bottom-right',
      enabled: process.env.NODE_ENV === 'development' // disable in production/hosted environments
    });
    return <YourApp />;
  }
  render(
    <LDProvider>
      <App />
    </LDProvider>,
    document.getElementById('root'),
  );
})();

import { onMounted } from 'vue';
import * as LDClient from 'launchdarkly-js-client-sdk';
import { useLaunchDarklyToolbar } from '@launchdarkly/toolbar/vue';
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar/plugins';
const flagOverridePlugin = new FlagOverridePlugin();
const eventInterceptionPlugin = new EventInterceptionPlugin();
// Initialize LaunchDarkly client
const client = LDClient.initialize(
  'client-side-id-123abc',
  {
    kind: 'user',
    key: 'user-key-123abc',
    name: 'Sandy Smith',
    email: 'sandy@example.com',
  },
  {
    plugins: [flagOverridePlugin, eventInterceptionPlugin],
  },
);
// In your Vue component or setup function
export default {
  setup() {
    onMounted(async () => {
      await client.waitForInitialization();
    });
    // Initialize toolbar with the same plugin instances
    useLaunchDarklyToolbar({
      flagOverridePlugin,
      eventInterceptionPlugin,
      // OR Dev Server Mode
      devServerUrl: 'http://localhost:8080',
      projectKey: 'my-project',
      position: 'bottom-right',
      enabled: import.meta.env.DEV, // Vite
      // enabled: process.env.NODE_ENV === 'development', // Webpack
    });
    return {
      // your component data
    };
  },
};

import { Component, OnInit } from '@angular/core';
import * as LDClient from 'launchdarkly-js-client-sdk';
import LaunchDarklyToolbarService from '@launchdarkly/toolbar/angular';
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar/plugins';
import { environment } from '../environments/environment';
@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
  providers: [LaunchDarklyToolbarService],
})
export class AppComponent implements OnInit {
  private flagOverridePlugin = new FlagOverridePlugin();
  private eventInterceptionPlugin = new EventInterceptionPlugin();
  private ldClient: LDClient.LDClient;
  constructor(private toolbarService: LaunchDarklyToolbarService) {
    // Initialize LaunchDarkly client
    this.ldClient = LDClient.initialize(
      'client-side-id-123abc',
      {
        kind: 'user',
        key: 'user-key-123abc',
        name: 'Sandy Smith',
        email: 'sandy@example.com',
      },
      {
        plugins: [this.flagOverridePlugin, this.eventInterceptionPlugin],
      },
    );
  }
  async ngOnInit() {
    await this.ldClient.waitForInitialization();
    // Initialize toolbar with the same plugin instances
    if (!environment.production) {
      await this.toolbarService.initialize({
        flagOverridePlugin: this.flagOverridePlugin,
        eventInterceptionPlugin: this.eventInterceptionPlugin,
        // OR Dev Server Mode
        devServerUrl: 'http://localhost:8080',
        projectKey: 'my-project',
        position: 'bottom-right',
        enabled: true,
      });
    }
  }
}

<script src="https://unpkg.com/@launchdarkly/toolbar@latest/cdn/toolbar.min.js"></script>

import * as LDClient from 'launchdarkly-js-client-sdk';
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar';
// Pass these plugins into both the JS client and 
// the window.LaunchDarklyToolbar.init() call.
const flagOverridePlugin = new FlagOverridePlugin();
const eventInterceptionPlugin = new EventInterceptionPlugin();
const context: LDClient.LDContext = {
  kind: 'user',
  key: 'example-context-key',
};
const client = LDClient.initialize('example-client-side-id', context, {
  plugins: [
    flagOverridePlugin,
    eventInterceptionPlugin,
    // other plugins...
  ],
  // other options...
});
try {
  await client.waitForInitialization(5);
  // initialization succeeded, flag values are now available
  handleInitializedClient(client);
} catch (err) {
  // initialization failed or did not complete before timeout
}
// Only initialize the toolbar in local environments
if (process.env.NODE_ENV === 'development' && window.LaunchDarklyToolbar) {
  window.LaunchDarklyToolbar.init({
    flagOverridePlugin,
    eventInterceptionPlugin,
    // other toolbar options...
  });
}

import type { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
declare global {
  interface Window {
    LaunchDarklyToolbar?: LaunchDarklyToolbar;
  }
}