Stores workflow templates and agent plans as Hashes or JSON. Enables complex multi-step reasoning.
+Vector Search finds semantically similar documents instantly. Supports hybrid search for better results.
+Stores conversation history, user preferences, and intermediate results. Maintains state across workflows.
+Tell us what you want to build and we'll generate the code for you
+${content}
`; + + if (suggestions) { + const chipsDiv = document.createElement('div'); + chipsDiv.className = 'suggestion-chips'; + suggestions.forEach(suggestion => { + const chip = document.createElement('button'); + chip.className = 'suggestion-chip'; + chip.dataset.suggestion = suggestion.value; + chip.textContent = suggestion.label; + chipsDiv.appendChild(chip); + }); + messageContent.appendChild(chipsDiv); + } + + messageDiv.appendChild(avatar); + messageDiv.appendChild(messageContent); + elements.chatMessages.appendChild(messageDiv); + + // Scroll to bottom + elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight; + } + + function showSuggestions(input) { + const suggestions = getSuggestionsForCurrentStep(input); + if (suggestions.length === 0) { + hideSuggestions(); + return; + } + + const suggestionsList = elements.suggestionsDropdown.querySelector('.suggestions-list'); + suggestionsList.innerHTML = ''; + + suggestions.forEach(suggestion => { + const item = document.createElement('div'); + item.className = 'suggestion-item'; + item.dataset.value = suggestion.value; + item.innerHTML = ` + ${suggestion.icon} + ${suggestion.label} + `; + suggestionsList.appendChild(item); + }); + + elements.suggestionsDropdown.classList.remove('agent-builder-hidden'); + } + + function hideSuggestions() { + elements.suggestionsDropdown.classList.add('agent-builder-hidden'); + } + + function getSuggestionsForCurrentStep(input) { + const lowerInput = input.toLowerCase(); + let suggestions = []; + + switch (conversationState.step) { + case 'agent-type': + suggestions = Object.entries(CONFIG.agentTypes).map(([key, config]) => ({ + value: key, + label: config.name, + icon: key === 'recommendation' ? '🛍️' : '💬' + })).filter(s => + s.label.toLowerCase().includes(lowerInput) || + CONFIG.agentTypes[s.value].keywords.some(k => k.includes(lowerInput)) + ); + break; + + case 'language': + suggestions = Object.entries(CONFIG.languages).map(([key, config]) => ({ + value: key, + label: config.name, + icon: '💻' + })).filter(s => + s.label.toLowerCase().includes(lowerInput) || + CONFIG.languages[s.value].keywords.some(k => k.includes(lowerInput)) + ); + break; + + case 'model': + suggestions = Object.entries(CONFIG.models).map(([key, config]) => ({ + value: key, + label: config.name, + icon: '🤖' + })).filter(s => + s.label.toLowerCase().includes(lowerInput) || + CONFIG.models[s.value].keywords.some(k => k.includes(lowerInput)) + ); + break; + } + + return suggestions.slice(0, 5); // Limit to 5 suggestions + } + + function processUserMessage(input) { + // Simulate thinking delay + setTimeout(() => { + const lowerInput = input.toLowerCase(); + + switch (conversationState.step) { + case 'agent-type': + processAgentTypeSelection(lowerInput); + break; + case 'language': + processLanguageSelection(lowerInput); + break; + case 'model': + processModelSelection(lowerInput); + break; + } + }, 500); + } + + function processSelection(selection) { + conversationState.selections[conversationState.step] = selection; + + switch (conversationState.step) { + case 'agent-type': + processAgentTypeSelection(selection); + break; + case 'language': + processLanguageSelection(selection); + break; + case 'model': + processModelSelection(selection); + break; + } + } + + function processAgentTypeSelection(input) { + let selectedType = null; + + // Check if input matches a type directly + if (CONFIG.agentTypes[input]) { + selectedType = input; + } else { + // Search by keywords + for (const [key, config] of Object.entries(CONFIG.agentTypes)) { + if (config.keywords.some(keyword => input.includes(keyword))) { + selectedType = key; + break; + } + } + } + + if (selectedType) { + conversationState.selections.agentType = selectedType; + const config = CONFIG.agentTypes[selectedType]; + + // Generate a default agent name based on the type + const defaultNames = { + recommendation: 'RecommendationEngine', + conversational: 'ConversationalAgent' + }; + conversationState.selections.agentName = defaultNames[selectedType] || 'RedisAgent'; + + addMessage(`Great! I'll help you build a ${config.name}. ${config.description}`, 'bot'); + + // Move to language selection step + conversationState.step = 'language'; + addMessage('Which programming language would you like to use?', 'bot', [ + { value: 'python', label: '🐍 Python' }, + { value: 'javascript', label: '🟨 JavaScript' }, + { value: 'java', label: '☕ Java' }, + { value: 'csharp', label: '🔷 C#' } + ]); + } else { + addMessage("I didn't understand that. Please choose one of the agent types:", 'bot', [ + { value: 'recommendation', label: '🛍️ Recommendation Engine' }, + { value: 'conversational', label: '💬 Conversational Assistant' } + ]); + } + } + + + + function processLanguageSelection(input) { + let selectedLang = null; + + // Handle special responses from coming soon message + if (input === 'wait') { + addMessage('Thanks for checking out the Redis AI Agent Builder. Come back when your preferred language is supported!', 'bot'); + return; + } + + if (CONFIG.languages[input]) { + selectedLang = input; + } else { + for (const [key, config] of Object.entries(CONFIG.languages)) { + if (config.keywords.some(keyword => input.includes(keyword))) { + selectedLang = key; + break; + } + } + } + + if (selectedLang) { + // Check if it's Python (fully supported) + if (selectedLang === 'python') { + conversationState.selections.programmingLanguage = selectedLang; + const config = CONFIG.languages[selectedLang]; + + addMessage(`Excellent choice! ${config.description}`, 'bot'); + + // Move to next step + conversationState.step = 'model'; + addMessage('Finally, which AI model would you like to use?', 'bot', [ + { value: 'openai', label: '🤖 OpenAI (GPT-4)' }, + { value: 'anthropic', label: '🧠 Anthropic (Claude)' }, + { value: 'llama3', label: '🦙 Llama 3' } + ]); + } else { + // Handle other languages with coming soon message + const config = CONFIG.languages[selectedLang]; + const languageName = config.name; + + addMessage(`${languageName} support is coming soon. Currently, only Python is fully supported.`, 'bot'); + addMessage(`Would you like to build a Python agent instead?`, 'bot', [ + { value: 'python', label: 'Yes, use Python' }, + { value: 'wait', label: 'I\'ll wait for ' + languageName } + ]); + } + } else { + addMessage("I didn't recognize that language. Please choose from:", 'bot', [ + { value: 'python', label: '🐍 Python' }, + { value: 'javascript', label: '🟨 JavaScript' }, + { value: 'java', label: '☕ Java' }, + { value: 'csharp', label: '🔷 C#' } + ]); + } + } + + function processModelSelection(input) { + let selectedModel = null; + + if (CONFIG.models[input]) { + selectedModel = input; + } else { + for (const [key, config] of Object.entries(CONFIG.models)) { + if (config.keywords.some(keyword => input.includes(keyword))) { + selectedModel = key; + break; + } + } + } + + if (selectedModel) { + conversationState.selections.llmModel = selectedModel; + const config = CONFIG.models[selectedModel]; + + addMessage(`Perfect! ${config.description}`, 'bot'); + addMessage('🎉 I have everything I need! Generating your Redis AI agent code...', 'bot'); + + // Generate code + setTimeout(() => { + generateAndDisplayCode(); + }, 1500); + } else { + addMessage("I didn't recognize that model. Please choose from:", 'bot', [ + { value: 'openai', label: '🤖 OpenAI (GPT-4)' }, + { value: 'anthropic', label: '🧠 Anthropic (Claude)' }, + { value: 'llama3', label: '🦙 Llama 3' } + ]); + } + } + + function generateAndDisplayCode() { + const code = generateAgentCode(conversationState.selections); + + addMessage('✅ Your Redis AI agent code is ready! You can copy or download it below.', 'bot'); + + // Show code section + displayGeneratedCode(code, conversationState.selections); + } + + function generateAgentCode(formData) { + // This is a placeholder implementation + // In a real implementation, this would call an API or use templates + const genericTemplates = { + python: getGenericPythonCode, + javascript: getGenericJavaScriptCode, + java: getGenericJavaCode, + csharp: getGenericCSharpCode + }; + + const fileExtensions = { + python: '.py', + javascript: '.js', + java: '.java', + csharp: '.cs' + }; + const base = window.HUGO_BASEURL || ''; + const filename = `${base}code/agent-templates/${formData.programmingLanguage}/${formData.agentType}_agent${fileExtensions[formData.programmingLanguage]}`; + + return loadTemplateFile(filename, formData) || genericTemplates[formData.programmingLanguage](formData); + } + + function loadTemplateFile(filename, formData) { + try { + const xhr = new XMLHttpRequest(); + xhr.open('GET', filename, false); // Synchronous request + xhr.send(); + + if (xhr.status === 200) { + let templateContent = xhr.responseText; + + // Replace template variables + templateContent = templateContent.replace(/\$\{formData\.agentName\}/g, formData.agentName); + templateContent = templateContent.replace(/\$\{CONFIG\.agentTypes\[formData\.agentType\]\.description\}/g, + CONFIG.agentTypes[formData.agentType].description); + templateContent = templateContent.replace(/\$\{AgentClassName\}/g, formData.agentName.replace(/\s+/g, '')); + templateContent = templateContent.replace(/\$\{formData\.agentType\}/g, formData.agentType); + templateContent = templateContent.replace(/\$\{formData\.llmModel\.toUpperCase\(\)\}/g, formData.llmModel.toUpperCase()); + templateContent = templateContent.replace(/\$\{formData\.llmModel\.toLowerCase\(\)\}/g, formData.llmModel.toLowerCase()); + templateContent = templateContent.replace(/\$\{CONFIG\.models\[formData\.llmModel\]\.defaultModel\}/g, + CONFIG.models[formData.llmModel].defaultModel); + templateContent = templateContent.replace(/\$\{CONFIG\.models\[formData\.llmModel\]\.baseUrl\}/g, + CONFIG.models[formData.llmModel].baseUrl); + + return templateContent; + } else { + console.log(`Template file not found: ${filename} (${xhr.status})`); + } + } catch (error) { + console.log(`Could not load template file ${filename}:`, error); + } + + return null; // Return null if file loading failed + } + + function getGenericPythonCode(formData) { + return `# ${formData.agentName} - Redis AI Agent +# Generated for ${CONFIG.agentTypes[formData.agentType].description} + +import redis +import os +from typing import List, Dict, Any + +class ${formData.agentName.replace(/\s+/g, '')}: + def __init__(self): + self.redis_client = redis.Redis( + host=os.getenv('REDIS_HOST', 'localhost'), + port=int(os.getenv('REDIS_PORT', 6379)), + decode_responses=True + ) + self.llm_api_key = os.getenv('${formData.llmModel.toUpperCase()}_API_KEY') + + def process_query(self, query: str) -> Dict[str, Any]: + """Process user query and return response""" + # TODO: Implement ${formData.agentType} logic + pass + + def store_data(self, key: str, data: Dict[str, Any]) -> bool: + """Store data in Redis""" + try: + self.redis_client.hset(key, mapping=data) + return True + except Exception as e: + print(f"Error storing data: {e}") + return False + +# Example usage +if __name__ == "__main__": + agent = ${formData.agentName.replace(/\s+/g, '')}() + # Add your implementation here`; + } + + function getGenericJavaScriptCode(formData) { + return `// ${formData.agentName} - Redis AI Agent +// Generated for ${CONFIG.agentTypes[formData.agentType].description} + +const redis = require('redis'); +require('dotenv').config(); + +class ${formData.agentName.replace(/\s+/g, '')} { + constructor() { + this.redisClient = redis.createClient({ + host: process.env.REDIS_HOST || 'localhost', + port: process.env.REDIS_PORT || 6379 + }); + this.llmApiKey = process.env.${formData.llmModel.toUpperCase()}_API_KEY; + } + + async processQuery(query) { + // TODO: Implement ${formData.agentType} logic + try { + // Your implementation here + return { success: true, response: "Placeholder response" }; + } catch (error) { + console.error('Error processing query:', error); + return { success: false, error: error.message }; + } + } + + async storeData(key, data) { + try { + await this.redisClient.hSet(key, data); + return true; + } catch (error) { + console.error('Error storing data:', error); + return false; + } + } +} + +// Example usage +const agent = new ${formData.agentName.replace(/\s+/g, '')}(); +module.exports = ${formData.agentName.replace(/\s+/g, '')};`; + } + + function getGenericJavaCode(formData) { + return `// ${formData.agentName} - Redis AI Agent +// Generated for ${CONFIG.agentTypes[formData.agentType].description} + +import redis.clients.jedis.Jedis; +import java.util.Map; +import java.util.HashMap; + +public class ${formData.agentName.replace(/\s+/g, '')} { + private Jedis jedis; + private String llmApiKey; + + public ${formData.agentName.replace(/\s+/g, '')}() { + this.jedis = new Jedis( + System.getenv().getOrDefault("REDIS_HOST", "localhost"), + Integer.parseInt(System.getenv().getOrDefault("REDIS_PORT", "6379")) + ); + this.llmApiKey = System.getenv("${formData.llmModel.toUpperCase()}_API_KEY"); + } + + public Map${content}
`; + } + } else { + // Fallback to plain text wrapped in paragraph + messageContent.innerHTML = `${content}
`; + } + + messageDiv.appendChild(avatar); + messageDiv.appendChild(messageContent); + elements.codeChatMessages.appendChild(messageDiv); + + // Scroll to bottom + elements.codeChatMessages.scrollTop = elements.codeChatMessages.scrollHeight; + } + + function processCodeChatMessage(input) { + // Check for special commands + if (input.toLowerCase() === '/reset-key' || input.toLowerCase() === '/new-key') { + codeChatState.apiKey = null; + codeChatState.hasAskedForKey = false; + addCodeChatMessage('🔄 API key reset. Please enter your new OpenAI API key:', 'bot'); + return; + } + + // Check if this is an API key input + if (!codeChatState.apiKey && input.startsWith('sk-')) { + codeChatState.apiKey = input.trim(); + addCodeChatMessage('✅ OpenAI API key saved! Now I can provide you with intelligent assistance about your code. What would you like to know?', 'bot'); + addCodeChatMessage('💡 Tip: Type "/reset-key" if you need to change your API key later.', 'bot'); + return; + } + + // If no API key, remind user + if (!codeChatState.apiKey) { + addCodeChatMessage('Please enter your OpenAI API key first to enable intelligent responses.', 'bot'); + return; + } + + // Add user message to conversation history + codeChatState.conversationHistory.push({ + role: 'user', + content: input + }); + + // Show thinking indicator + addCodeChatMessage('🤔 Thinking...', 'bot'); + + // Make LLM call + callLiteLLM(input); + } + + async function callLiteLLM(userMessage) { + try { + const code = elements.codeSection.dataset.code; + const formData = conversationState.selections; + + // Prepare the system message with code context + const systemMessage = `You are a helpful AI assistant specializing in Redis and AI development. + +The user has generated the following ${formData.programmingLanguage} code for a ${CONFIG.agentTypes[formData.agentType].name} using ${formData.llmModel}: + +\`\`\`${formData.programmingLanguage} +${code} +\`\`\` + +Please help the user understand, modify, debug, or deploy this code. Provide specific, actionable advice based on the actual code shown above.`; + + // Prepare messages for the API call + const messages = [ + { role: 'system', content: systemMessage }, + ...codeChatState.conversationHistory.slice(-10), // Keep last 10 messages for context + { role: 'user', content: userMessage } + ]; + + // Make the API call using fetch with custom base URL + const response = await fetch('https://d34j1iks5zrrtk.cloudfront.net/v1/chat/completions', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${codeChatState.apiKey}` + }, + body: JSON.stringify({ + model: 'gpt-3.5-turbo', + messages: messages, + max_tokens: 1000, + temperature: 0.7 + }) + }); + + if (!response.ok) { + const errorText = await response.text(); + console.error('API Response:', response.status, response.statusText, errorText); + throw new Error(`API call failed: ${response.status} ${response.statusText} - ${errorText}`); + } + + const data = await response.json(); + const assistantMessage = data.choices[0].message.content; + + // Remove thinking indicator and add real response + removeLastBotMessage(); + addCodeChatMessage(assistantMessage, 'bot'); + + // Add to conversation history + codeChatState.conversationHistory.push({ + role: 'assistant', + content: assistantMessage + }); + + } catch (error) { + console.error('OpenAI API error:', error); + + // Remove thinking indicator and show error + removeLastBotMessage(); + + // Handle different types of API errors + if (error.message.includes('401') || error.message.includes('Incorrect API key')) { + addCodeChatMessage('❌ Invalid OpenAI API key. Please check your API key and try again.', 'bot'); + addCodeChatMessage('Make sure your API key starts with "sk-" and has sufficient credits.', 'bot'); + codeChatState.apiKey = null; // Reset API key + } else if (error.message.includes('429') || error.message.includes('rate limit')) { + addCodeChatMessage('⚠️ Rate limit exceeded. Please wait a moment and try again.', 'bot'); + } else if (error.message.includes('403') || error.message.includes('insufficient_quota') || error.message.includes('quota')) { + addCodeChatMessage('❌ Your OpenAI account has insufficient credits. Please add credits to your account.', 'bot'); + } else { + addCodeChatMessage('❌ Sorry, I encountered an error connecting to the AI service. Please try again.', 'bot'); + console.log('Full error details:', error); + } + + // Fallback to basic response + const fallbackResponse = generateCodeChatResponse(userMessage, code, formData); + addCodeChatMessage('Here\'s some basic help while the AI service is unavailable:', 'bot'); + addCodeChatMessage(fallbackResponse, 'bot'); + } + } + + function removeLastBotMessage() { + const messages = elements.codeChatMessages.children; + if (messages.length > 0) { + const lastMessage = messages[messages.length - 1]; + if (lastMessage.classList.contains('bot-message')) { + lastMessage.remove(); + } + } + } + + function generateCodeChatResponse(input, code, formData) { + const lowerInput = input.toLowerCase(); + + // Simple keyword-based responses for demonstration + if (lowerInput.includes('how') && (lowerInput.includes('run') || lowerInput.includes('execute'))) { + return `To run this ${formData.programmingLanguage} code: + +1. Save the code to a file with the appropriate extension +2. Install the required dependencies (Redis client library and ${formData.llmModel} SDK) +3. Set up your environment variables for Redis connection and API keys +4. Run the file using your ${formData.programmingLanguage} interpreter + +Would you like specific installation commands for the dependencies?`; + } + + if (lowerInput.includes('dependencies') || lowerInput.includes('install') || lowerInput.includes('requirements')) { + const deps = getDependenciesForLanguage(formData.programmingLanguage, formData.llmModel); + return `Here are the dependencies you need to install: + +${deps} + +Make sure you have ${formData.programmingLanguage} installed on your system first.`; + } + + if (lowerInput.includes('redis') && (lowerInput.includes('connect') || lowerInput.includes('setup'))) { + return `To set up Redis for this agent: + +1. Install Redis locally or use Redis Cloud +2. Set these environment variables: + - REDIS_HOST (default: localhost) + - REDIS_PORT (default: 6379) + - REDIS_PASSWORD (if required) + +For Redis Cloud, you can get a free database at https://redis.io/try-free/`; + } + + if (lowerInput.includes('api') && lowerInput.includes('key')) { + return `You'll need to set up API keys for ${formData.llmModel}: + +Set the environment variable: ${formData.llmModel.toUpperCase()}_API_KEY + +Get your API key from: +- OpenAI: https://platform.openai.com/api-keys +- Anthropic: https://console.anthropic.com/ +- For Llama 2: You can run it locally or use a hosted service + +Never hardcode API keys in your source code!`; + } + + if (lowerInput.includes('explain') || lowerInput.includes('what does')) { + return `This code creates a ${CONFIG.agentTypes[formData.agentType].name} that: + +${CONFIG.agentTypes[formData.agentType].features.map(feature => `• ${feature}`).join('\n')} + +The main components are: +• Redis client for data storage and retrieval +• ${formData.llmModel} integration for AI responses +• Error handling and logging +• Data persistence methods + +What specific part would you like me to explain in more detail?`; + } + + if (lowerInput.includes('modify') || lowerInput.includes('customize') || lowerInput.includes('change')) { + return `You can customize this code by: + +• Modifying the system prompt in the LLM calls +• Adding custom data processing logic +• Implementing additional Redis data structures +• Adding authentication and security features +• Scaling with connection pooling + +What specific modifications are you thinking about?`; + } + + if (lowerInput.includes('error') || lowerInput.includes('debug') || lowerInput.includes('troubleshoot')) { + return `Common issues and solutions: + +• **Connection errors**: Check Redis is running and credentials are correct +• **API errors**: Verify your ${formData.llmModel} API key is valid and has credits +• **Import errors**: Make sure all dependencies are installed +• **Permission errors**: Check file permissions and environment variables + +What specific error are you encountering?`; + } + + // Default response + return `I can help you with questions about: + +• How to run and deploy this code +• Setting up dependencies and environment +• Connecting to Redis and configuring APIs +• Customizing the agent for your needs +• Troubleshooting common issues +• Explaining how different parts work + +What would you like to know more about?`; + } + + function getDependenciesForLanguage(language, llmModel) { + const deps = { + python: { + base: "pip install redis openai python-dotenv", + openai: "pip install redis openai python-dotenv", + anthropic: "pip install redis anthropic python-dotenv", + llama2: "pip install redis transformers torch python-dotenv" + }, + javascript: { + base: "npm install redis dotenv", + openai: "npm install redis openai dotenv", + anthropic: "npm install redis @anthropic-ai/sdk dotenv", + llama2: "npm install redis @huggingface/inference dotenv" + }, + java: { + base: "Add to pom.xml: jedis, okhttp3", + openai: "Add to pom.xml: jedis, okhttp3 (for OpenAI API)", + anthropic: "Add to pom.xml: jedis, okhttp3 (for Anthropic API)", + llama2: "Add to pom.xml: jedis, okhttp3 (for Llama API)" + }, + csharp: { + base: "dotnet add package StackExchange.Redis", + openai: "dotnet add package StackExchange.Redis OpenAI", + anthropic: "dotnet add package StackExchange.Redis Anthropic.SDK", + llama2: "dotnet add package StackExchange.Redis (+ Llama API client)" + } + }; + + return deps[language]?.[llmModel] || deps[language]?.base || "Dependencies information not available"; + } + + // Initialize when script loads + init(); + +})();