@@ -951,6 +966,21 @@
π¨ Atlas Prompt Compiler
}, '*');
}
+ /**
+ * Escape HTML special characters to prevent XSS attacks
+ * @param {string} unsafe - Potentially unsafe user input
+ * @returns {string} HTML-safe string
+ */
+ function escapeHtml(unsafe) {
+ if (typeof unsafe !== 'string') return '';
+ return unsafe
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ }
+
/**
* Render color list with visual swatches and semantic roles
* @param {Object} designSystem - The design system containing colors and colorRoles
@@ -982,6 +1012,62 @@
π¨ Atlas Prompt Compiler
}).join('');
}
+ /**
+ * Open API key settings dialog
+ * Allows user to view, set, or clear their v0 API key
+ */
+ function openSettings() {
+ const currentKey = localStorage.getItem('v0ApiKey') || '';
+ const hasKey = currentKey.length > 0;
+
+ let message = 'v0 API Key Settings\n\n';
+
+ if (hasKey) {
+ // Show only that a key is configured (don't reveal partial key)
+ message += 'API Key: β’β’β’β’β’β’β’β’β’β’β’β’β’β’β’β’\n';
+ message += 'Status: Configured\n\n';
+ message += 'Options:\n';
+ message += '1. Keep current key (Cancel)\n';
+ message += '2. Enter new key (OK then type new key)\n';
+ message += '3. Remove key (OK then leave blank)\n\n';
+ message += 'What would you like to do?';
+ } else {
+ message += 'No API key set.\n\n';
+ message += 'To use v0 SDK integration, you need a v0 API key.\n';
+ message += 'Get your API key from: https://v0.dev (Settings β API Keys)\n\n';
+ message += 'β οΈ SECURITY NOTES:\n';
+ message += 'β’ Your API key will be stored locally in your browser\n';
+ message += 'β’ Keep your computer secure and locked when away\n';
+ message += 'β’ Anyone with access to your browser can view this key\n';
+ message += 'β’ Rotate your key regularly from v0.dev settings\n\n';
+ message += 'Click OK to enter your API key, or Cancel to skip.';
+ }
+
+ const userChoice = confirm(message);
+
+ if (userChoice) {
+ const newKey = prompt(
+ 'Enter your v0 API Key:\n\n' +
+ '(Leave blank to remove current key)\n\n' +
+ 'Get your key from: https://v0.dev β Settings β API Keys\n\n' +
+ 'β οΈ The key will be stored in your browser\'s localStorage'
+ );
+
+ if (newKey === null) {
+ // User cancelled
+ return;
+ } else if (newKey.trim() === '') {
+ // Remove key
+ localStorage.removeItem('v0ApiKey');
+ alert('API key removed.\n\nYou can set it again anytime from Settings.');
+ } else {
+ // Set new key
+ localStorage.setItem('v0ApiKey', newKey.trim());
+ alert('β API key saved!\n\nYou can now use the v0 SDK integration.');
+ }
+ }
+ }
+
window.onmessage = (event) => {
const msg = event.data.pluginMessage;
console.log('Received message:', msg.type);
@@ -1032,8 +1118,8 @@
β Analyzed ${count} screen${count > 1 ? 's' : ''}
if (screenshots[frame.id]) {
html += `
-
-
${frame.name}
+
+
${escapeHtml(frame.name)}
`;
}
@@ -1199,8 +1285,8 @@
β Analyzed ${count} screen${count > 1 ? 's' : ''}
if (screenshots[frame.id]) {
html += `
-
-
${frame.name}
+
+
${escapeHtml(frame.name)}
`;
}
@@ -1254,8 +1340,8 @@
β Analyzed ${count} screen${count > 1 ? 's' : ''}
if (screenshots[frame.id]) {
html += `
-
-
${frame.name}
+
+
${escapeHtml(frame.name)}
`;
}
@@ -1323,12 +1409,55 @@
β Analyzed ${count} screen${count > 1 ? 's' : ''}
setupGalleryToggle();
}
+ // Handle v0 SDK success response
+ if (msg.type === 'v0-success') {
+ const { webUrl, demoUrl } = msg.data;
+
+ // Show success message with links
+ showToast(
+ 'β v0 Project Created!',
+ 'Opening project in new tab...'
+ );
+
+ // Open the v0 project
+ if (webUrl) {
+ setTimeout(() => {
+ window.open(webUrl, '_blank');
+ }, 500);
+ }
+
+ // Log demo URL for reference
+ if (demoUrl) {
+ console.log('v0 Demo URL:', demoUrl);
+ }
+ }
+
+ // Handle v0 SDK error response
+ if (msg.type === 'v0-error') {
+ // Show error and fall back to manual method
+ console.error('v0 SDK error:', msg.message);
+
+ alert(
+ 'v0 SDK Integration Error\n\n' +
+ msg.message + '\n\n' +
+ 'Falling back to manual v0.dev integration...'
+ );
+
+ // Fall back to manual method
+ const textarea = document.getElementById('promptTextarea');
+ const promptText = textarea ? textarea.value : window.promptData;
+ const includeScreenshotsCheckbox = document.getElementById('includeScreenshots');
+ const includeScreenshots = includeScreenshotsCheckbox ? includeScreenshotsCheckbox.checked : false;
+
+ sendToV0Manual(promptText, includeScreenshots);
+ }
+
if (msg.type === 'error') {
emptyState.style.display = 'none';
editorDiv.classList.remove('visible');
document.getElementById('loadingState').classList.remove('visible');
document.getElementById('process').disabled = false;
- resultDiv.innerHTML = `
Error: ${msg.message}
`;
+ resultDiv.innerHTML = `
Error: ${escapeHtml(msg.message)}
`;
resultDiv.classList.add('visible');
}
};
@@ -1347,8 +1476,8 @@
β Analyzed ${count} screen${count > 1 ? 's' : ''}
fullPrompt += '# Screen Previews\n\n';
window.extractedFrames.forEach((frame) => {
if (window.screenshots[frame.id]) {
- fullPrompt += `## ${frame.name}\n`;
- fullPrompt += `\n\n`;
+ fullPrompt += `## ${escapeHtml(frame.name)}\n`;
+ fullPrompt += `\n\n`;
}
});
fullPrompt += '---\n\n';
@@ -1658,8 +1787,8 @@
β Analyzed ${count} screen${count > 1 ? 's' : ''}
markdown += '# Screen Previews\n\n';
window.extractedFrames.forEach((frame) => {
if (window.screenshots[frame.id]) {
- markdown += `## ${frame.name}\n`;
- markdown += `\n\n`;
+ markdown += `## ${escapeHtml(frame.name)}\n`;
+ markdown += `\n\n`;
}
});
markdown += '---\n\n';
@@ -1723,8 +1852,8 @@
π¨ Atlas Prompt Specification
window.extractedFrames.forEach((frame) => {
if (window.screenshots[frame.id]) {
htmlContent += `
-
-
${frame.name}
+
+
${escapeHtml(frame.name)}
\n`;
}
});
@@ -1926,6 +2055,90 @@
π¨ Atlas Prompt Specification
const includeScreenshotsCheckbox = document.getElementById('includeScreenshots');
const includeScreenshots = includeScreenshotsCheckbox ? includeScreenshotsCheckbox.checked : false;
+ // Check for API key
+ const apiKey = localStorage.getItem('v0ApiKey') || '';
+
+ // If no API key, offer to set one
+ if (!apiKey) {
+ const userChoice = confirm(
+ 'v0 SDK Integration\n\n' +
+ 'To use the v0 SDK to automatically create projects, you need a V0_API_KEY.\n\n' +
+ 'Click OK to set your API key now, or Cancel to open v0.dev manually instead.'
+ );
+
+ if (userChoice) {
+ const newKey = prompt(
+ 'Enter your v0 API Key:\n\n' +
+ 'You can get your API key from v0.dev (Settings β API Keys)\n\n' +
+ 'The key will be stored securely in your browser.'
+ );
+
+ if (newKey && newKey.trim()) {
+ localStorage.setItem('v0ApiKey', newKey.trim());
+ showToast('β API Key Saved', 'Sending to v0.dev...');
+ sendToV0WithSDK(promptText, includeScreenshots);
+ } else {
+ // User cancelled or entered empty key, fall back to manual
+ sendToV0Manual(promptText, includeScreenshots);
+ }
+ } else {
+ // User chose to open manually
+ sendToV0Manual(promptText, includeScreenshots);
+ }
+ } else {
+ // Have API key, try SDK integration
+ sendToV0WithSDK(promptText, includeScreenshots);
+ }
+ }
+
+ /**
+ * Send to v0 using SDK integration (via plugin backend)
+ */
+ function sendToV0WithSDK(promptText, includeScreenshots) {
+ const apiKey = localStorage.getItem('v0ApiKey') || '';
+
+ // Privacy confirmation for first-time users
+ const hasSeenPrivacyNotice = localStorage.getItem('v0PrivacyNoticeShown');
+ if (!hasSeenPrivacyNotice) {
+ const confirmed = confirm(
+ 'β οΈ Privacy Notice\n\n' +
+ 'This will send your design specification and screenshots to v0.dev (a third-party service).\n\n' +
+ 'By proceeding, you confirm that:\n' +
+ 'β’ You have permission to share this design data\n' +
+ 'β’ You understand v0.dev will process this data\n' +
+ 'β’ Any sensitive/confidential information will be transmitted\n\n' +
+ 'Continue?'
+ );
+
+ if (!confirmed) {
+ return; // User cancelled
+ }
+
+ // Remember that user has seen the notice
+ localStorage.setItem('v0PrivacyNoticeShown', 'true');
+ }
+
+ showToast('π Sending to v0.dev...', 'Creating project via v0 SDK');
+
+ // Send message to plugin backend
+ parent.postMessage({
+ pluginMessage: {
+ type: 'v0-send',
+ data: {
+ prompt: promptText,
+ screenshots: includeScreenshots ? window.screenshots : {},
+ apiKey: apiKey
+ }
+ }
+ }, '*');
+
+ // Note: Response will be handled by onmessage handler below
+ }
+
+ /**
+ * Send to v0 manually (opens v0.dev with prompt in URL)
+ */
+ function sendToV0Manual(promptText, includeScreenshots) {
// Create a more comprehensive v0 message
let v0Message = '# Design Specification\n\n';
v0Message += `Generated by Atlas Prompt Compiler on ${new Date().toLocaleDateString()}\n\n`;
diff --git a/src/v0Integration.ts b/src/v0Integration.ts
new file mode 100644
index 0000000..07b1fa8
--- /dev/null
+++ b/src/v0Integration.ts
@@ -0,0 +1,168 @@
+/**
+ * v0 SDK Integration
+ *
+ * This module handles integration with v0.dev using the v0-sdk.
+ * It allows programmatic creation of v0 projects from prompts and screenshots.
+ *
+ * Features:
+ * - Send prompts to v0.dev
+ * - Attach screenshots as image URLs
+ * - Return link to generated project
+ *
+ * API Key:
+ * Requires V0_API_KEY to be provided via environment variable or UI input
+ */
+
+/**
+ * Interface for v0 integration result
+ */
+export interface V0Result {
+ success: boolean;
+ webUrl?: string;
+ demoUrl?: string;
+ error?: string;
+}
+
+/**
+ * Interface for screenshot data
+ */
+export interface Screenshot {
+ id: string;
+ name: string;
+ base64Data: string; // data:image/png;base64,...
+}
+
+/**
+ * Send prompt and screenshots to v0.dev
+ *
+ * Note: Since Figma plugins run in a sandboxed environment with limited network access,
+ * this function is designed to work with the v0-sdk in a Node.js-like environment.
+ *
+ * For screenshot attachments, v0 expects public URLs. Since we have base64 data,
+ * we have two options:
+ * 1. Upload to an image hosting service first (requires additional API)
+ * 2. Include in the prompt as context (simpler but less optimal)
+ *
+ * Current implementation: Returns instructions for manual v0 usage with enhanced context.
+ * Future enhancement: Integrate with image hosting service for true attachment support.
+ *
+ * @param prompt - The design specification prompt
+ * @param screenshots - Array of screenshot data (base64)
+ * @param apiKey - v0 API key
+ * @returns Promise with v0 result
+ */
+export async function sendToV0(
+ prompt: string,
+ screenshots: Screenshot[],
+ apiKey: string
+): Promise
{
+ // Validate API key
+ if (!apiKey || apiKey.trim() === '') {
+ return {
+ success: false,
+ error: 'V0_API_KEY is required. Please set it in the plugin settings.'
+ };
+ }
+
+ // Check if we're in a Figma plugin environment
+ // Figma plugins have limited network access and can't use Node.js modules directly
+ // NOTE: Due to Figma's sandbox environment, the v0-sdk currently cannot be used directly
+ // This function returns an error, and the UI falls back to the manual v0.dev URL method
+ // Future improvement: Implement a server-side proxy to enable full SDK integration
+ const isFigmaEnv = typeof figma !== 'undefined';
+
+ if (isFigmaEnv) {
+ // In Figma environment, we can't use v0-sdk directly due to limitations
+ // Return structured data for UI to handle
+ return {
+ success: false,
+ error: 'Direct v0 SDK integration is not available in Figma plugin sandbox. Use the "Open in v0.dev" button instead.'
+ };
+ }
+
+ try {
+ // This code path would run in a Node.js environment (e.g., build script or server)
+ // Import v0-sdk dynamically to avoid issues in Figma environment
+ const { createClient } = await import('v0-sdk');
+
+ const client = createClient({
+ apiKey: apiKey
+ });
+
+ // Prepare message with screenshot context
+ let message = prompt;
+
+ if (screenshots && screenshots.length > 0) {
+ message += '\n\n---\n\n';
+ message += `**Visual Context**: ${screenshots.length} screenshot${screenshots.length > 1 ? 's' : ''} provided.\n`;
+ message += 'Please refer to the attached images for visual reference and ensure the generated code matches the design specifications.\n';
+ }
+
+ // Note: v0-sdk expects attachments as public URLs
+ // Since we have base64 data, we would need to upload to an image host first
+ // For now, we create the chat without attachments and inform the user
+ const attachments: { url: string }[] = [];
+
+ // TODO: Upload screenshots to image hosting service and add URLs to attachments
+ // For example:
+ // for (const screenshot of screenshots) {
+ // const url = await uploadToImageHost(screenshot.base64Data);
+ // attachments.push({ url });
+ // }
+
+ // Create chat with v0
+ const chat = await client.chats.create({
+ message: message,
+ attachments: attachments.length > 0 ? attachments : undefined,
+ system: 'You are an expert UI/UX developer. Generate pixel-perfect, production-ready code based on the provided design specifications.'
+ });
+
+ return {
+ success: true,
+ webUrl: chat.url,
+ demoUrl: chat.demo
+ };
+ } catch (error) {
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : String(error)
+ };
+ }
+}
+
+/**
+ * Get v0 API key from localStorage or environment
+ * Provides a fallback mechanism for API key retrieval
+ *
+ * @returns API key or empty string
+ */
+export function getV0ApiKey(): string {
+ // Try to get from localStorage (set via UI)
+ // Use 'self' which is available in both browser and Figma plugin context
+ if (typeof self !== 'undefined' && (self as any).localStorage) {
+ const key = (self as any).localStorage.getItem('v0ApiKey');
+ if (key) return key;
+ }
+
+ // Fallback: check for V0_API_KEY in environment
+ // This would only work in a Node.js context, not in Figma plugin
+ try {
+ const envKey = (globalThis as any).process?.env?.V0_API_KEY;
+ if (envKey) return envKey;
+ } catch {
+ // Ignore errors in non-Node environments
+ }
+
+ return '';
+}
+
+/**
+ * Save v0 API key to localStorage
+ *
+ * @param apiKey - The API key to save
+ */
+export function saveV0ApiKey(apiKey: string): void {
+ if (typeof self !== 'undefined' && (self as any).localStorage) {
+ (self as any).localStorage.setItem('v0ApiKey', apiKey);
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
index f092ef4..d6a8342 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
"compilerOptions": {
"target": "ES2017",
"module": "ESNext",
- "lib": ["ES2017"],
+ "lib": ["ES2017", "DOM"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,