update index

Author: lbeurerkellner

docs/assets/invariant.css

@@ -368,8 +368,8 @@ label.md-nav__title {
     justify-content: center;
     padding: 5pt 20pt;
     align-items: center;
-    margin-top: 70pt;
-    margin-bottom: 120pt;
+    margin-top: 30pt;
+    margin-bottom: 140pt;
 }
 
 .overview .box {

docs/index.md

@@ -26,14 +26,59 @@ For this, it relies on an entirely transparent proxy that intercepts and traces
     </div>
 </div>
 
-## Overview
+## Getting Started as Developer
+
+To quickly integrate your agentic application with Invariant, it is enough to rely on our hosted gateway, to automatically trace your agent's LLM calls and to unlock the Invariant eco-system.
+
+```python hl_lines="5 6 7 8 9 10 11 12"
+
+from swarm import Swarm, Agent
+from openai import OpenAI
+from httpx import Client
+
+# === Invariant integration ===
+client = Swarm(
+    client=OpenAI(
+        # redirect and authenticate with the Invariant Gateway
+        http_client=Client(headers={"Invariant-Authorization": "Bearer <your-token>"}),
+        base_url="https://explorer.invariantlabs.ai/api/v1/gateway/<your-dataset-id>/openai",
+    )
+)
+
+# === Agent Implementation ===
+
+# define a tool
+def get_weather():
+    return "It's sunny."
+
+# define an agent
+agent = Agent(
+    name="Agent A",
+    instructions="You are a helpful agent.",
+    functions=[get_weather],
+)
+
+# run the agent
+response = client.run(
+    agent=agent,
+    messages=[{"role": "user", "content": "What's the weather?"}],
+)
+
+print(response.messages[-1]["content"])
+# Output: "It seems to be sunny."
+```
 
-Based on the gateway, Invariant offers a family of tools for securing, testing and debugging AI agents. These tools are designed to be used in conjunction with the gateway, which greatly facilitates integration.
+With this code, your agent is automatically tracked and all execution traces will be logged in a designated dataset on the <img class='inline-invariant' src="assets/logo.svg"/> [Invariant Explorer](https://explorer.invariantlabs.ai).
 
-You can use each tool independently, or in combination with each other. The following interactive figure illustrates the Invariant eco-system and how the tools fit together:
+This enables you to analyze, debug and ensure the security of your agentic system, during development and operation. It also opens up your agent to the Invariant family of tools, allowing you to [observe and debug](./explorer/) your agent, [test it](testing/), and [analyze it for security vulnerabilities](https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer).
 
-<br/>
-<br/>
+In the next sections, we will introduce the Invariant eco-system and how to get started with it.
+
+## Overview
+
+With the gateway at the core, Invariant offers a family of tools for trace analysis and testing, allowing you to secure, debug and test your AI agents.
+
+You can use each tool independently, or in combination with each other. The following interactive figure illustrates the Invariant eco-system and how the tools fit together. You can click on any of the boxes to learn more about the respective tool.
 
 <div class='overview'>
     <div class='clear box thirdparty'>
@@ -45,17 +90,17 @@ You can use each tool independently, or in combination with each other. The foll
             <i>Transparent LLM proxy to trace and intercept LLM calls</i>
             <i class='more'>→</i>
         </a>
-        <div class='online'>
+        <!-- <div class='online'>
             <div class='title'>Online Guardrails</div>
             <div class='box fill clear' style="flex: 1;">
                 <p>Analyzer</p>
                 <i>Agent Security Scanner</i>
                 <i class='more'>→</i>
             </div>
-        </div>
+        </div> -->
         <div class='offline'>
             <hr/>
-            <div class='title'>Offline Analysis</div>
+            <div class='title'>Trace Analysis</div>
             <a class='box fill clear' href='./explorer'>
                 <p>Explorer</p>
                 <i>Trace viewing and debugging</i>
@@ -66,6 +111,11 @@ You can use each tool independently, or in combination with each other. The foll
                 <i>Agent Unit Testing</i>
                 <i class='more'>→</i>
             </a>
+            <a class='box fill clear' href='https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer'>
+                <p>Analyzer</p>
+                <i>Agent Security Scanner</i>
+                <i class='more'>→</i>
+            </a>
         </div>
     </div>
     <div class='clear box thirdparty'>