Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Agent Builder - CodeCollab Pro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://unpkg.com/uuid@8.3.2/dist/uuid.min.js"></script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <main class="pt-20 min-h-screen"> | |
| <!-- Header --> | |
| <section class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-8"> | |
| <div class="container mx-auto px-6"> | |
| <h1 class="text-3xl font-bold mb-2">AI Agent Builder</h1> | |
| <p class="text-indigo-100">Create intelligent coding agents with custom tools and capabilities</p> | |
| </div> | |
| </section> | |
| <div class="container mx-auto px-6 py-8"> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <!-- Agent Configuration Panel --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Agent Configuration</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Agent Name</label> | |
| <input type="text" id="agentName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="My Coding Agent"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Model</label> | |
| <select id="agentModel" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option value="gpt-4">GPT-4</option> | |
| <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option> | |
| <option value="claude-3">Claude 3</option> | |
| <option value="llama-2">Llama 2</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">System Prompt</label> | |
| <textarea id="systemPrompt" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="You are an expert coding assistant..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Temperature</label> | |
| <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7" class="w-full"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Precise</span> | |
| <span id="tempValue">0.7</span> | |
| <span>Creative</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Max Tokens</label> | |
| <input type="number" id="maxTokens" value="2048" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <button id="createAgent" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition"> | |
| Create Agent | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tools Panel --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mt-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Available Tools</h2> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-3 cursor-pointer"> | |
| <input type="checkbox" class="tool-checkbox" value="code-executor" checked class="w-4 h-4 text-indigo-600 rounded"> | |
| <span class="text-sm">Code Executor</span> | |
| </label> | |
| <label class="flex items-center space-x-3 cursor-pointer"> | |
| <input type="checkbox" class="tool-checkbox" value="file-system" checked class="w-4 h-4 text-indigo-600 rounded"> | |
| <span class="text-sm">File System</span> | |
| </label> | |
| <label class="flex items-center space-x-3 cursor-pointer"> | |
| <input type="checkbox" class="tool-checkbox" value="web-search" class="w-4 h-4 text-indigo-600 rounded"> | |
| <span class="text-sm">Web Search</span> | |
| </label> | |
| <label class="flex items-center space-x-3 cursor-pointer"> | |
| <input type="checkbox" class="tool-checkbox" value="api-caller" class="w-4 h-4 text-indigo-600 rounded"> | |
| <span class="text-sm">API Caller</span> | |
| </label> | |
| <label class="flex items-center space-x-3 cursor-pointer"> | |
| <input type="checkbox" class="tool-checkbox" value="database" class="w-4 h-4 text-indigo-600 rounded"> | |
| <span class="text-sm">Database Access</span> | |
| </label> | |
| <label class="flex items-center space-x-3 cursor-pointer"> | |
| <input type="checkbox" class="tool-checkbox" value="git" class="w-4 h-4 text-indigo-600 rounded"> | |
| <span class="text-sm">Git Operations</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Workspace --> | |
| <div class="lg:col-span-2"> | |
| <!-- Agent Chat Interface --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Agent Workspace</h2> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div> | |
| <span class="text-sm text-gray-600">Agent Ready</span> | |
| </div> | |
| </div> | |
| <div id="chatMessages" class="bg-gray-50 rounded-lg p-4 h-96 overflow-y-auto mb-4"> | |
| <div class="text-center text-gray-500 py-8"> | |
| <i data-feather="cpu" class="w-12 h-12 mx-auto mb-3 text-gray-400"></i> | |
| <p>Create an agent to start interacting</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <input type="text" id="chatInput" placeholder="Type your message..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" disabled> | |
| <button id="sendMessage" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition flex items-center space-x-2" disabled> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| <span>Send</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tool Execution Log --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Tool Execution Log</h2> | |
| <button id="clearLog" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div id="toolLog" class="bg-gray-900 text-gray-100 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm"> | |
| <div class="text-gray-500">Tool execution events will appear here...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Saved Agents --> | |
| <div class="mt-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Your Agents</h2> | |
| <div id="savedAgents" class="grid md:grid-cols-3 gap-4"> | |
| <div class="bg-white rounded-lg shadow p-4 text-center text-gray-500"> | |
| <i data-feather="package" class="w-8 h-8 mx-auto mb-2"></i> | |
| <p>No saved agents yet</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| let currentAgent = null; | |
| let agents = []; | |
| // Temperature slider update | |
| document.getElementById('temperature').addEventListener('input', (e) => { | |
| document.getElementById('tempValue').textContent = e.target.value; | |
| }); | |
| // Create Agent | |
| document.getElementById('createAgent').addEventListener('click', () => { | |
| const name = document.getElementById('agentName').value || 'Unnamed Agent'; | |
| const model = document.getElementById('agentModel').value; | |
| const systemPrompt = document.getElementById('systemPrompt').value || 'You are a helpful coding assistant.'; | |
| const temperature = parseFloat(document.getElementById('temperature').value); | |
| const maxTokens = parseInt(document.getElementById('maxTokens').value); | |
| const selectedTools = Array.from(document.querySelectorAll('.tool-checkbox:checked')) | |
| .map(cb => cb.value); | |
| const agent = { | |
| id: uuid.v4(), | |
| name, | |
| model, | |
| systemPrompt, | |
| temperature, | |
| maxTokens, | |
| tools: selectedTools, | |
| createdAt: new Date().toISOString() | |
| }; | |
| currentAgent = agent; | |
| agents.push(agent); | |
| // Enable chat interface | |
| document.getElementById('chatInput').disabled = false; | |
| document.getElementById('sendMessage').disabled = false; | |
| // Update UI | |
| updateSavedAgents(); | |
| initializeChat(); | |
| addToolLog(`Agent "${name}" created with tools: ${selectedTools.join(', ')}`, 'success'); | |
| }); | |
| // Initialize Chat | |
| function initializeChat() { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| chatMessages.innerHTML = ` | |
| <div class="mb-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 bg-indigo-500 rounded-full flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-100 rounded-lg p-3"> | |
| <p class="text-sm text-gray-800">Hello! I'm ${currentAgent.name}. I have access to the following tools: ${currentAgent.tools.join(', ')}. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| feather.replace(); | |
| } | |
| // Send Message | |
| document.getElementById('sendMessage').addEventListener('click', sendMessage); | |
| document.getElementById('chatInput').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| function sendMessage() { | |
| const input = document.getElementById('chatInput'); | |
| const message = input.value.trim(); | |
| if (!message || !currentAgent) return; | |
| const chatMessages = document.getElementById('chatMessages'); | |
| // Add user message | |
| chatMessages.innerHTML += ` | |
| <div class="mb-4"> | |
| <div class="flex items-start space-x-3 justify-end"> | |
| <div class="flex-1 text-right"> | |
| <div class="bg-indigo-600 text-white rounded-lg p-3 inline-block"> | |
| <p class="text-sm">${message}</p> | |
| </div> | |
| </div> | |
| <div class="w-8 h-8 bg-gray-500 rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="w-4 h-4 text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| input.value = ''; | |
| // Simulate agent thinking and tool usage | |
| setTimeout(() => { | |
| addToolLog('🤖 Processing request...', 'info'); | |
| simulateAgentResponse(message); | |
| }, 1000); | |
| } | |
| function simulateAgentResponse(userMessage) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const tools = currentAgent.tools; | |
| let response = ''; | |
| let toolUsed = ''; | |
| // Simple response simulation based on message and available tools | |
| if (userMessage.toLowerCase().includes('run') || userMessage.toLowerCase().includes('execute')) { | |
| if (tools.includes('code-executor')) { | |
| toolUsed = 'code-executor'; | |
| response = 'I\'ll execute that code for you using the code executor tool.'; | |
| setTimeout(() => { | |
| addToolLog('🔧 Using code-executor tool...', 'tool'); | |
| addToolLog('✅ Code executed successfully', 'success'); | |
| }, 2000); | |
| } else { | |
| response = 'I don\'t have access to the code executor tool. Please enable it in the agent configuration.'; | |
| } | |
| } else if (userMessage.toLowerCase().includes('file') || userMessage.toLowerCase().includes('save')) { | |
| if (tools.includes('file-system')) { | |
| toolUsed = 'file-system'; | |
| response = 'I\'ll help you manage files using the file system tool.'; | |
| setTimeout(() => { | |
| addToolLog('📁 Using file-system tool...', 'tool'); | |
| addToolLog('✅ File operation completed', 'success'); | |
| }, 2000); | |
| } else { | |
| response = 'I don\'t have access to file system operations.'; | |
| } | |
| } else if (userMessage.toLowerCase().includes('search') || userMessage.toLowerCase().includes('find')) { | |
| if (tools.includes('web-search')) { | |
| toolUsed = 'web-search'; | |
| response = 'Let me search for that information using the web search tool.'; | |
| setTimeout(() => { | |
| addToolLog('🌐 Using web-search tool...', 'tool'); | |
| addToolLog('🔍 Found 5 relevant results', 'success'); | |
| }, 2000); | |
| } else { | |
| response = 'I don\'t have access to web search functionality.'; | |
| } | |
| } else { | |
| response = 'I understand your request. Let me help you with that task using my available capabilities.'; | |
| } | |
| // Add agent response | |
| setTimeout(() => { | |
| chatMessages.innerHTML += ` | |
| <div class="mb-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="w-8 h-8 bg-indigo-500 rounded-full flex items-center justify-center"> | |
| <i data-feather="cpu" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-100 rounded-lg p-3"> | |
| <p class="text-sm text-gray-800">${response}</p> | |
| ${toolUsed ? `<p class="text-xs text-gray-500 mt-1">Used tool: ${toolUsed}</p>` : ''} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| feather.replace(); | |
| }, 1500); | |
| } | |
| function addToolLog(message, type = 'info') { | |
| const toolLog = document.getElementById('toolLog'); | |
| const timestamp = new Date().toLocaleTimeString(); | |
| const colorClass = { | |
| 'info': 'text-gray-300', | |
| 'success': 'text-green-400', | |
| 'tool': 'text-blue-400', | |
| 'error': 'text-red-400' | |
| }[type] || 'text-gray-300'; | |
| toolLog.innerHTML += `<div class="${colorClass}">[${timestamp}] ${message}</div>`; | |
| toolLog.scrollTop = toolLog.scrollHeight; | |
| } | |
| function updateSavedAgents() { | |
| const container = document.getElementById('savedAgents'); | |
| if (agents.length === 0) { | |
| container.innerHTML = ` | |
| <div class="bg-white rounded-lg shadow p-4 text-center text-gray-500"> | |
| <i data-feather="package" class="w-8 h-8 mx-auto mb-2"></i> | |
| <p>No saved agents yet</p> | |
| </div> | |
| `; | |
| } else { | |
| container.innerHTML = agents.map(agent => ` | |
| <div class="bg-white rounded-lg shadow p-4 hover:shadow-lg transition cursor-pointer" onclick="loadAgent('${agent.id}')"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-semibold text-gray-800">${agent.name}</h3> | |
| <span class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded">${agent.model}</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-2">${agent.tools.length} tools</p> | |
| <div class="flex flex-wrap gap-1"> | |
| ${agent.tools.slice(0, 3).map(tool => | |
| `<span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">${tool}</span>` | |
| ).join('')} | |
| ${agent.tools.length > 3 ? `<span class="text-xs text-gray-500">+${agent.tools.length - 3} more</span>` : ''} | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| feather.replace(); | |
| } | |
| function loadAgent(agentId) { | |
| currentAgent = agents.find(a => a.id === agentId); | |
| if (currentAgent) { | |
| document.getElementById('agentName').value = currentAgent.name; | |
| document.getElementById('agentModel').value = currentAgent.model; | |
| document.getElementById('systemPrompt').value = currentAgent.systemPrompt; | |
| document.getElementById('temperature').value = currentAgent.temperature; | |
| document.getElementById('maxTokens').value = currentAgent.maxTokens; | |
| // Update checkboxes | |
| document.querySelectorAll('.tool-checkbox').forEach(cb => { | |
| cb.checked = currentAgent.tools.includes(cb.value); | |
| }); | |
| // Enable chat | |
| document.getElementById('chatInput').disabled = false; | |
| document.getElementById('sendMessage').disabled = false; | |
| initializeChat(); | |
| addToolLog(`Loaded agent: ${currentAgent.name}`, 'success'); | |
| } | |
| } | |
| // Clear log | |
| document.getElementById('clearLog').addEventListener('click', () => { | |
| document.getElementById('toolLog').innerHTML = '<div class="text-gray-500">Log cleared...</div>'; | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |