| | <!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> |
