Update app.py

app.py

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { ChevronRight, Play, Download, Users, Clock, DollarSign, CheckCircle, Loader, Zap, BookOpen, Code, Mic, AlertCircle } from 'lucide-react';
+import { ChevronRight, Play, Download, Users, Clock, DollarSign, CheckCircle, Loader, Zap, BookOpen, Code, Mic, AlertCircle, Settings } from 'lucide-react';
 
 const WorkshopGenerator = () => {
-  const [currentStep, setCurrentStep] = useState('input');
+  const [currentStep, setCurrentStep] = useState('setup');
+  const [apiKey, setApiKey] = useState('');
   const [workshopData, setWorkshopData] = useState({
     topic: '',
     audience: '',
@@ -21,14 +22,21 @@ const WorkshopGenerator = () => {
     { id: 'code', name: 'Code Agent', icon: Code, description: 'Creating hands-on exercises' }
   ];
 
-  // Real Claude API call function
+  // Real Claude API call function with proper authentication
   const callClaudeAPI = async (prompt, maxTokens = 2000) => {
     try {
+      const headers = {
+        "Content-Type": "application/json",
+      };
+
+      // Add API key for external deployment, or use built-in access for Claude.ai
+      if (apiKey && apiKey.startsWith('sk-ant-')) {
+        headers["x-api-key"] = apiKey;
+      }
+
       const response = await fetch("https://api.anthropic.com/v1/messages", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
+        headers: headers,
         body: JSON.stringify({
           model: "claude-sonnet-4-20250514",
           max_tokens: maxTokens,
@@ -39,7 +47,8 @@ const WorkshopGenerator = () => {
       });
 
       if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
+        const errorText = await response.text();
+        throw new Error(`API request failed: ${response.status} - ${errorText}`);
       }
 
       const data = await response.json();
@@ -210,6 +219,29 @@ Focus on practical, business-relevant examples. DO NOT include any text outside
     return await callClaudeAPI(prompt, 3000);
   };
 
+  const testAPIConnection = async () => {
+    try {
+      const testPrompt = "Respond with exactly: API_TEST_SUCCESS";
+      const response = await callClaudeAPI(testPrompt, 50);
+      return response.includes("API_TEST_SUCCESS");
+    } catch (error) {
+      console.error("API test failed:", error);
+      return false;
+    }
+  };
+
+  const handleAPISetup = async () => {
+    setError('');
+    
+    // Test API connection
+    const isConnected = await testAPIConnection();
+    if (isConnected) {
+      setCurrentStep('input');
+    } else {
+      setError('API connection failed. Please check your API key or try again.');
+    }
+  };
+
   const generateWorkshop = async () => {
     setIsGenerating(true);
     setCurrentStep('generating');
@@ -227,7 +259,6 @@ Focus on practical, business-relevant examples. DO NOT include any text outside
       
       let topicData;
       try {
-        // Clean the response to extract JSON
         const cleanResponse = topicResponse.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
         topicData = JSON.parse(cleanResponse);
       } catch (parseError) {
@@ -336,7 +367,8 @@ Focus on practical, business-relevant examples. DO NOT include any text outside
       ...generatedContent,
       generated_by: "AI Workshop in a Box",
       export_date: new Date().toISOString(),
-      workshop_config: workshopData
+      workshop_config: workshopData,
+      api_version: "claude-sonnet-4-20250514"
     };
     
     const dataStr = JSON.stringify(workshopPackage, null, 2);
@@ -366,7 +398,7 @@ Focus on practical, business-relevant examples. DO NOT include any text outside
               </div>
               <div>
                 <h1 className="text-2xl font-bold">AI Workshop in a Box</h1>
-                <p className="text-blue-200 text-sm">Functional Multi-Agent Generator</p>
+                <p className="text-blue-200 text-sm">Production Multi-Agent Generator</p>
               </div>
             </div>
             <div className="flex items-center space-x-4">
@@ -390,6 +422,56 @@ Focus on practical, business-relevant examples. DO NOT include any text outside
           </div>
         )}
 
+        {/* Step 0: API Setup */}
+        {currentStep === 'setup' && (
+          <div className="max-w-2xl mx-auto">
+            <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20">
+              <div className="text-center mb-6">
+                <Settings className="w-16 h-16 text-cyan-400 mx-auto mb-4" />
+                <h2 className="text-3xl font-bold mb-2">API Configuration</h2>
+                <p className="text-blue-200">Set up your Claude API access to start generating workshops</p>
+              </div>
+              
+              <div className="space-y-6">
+                <div>
+                  <label className="block text-sm font-medium mb-2">
+                    Claude API Key (Optional for Claude.ai)
+                  </label>
+                  <input
+                    type="password"
+                    placeholder="sk-ant-api03-... (leave blank if running in Claude.ai)"
+                    className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-transparent text-white placeholder-gray-300"
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                  />
+                  <p className="text-xs text-gray-400 mt-2">
+                    • Leave blank when running in Claude.ai (uses built-in access)<br/>
+                    • Required when deploying to your own domain<br/>
+                    • Get your API key from: <span className="text-cyan-400">console.anthropic.com</span>
+                  </p>
+                </div>
+
+                <div className="bg-blue-500/20 border border-blue-400/30 rounded-lg p-4">
+                  <h4 className="font-semibold text-blue-200 mb-2">Deployment Options:</h4>
+                  <div className="text-sm text-blue-100 space-y-1">
+                    <div>• <strong>Claude.ai:</strong> No API key needed (current environment)</div>
+                    <div>• <strong>Your Domain:</strong> Add API key to environment variables</div>
+                    <div>• <strong>GitHub:</strong> Store API key in repository secrets</div>
+                  </div>
+                </div>
+
+                <button
+                  onClick={handleAPISetup}
+                  className="w-full py-4 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-lg font-semibold text-lg hover:from-cyan-600 hover:to-blue-700 transition-all duration-200 flex items-center justify-center space-x-2"
+                >
+                  <CheckCircle className="w-5 h-5" />
+                  <span>Test Connection & Continue</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Step 1: Input */}
         {currentStep === 'input' && (
           <div className="max-w-2xl mx-auto">
@@ -463,6 +545,16 @@ Focus on practical, business-relevant examples. DO NOT include any text outside
                   <ChevronRight className="w-5 h-5" />
                 </button>
               </div>
+
+              <div className="mt-6 pt-6 border-t border-white/10">
+                <button
+                  onClick={() => setCurrentStep('setup')}
+                  className="text-gray-300 hover:text-white text-sm flex items-center space-x-2"
+                >
+                  <Settings className="w-4 h-4" />
+                  <span>Change API Settings</span>
+                </button>
+              </div>
             </div>
           </div>
         )}