Developer Integration

Build secure integrations in minutes with production-ready code. No hardcoded keys, no credential exposure—just seamless API access for your users.

Enable zero-knowledge API key management across 60+ services. Your users' credentials stay encrypted on their devices while your app gets instant access.

From install to a working .env

Four steps. Nothing is uploaded, and no account is needed for any of them.

Install the extension and set a master password
The password derives your encryption key on the device, through the Web Crypto API, and never leaves it. There is no recovery: we cannot reset what we never receive.
Import an existing .env, or add keys one at a time
The importer reads a whole file at once, so migrating a project is one action rather than one entry per key. Keys are grouped into projects.
Generate the format your target actually needs
A .env for local work, a Docker env file for containers, secret commands for GitHub Actions or Google Secret Manager, a manifest for Kubernetes. Each is escaped for its own syntax.
Or skip the file and insert straight from VS Code
The VS Code extension decrypts locally and inserts a value at the cursor. The key never reaches the system clipboard, so nothing is left behind to paste somewhere else by accident.

Six export targets, each escaped for its own syntax

The same key, written the way each destination actually parses it. Getting the quoting wrong is not a formatting nit — it silently corrupts any value containing a quote, a newline or a leading space.

.env file

A whole project at once. Values are quoted so newlines and quotes survive the round trip.

OPENAI_API_KEY="sk-proj-abc123"
STRIPE_SECRET_KEY="sk_live_def456"

Shell export

POSIX single-quoted, so a dollar sign or a backtick in the value is not expanded by the shell.

export OPENAI_API_KEY='sk-proj-abc123'

Google Secret Manager

Piped through printf %s rather than echo, which would append a newline the secret does not have.

printf %s 'sk-proj-abc123' | \
  gcloud secrets create openai-api-key \
  --data-file=- --replication-policy=automatic

GitHub Actions

A gh secret set command, so the value goes to the repository secret store rather than into a committed file.

gh secret set OPENAI_API_KEY --body 'sk-proj-abc123'

Docker Compose

An env file in the format Compose parses, which is not quite the same dialect as a shell .env.

OPENAI_API_KEY=sk-proj-abc123
STRIPE_SECRET_KEY=sk_live_def456

Kubernetes

A Secret manifest with base64-encoded data and an RFC 1123 resource name derived from the key name.

apiVersion: v1
kind: Secret
metadata:
  name: openai-api-key
type: Opaque
data:
  OPENAI_API_KEY: c2stcHJvai1hYmMxMjM=

A generated file is plaintext like any other. The vault protects the stored copy, not the export you asked for — delete it when you are done.

Create Your Integration

Select a service and configure your integration to get production-ready code.

Checking extension status...

Select a Service

OpenAI Integration

Service ID

Key Name

Button Text

Framework

<!-- Add this button to your HTML -->
<button id="apiKeyProtectBtn" class="apikey-connect-btn">
  Use My OpenAI API Key
</button>

<!-- Add this div to display errors (optional) -->
<div id="apiKeyError" class="error-message" style="display: none;"></div>

// Add this JavaScript to your page
document.addEventListener('DOMContentLoaded', function() {
  const apiKeyProtectBtn = document.getElementById('apiKeyProtectBtn');
  const apiKeyError = document.getElementById('apiKeyError');
  
  // Extension ID for APIKEY Connect
  const EXTENSION_ID = 'edkgcdpbaggofodchjfkfiblhohmkbac,gopinihllehdfjpcgjkjfppkobhfgeni';
  
  // Function to show error messages
  function showError(message) {
    if (apiKeyError) {
      apiKeyError.textContent = message;
      apiKeyError.style.display = 'block';
      setTimeout(() => {
        apiKeyError.style.display = 'none';
      }, 5000);
    } else {
      alert(message);
    }
  }
  
  // Button click handler
  apiKeyProtectBtn.addEventListener('click', async function() {
    try {
      apiKeyProtectBtn.disabled = true;
      apiKeyProtectBtn.textContent = 'Requesting...';
      
      // Request the API key from the extension
      const response = await window.chrome?.runtime?.sendMessage(
        EXTENSION_ID,
        {
          type: "requestKey",
          serviceId: "openai",
          keyName: "Default OpenAI Key"
        }
      );
      
      if (response && response.success) {
        const apiKey = response.key;
        // API Key received
        // Use the API key here
        useApiKey(apiKey);
      } else {
        throw new Error(response?.error || 'Failed to get API key');
      }
    } catch (error) {
      console.error('Error requesting API key:', error);
      showError('Error requesting API key: ' + error.message);
    } finally {
      apiKeyProtectBtn.disabled = false;
      apiKeyProtectBtn.textContent = 'Use My OpenAI API Key';
    }
  });
  
  // Example function to use the API key
  function useApiKey(apiKey) {
    // Replace this with your actual API calls
    fetch('https://api.example.com/endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({ /* your data */ })
    })
    .then(response => response.json())
    .then(data => {
      // Handle API response
      return data;
    })
    .catch(error => console.error('API request failed:', error));
  }
});

import { useState, useCallback } from 'react';

