File size: 8,890 Bytes
72e5643 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | <!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">
<!-- Sidebar -->
<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>
<!-- Main content -->
<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();
// Smooth scrolling for anchor links
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> |