New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

vibe-button

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vibe-button

A single button that connects your user to Azure OpenAI.*

latest

npm

Version: 0.0.8

Version published: 10 months ago

Weekly downloads: 0

Maintainers: 1

Weekly downloads

Created: 10 months ago

Source

Vibe Button

A single button that connects your user to Azure OpenAI.*

Live documentation + demo

One Button to rule them all
One Button to find them
One Button to bring them all
and in Café 16
Vibe them
—Gandalf the Vibe

*This is NOT a Microsoft official library.

Install

Include a script tag in of html

<head>
  <script type="module" src="https://esm.sh/vibe-button"></script>
</head>

Put the settings button somewhere in the <body> of your HTML

<body>
  <vibe-button></vibe-button>
</body>

To display it at a specific corner of the screen, set position. Default is "bottom-right".

<vibe-button position="top-right"></vibe-button>
<vibe-button position="top-left"></vibe-button>
<vibe-button position="bottom-right"></vibe-button>
<vibe-button position="bottom-left"></vibe-button>

Usage

The user can click the <vibe-button> to open the settings dialog where they can provide Azure OpenAI endpoint, deployment name, and API key

As a developer, you can only query the settings object after the SDK script tag is loaded. You can instantiate an AzureOpenAI client instance using the settings from the button element:

const settings = document.querySelector("vibe-button").settings;

The settings object contains all the necessary properties to construct the new AzureOpenAI({...}) instance as documented in https://github.com/openai/openai-node. Note that the AzureOpenAI constructor only requires endpoint, apiKey, deployment, and apiVersion properties. The model property is only used for creating the response.

import { AzureOpenAI } from 'https://esm.sh/openai';

function submitChat() {
  const settings = document.querySelector('vibe-button').settings;
  const client = new AzureOpenAI({
    endpoint: settings.endpoint,
    apiKey: settings.apiKey,
    deployment: settings.deployment,
    apiVersion: settings.apiVersion,
    dangerouslyAllowBrowser: true
  });
  const response = await client.responses.create({
    model: settings.model,
    instructions: 'You are a coding assistant that talks like a pirate',
    input: 'Are semicolons optional in JavaScript?',
  });

  console.log(response.output_text);
}

Programmatically update settings

You can programmatically update the settings stored in the <vibe-button> using the updateSettings method. This is useful for pre-filling or changing the endpoint, API key, or deployment from your own code:

const vibeButton = document.querySelector('vibe-button');
vibeButton.updateSettings({
  aoaiEndpoint: 'https://your-endpoint.openai.azure.com/',
  aoaiApiKey: 'your-api-key',
  aoaiDeployment: 'your-deployment-name',
});

aoaiEndpoint: Azure OpenAI endpoint URL
aoaiApiKey: Azure OpenAI API key
aoaiDeployment: Azure OpenAI deployment name

The settings dialog and the .settings property will reflect these changes.

To stream the response, you can set stream: true

import { AzureOpenAI } from 'https://esm.sh/openai';

function streamChat() {
  const settings = document.querySelector('vibe-button').settings;
  const client = new AzureOpenAI({
    endpoint: settings.endpoint,
    apiKey: settings.apiKey,
    deployment: settings.deployment,
    apiVersion: settings.apiVersion,
    dangerouslyAllowBrowser: true
  });

  const stream = await client.responses.create({
    model: settings.model,
    input: 'Say "Sheep sleep deep" ten times fast!',
    stream: true,
  });

  for await (const event of stream) {
    console.log(event);
    /** Example delta event:
      {
        "type": "response.output_text.delta",
        "item_id": "msg_68438d02463081908f4fdce178bc5c74007cd4a1adc270d4",
        "output_index": 0,
        "content_index": 0,
        "delta": "Sheep, "
      }
    */
  }
}

The AzureOpenAI constructor is not provided by the SDK. If in the browser environment, we recommend using https://esm.sh/openai. Otherwise, you can use openai package from npm.

FAQs

What is vibe-button?

Is vibe-button popular?

Is vibe-button well maintained?

Package last updated on 20 Jun 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install