| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Documentation - AgentFlow Studio</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> |
| </head> |
| <body class="bg-gray-900 text-white min-h-screen"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="container mx-auto px-4 py-8 max-w-6xl"> |
| <div class="bg-gray-800 rounded-xl p-8 mb-8"> |
| <h1 class="text-4xl font-bold mb-4">Documentation</h1> |
| <p class="text-xl text-gray-300">Learn how to build Langchain agents visually with AgentFlow Studio</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> |
| |
| <aside class="lg:col-span-1"> |
| <nav class="bg-gray-800 rounded-xl p-6 sticky top-8"> |
| <h2 class="text-lg font-semibold mb-4">Contents</h2> |
| <ul class="space-y-2"> |
| <li><a href="#getting-started" class="text-blue-400 hover:text-blue-300 block py-2">Getting Started</a></li> |
| <li><a href="#components" class="text-blue-400 hover:text-blue-300 block py-2">Components</a></li> |
| <li><a href="#react-agent" class="text-blue-400 hover:text-blue-300 block py-2">React Agent</a></li> |
| <li><a href="#tools" class="text-blue-400 hover:text-blue-300 block py-2">Tools</a></li> |
| <li><a href="#prompts" class="text-blue-400 hover:text-blue-300 block py-2">Prompts</a></li> |
| <li><a href="#memory" class="text-blue-400 hover:text-blue-300 block py-2">Memory</a></li> |
| <li><a href="#exporting" class="text-blue-400 hover:text-blue-300 block py-2">Exporting</a></li> |
| </ul> |
| </nav> |
| </aside> |
|
|
| |
| <div class="lg:col-span-3 space-y-8"> |
| <section id="getting-started" class="bg-gray-800 rounded-xl p-8"> |
| <h2 class="text-2xl font-semibold mb-4">Getting Started</h2> |
| <div class="prose prose-invert max-w-none"> |
| <p>AgentFlow Studio allows you to build Langchain agents through a visual interface. Follow these steps to create your first agent:</p> |
| |
| <h3 class="text-xl font-semibold mt-6 mb-3">1. Create a New Project</h3> |
| <p>Click the "New Project" button on the homepage to start with a clean canvas.</p> |
| |
| <h3 class="text-xl font-semibold mt-6 mb-3">2. Add Components</h3> |
| <p>Drag components from the toolbox onto the canvas. Available components include:</p> |
| <ul class="list-disc list-inside mt-2 space-y-1"> |
| <li><strong>React Agent</strong>: The core reasoning engine</li> |
| <li><strong>Tools</strong>: Custom functions your agent can use</li> |
| <li><strong>Prompt Templates</strong>: Define how your agent communicates</li> |
| <li><strong>Memory</strong>: Manage conversation history and state</li> |
| </ul> |
| |
| <h3 class="text-xl font-semibold mt-6 mb-3">3. Configure Properties</h3> |
| <p>Double-click any component to open its properties panel and configure its behavior.</p> |
| </div> |
| </section> |
|
|
| <section id="components" class="bg-gray-800 rounded-xl p-8"> |
| <h2 class="text-2xl font-semibold mb-4">Component Overview</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="bg-blue-600 p-2 rounded-lg"> |
| <i data-feather="cpu" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-semibold">React Agent</h3> |
| </div> |
| <p class="text-gray-300">The core reasoning component that processes inputs and decides which tools to use.</p> |
| </div> |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="bg-purple-600 p-2 rounded-lg"> |
| <i data-feather="tool" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-semibold">Tools</h3> |
| </div> |
| <p class="text-gray-300">Custom functions that extend your agent's capabilities with external APIs or calculations.</p> |
| </div> |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="bg-green-600 p-2 rounded-lg"> |
| <i data-feather="message-square" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-semibold">Prompt Templates</h3> |
| </div> |
| <p class="text-gray-300">Define the conversation structure and system prompts for your agent.</p> |
| </div> |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <div class="flex items-center gap-3 mb-3"> |
| <div class="bg-yellow-600 p-2 rounded-lg"> |
| <i data-feather="database" class="w-6 h-6"></i> |
| </div> |
| <h3 class="text-lg font-semibold">Memory</h3> |
| </div> |
| <p class="text-gray-300">Manage conversation history and maintain state across interactions.</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="exporting" class="bg-gray-800 rounded-xl p-8"> |
| <h2 class="text-2xl font-semibold mb-4">Exporting Your Agent</h2> |
| <div class="prose prose-invert max-w-none"> |
| <p>Once you've built your agent, you can export it as ready-to-use Python code:</p> |
| |
| <ol class="list-decimal list-inside mt-4 space-y-2"> |
| <li>Click the "Export Python" button</li> |
| <li>Review the generated code in the modal</li> |
| <li>Copy to clipboard or download as a .py file</li> |
| <li>Use the code in your existing Langchain projects</li> |
| </ol> |
| |
| <div class="bg-gray-900 p-4 rounded-lg mt-4"> |
| <pre><code class="language-python"># Example exported code structure |
| from langchain.agents import create_react_agent |
| from langgraph.graph import StateGraph |
|
|
| # Your custom components |
| agent = create_react_agent(model="gpt-4") |
| # ... more components |
|
|
| # Build and compile the graph |
| graph_builder = StateGraph() |
| # ... graph construction |
| final_agent = graph_builder.compile()</code></pre> |
| </div> |
| </div> |
| </section> |
| </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> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ |
| behavior: 'smooth', |
| block: 'start' |
| }); |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