/**
 * Custom React Hook for APIKEY Connect Extension
 * 
 * Usage:
 *   const { apiKey, loading, error, requestKey } = useApiKey();
 *   requestKey('openai', 'Default OpenAI Key');
 */
export function useApiKey() {
  const [apiKey, setApiKey] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Extension ID for APIKEY Connect
  const EXTENSION_ID = 'edkgcdpbaggofodchjfkfiblhohmkbac,gopinihllehdfjpcgjkjfppkobhfgeni';

  const requestKey = useCallback(async (serviceId: string, keyName?: string) => {
    setLoading(true);
    setError(null);

    try {
      if (!window.chrome?.runtime?.sendMessage) {
        throw new Error('Chrome extension API is not available');
      }

      const response = await window.chrome.runtime.sendMessage(
        EXTENSION_ID,
        {
          type: 'requestKey',
          serviceId,
          keyName: keyName || 'Default Key'
        }
      );

      if (response && response.success) {
        setApiKey(response.key);
        return response.key;
      } else {
        throw new Error(response?.error || 'Failed to get API key');
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
      setError(errorMessage);
      throw err;
    } finally {
      setLoading(false);
    }
  }, []);

  const clearKey = useCallback(() => {
    setApiKey(null);
    setError(null);
  }, []);

  return {
    apiKey,
    loading,
    error,
    requestKey,
    clearKey
  };
}

// Example usage in a component:
/*
import { useApiKey } from './useApiKey';

function MyComponent() {
  const { apiKey, loading, error, requestKey } = useApiKey();

  const handleClick = async () => {
    try {
      const key = await requestKey('openai', 'Default OpenAI Key');
      // API Key received
      // Use the key for your API calls
    } catch (err) {
      console.error('Failed to get API key:', err);
    }
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Requesting...' : 'Use My OpenAI API Key'}
    </button>
  );
}
*/

.apikey-connect-btn {
  background-color: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.apikey-connect-btn:hover {
  background-color: var(--accent-hover);
}

.apikey-connect-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-message {
  color: var(--danger);
  font-size: 0.875rem;
  margin-top: 8px;
}

<!-- Add this button to your HTML -->
<button id="apiKeyProtectBtn" class="apikey-connect-btn">
  Use My OpenAI API Key
</button>

<!-- Add this div to display errors (optional) -->
<div id="apiKeyError" class="error-message" style="display: none;"></div>

<style>
.apikey-connect-btn {
  background-color: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.apikey-connect-btn:hover {
  background-color: var(--accent-hover);
}

.apikey-connect-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-message {
  color: var(--danger);
  font-size: 0.875rem;
  margin-top: 8px;
}
</style>

<script>
// Add this JavaScript to your page
document.addEventListener('DOMContentLoaded', function() {
  const apiKeyProtectBtn = document.getElementById('apiKeyProtectBtn');
  const apiKeyError = document.getElementById('apiKeyError');
  
  // Extension ID for APIKEY Connect
  const EXTENSION_ID = 'edkgcdpbaggofodchjfkfiblhohmkbac,gopinihllehdfjpcgjkjfppkobhfgeni';
  
  // Function to show error messages
  function showError(message) {
    if (apiKeyError) {
      apiKeyError.textContent = message;
      apiKeyError.style.display = 'block';
      setTimeout(() => {
        apiKeyError.style.display = 'none';
      }, 5000);
    } else {
      alert(message);
    }
  }
  
  // Button click handler
  apiKeyProtectBtn.addEventListener('click', async function() {
    try {
      apiKeyProtectBtn.disabled = true;
      apiKeyProtectBtn.textContent = 'Requesting...';
      
      // Request the API key from the extension
      const response = await window.chrome?.runtime?.sendMessage(
        EXTENSION_ID,
        {
          type: "requestKey",
          serviceId: "openai",
          keyName: "Default OpenAI Key"
        }
      );
      
      if (response && response.success) {
        const apiKey = response.key;
        // API Key received
        // Use the API key here
        useApiKey(apiKey);
      } else {
        throw new Error(response?.error || 'Failed to get API key');
      }
    } catch (error) {
      console.error('Error requesting API key:', error);
      showError('Error requesting API key: ' + error.message);
    } finally {
      apiKeyProtectBtn.disabled = false;
      apiKeyProtectBtn.textContent = 'Use My OpenAI API Key';
    }
  });
  
  // Example function to use the API key
  function useApiKey(apiKey) {
    // Replace this with your actual API calls
    fetch('https://api.example.com/endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({ /* your data */ })
    })
    .then(response => response.json())
    .then(data => {
      // Handle API response
      return data;
    })
    .catch(error => console.error('API request failed:', error));
  }
});
</script>

Live Preview

This is how the APIKEY Connect button will look and function on your website after integration:

Get in Touch

Have questions about integrating APIKeyConnect? We're here to help.

Reach out to us for integration support, partnership inquiries, or any questions about the APIKeyConnect platform.

Email: apikeyconnect@gmail.com

We typically respond within 24-48 hours.

Developer Integration

From install to a working .env

Install the extension and set a master password

Import an existing .env, or add keys one at a time

Generate the format your target actually needs