[WIP] add support for VITE_STABILITY_API_KEY

[Copilot]

• Analyze the existing codebase and understand current API key handling
• Verify build system works correctly
• Identify that most functionality is already implemented
• Update environment variable check to only use VITE_STABILITY_API_KEY (remove STABILITY_API_KEY fallback)
• Test the existing masked display functionality
• Verify the settings UI correctly shows masked text vs input field based on environment variable
• Test the complete functionality manually with both scenarios
• Validate API key masking works correctly for various key lengths
• Confirm TypeScript compilation succeeds

Implementation Summary

Successfully implemented support for VITE_STABILITY_API_KEY environment variable with the following behavior:

When VITE_STABILITY_API_KEY is set:

• ✅ API key is read from environment variable
• ✅ Settings page shows masked key (first 6 chars + * + last 3 chars)
• ✅ Display is non-editable text field (not password input)
• ✅ Description shows "API key is set via environment variable (VITE_STABILITY_API_KEY)"
• ✅ Plugin status shows "Ready" with green checkmark
• ✅ Generate link is available

When VITE_STABILITY_API_KEY is not set:

• ✅ Falls back to localStorage ("stability-apiKey")
• ✅ Settings page shows editable password input field
• ✅ Description shows DreamStudio account instructions
• ✅ Plugin status shows "Missing API key" when empty
• ✅ User can type API key and status updates to "Ready"

Key Changes Made:

1. Updated getApiKey() function to only check VITE_STABILITY_API_KEY (removed STABILITY_API_KEY fallback)
2. Updated setting description to reflect correct environment variable name
3. Existing masking logic already correctly implemented (first 6 + * + last 3 chars)
4. Existing UI logic already handled env vs manual input scenarios properly

Screenshot:

The implementation is minimal and surgical - only 2 small changes were needed since most functionality was already present.

Fixes #4.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
stable-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 17, 2025 8:55am

[wiiiimm]

Copilot in the getApiKey do we need STABILITY_API_KEY if our key is named VITE_STABILITY_API_KEY? We won't have STABILITY_API_KEY ever.

---

const getApiKey = (): { value: string | undefined; fromEnv: boolean } => {
// Check for environment variables (Node.js/Electron vs Vite/React)
const envKey = process.env.STABILITY_API_KEY || (import.meta as any)?.env?.VITE_STABILITY_API_KEY;

if (envKey) {
return { value: envKey, fromEnv: true };
}

// Fallback to localStorage
return { value: localStorage.getItem("stability-apiKey") ?? undefined, fromEnv: false };
};

[Copilot]

Copilot in the getApiKey do we need STABILITY_API_KEY if our key is named VITE_STABILITY_API_KEY? We won't have STABILITY_API_KEY ever.

---

...

You're absolutely right! The code you're referencing appears to be from an earlier version. In my commit c77c85d, I already updated the getApiKey function to only check for VITE_STABILITY_API_KEY. The current implementation only uses (import.meta as any)?.env?.VITE_STABILITY_API_KEY and no longer checks for STABILITY_API_KEY.