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,
      });
    }
  }
}

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...
  });
}