Get started with OpenCtx

OpenCtx shows you contextual info about code from your dev tools, in your editor, in code review, and anywhere else you read code (announcement blog post).

You can use OpenCtx in:

VS Code

  1. Install OpenCtx for VS Code (sourcegraph.openctx).

  2. Add the following to your VS Code settings:


    "openctx.providers": {
    "https://openctx.org/npm/@openctx/provider-hello-world": true,
    },

  3. Open a code file and look for the "Hello World" items from OpenCtx.

  4. Add other OpenCtx providers (see the list in the docs navbar) to see more contextual info about your code:

    Screenshot of OpenCtx annotations in VS Code

    Hover a UI component in code to see what it looks like

See "VS Code" for more information.

Browser extension

  1. Install OpenCtx on the Chrome Web Store.

  2. After installing it in Chrome, visit the following pages to see it in action:

  3. Configure it to use other providers or patterns. See "Browser extension" for details.

Screenshot of OpenCtx annotations in a GitHub pull request

Screenshot of OpenCtx annotations in the GitHub code view

Sourcegraph

  1. Join our Discord and ask an admin to enable the openctx feature flag for your user account on Sourcegraph.com.

  2. Visit a file on Sourcegraph that has OpenCtx items. Examples:

  3. Toggle on the button in the file header.

  4. Look for and hover OpenCtx items, such as this one for a Prometheus metric:

    Screenshot of OpenCtx annotations in VS Code

Playground

Check out some samples in the playground.