more style

Author: lbeurerkellner

docs/assets/invariant.css

@@ -453,8 +453,8 @@ label.md-nav__title {
     flex-wrap: wrap;
     flex-direction: row;
     padding: 4pt;
-    padding-left: 0pt;
-    padding-top: 7pt;
+    padding-left: 2pt;
+    padding-top: 9pt;
     align-items: flex-start;
     justify-content: flex-start;
 }
@@ -532,7 +532,7 @@ label.md-nav__title {
     border: none;
     padding: 0pt;
     display: flex;
-    width: 65%;
+    width: 45%;
 }
 
 .overview .box.main:hover {
@@ -643,12 +643,40 @@ blockquote pre {
     margin-left: -10pt;
 }
 
-blockquote code {
+blockquote pre code {
     border-radius: 0pt !important;
     border-left-width: 0pt;
     border-right-width: 0pt;
 }
 
+blockquote pre {
+    width: calc(100% + 15pt);
+}
+
 ul.md-nav__list {
     font-weight: 400;
+}
+
+.md-nav__item.md-nav__item--section.md-nav__item--nested {
+    margin-top: 20pt !important;
+}
+
+.md-nav__item.md-nav__item--section.md-nav__item--nested>label {
+    color: black !important;
+}
+
+.risks blockquote {
+    background-color: rgb(254, 243, 243);
+    border: 2pt solid #ff6678 !important;
+}
+
+.risks blockquote>p>strong:first-child {
+    margin-bottom: 10pt;
+    display: inline-block;
+    padding-left: 25pt;
+
+    background: url("/assets/warning.svg") no-repeat 3pt 1pt;
+    background-size: 1.2em;
+    padding-top: -1pt;
+    margin-top: -5pt;
 }

docs/assets/warning.svg

@@ -6,6 +6,7 @@ Secure the code that your agent generates and executes.
 
 Code validation is a critical component of any code-generating LLM system, as it helps to ensure that the code generated by the LLM is safe and secure. Guardrails provides a simple way to validate the code generated by your LLM, using a set of pre-defined rules and checks.
 
+<div class='risks'/>
 > **Code Validation Risks**<br/>
 > Code validation is a critical component of any code-generating LLM system. For example, an insecure agent could:
 

docs/guardrails/code-validation.md

@@ -6,6 +6,7 @@ Guardrail the actions of computer use agents, to enable safe UI interfacing.
 
 Computer use agents are powerful general-purpose reasoners, equipped with their own computer and the ability to interact with it. However, to ensure security and correctness properties, it is important to guardrail the actions of these agents, to prevent them from performing undesired or harmful actions.
 
+<div class='risks'/>
 > **Computer Use Agent Risks**<br/>
 > Computer use agents are powerful general-purpose reasoners, equipped with their own computer and the ability to interact with it. For example, an insecure agent could:
 

docs/guardrails/computer-use.md

@@ -6,6 +6,7 @@ Secure the dataflow of your agentic system, to ensure that sensitive data never
 
 Due to their dynamic nature, agentic systems often mix and combine data from different sources, and can easily leak sensitive information. Guardrails provides a simple way to define dataflow rules, to ensure that sensitive data never leaves the system through unintended channels.
 
+<div class='risks'/>
 > **Dataflow Risks**<br/>
 
 > Due to their dynamic nature, agentic systems often mix and combine data from different sources, and can easily leak sensitive information. For example, an insecure agent could:

docs/guardrails/dataflow-rules.md

@@ -0,0 +1,9 @@
+---
+title: Overview
+---
+
+# Guardrails in Explorer
+
+<div class="subtitle">
+Learn how to use Guardrails in Explorer.
+</div>

docs/guardrails/explorer.md

@@ -8,6 +8,7 @@ At the core of any agentic systems are function and tool calls, i.e. the ability
 
 For security and safety reasons, it is important to ensure that all tool calls an agent executes are validated and well-scoped, to prevent undesired or harmful actions.
 
+<div class='risks'/>
 > **Tool Calling Risks**<br/>
 > Since tools are an agent's interface to interact with the world, they can also be used to perform actions that are harmful or undesired. For example, an insecure agent could:
 

docs/guardrails/function-calls.md

@@ -7,6 +7,7 @@ Detect and prevent infinite loops in your agentic system.
 
 Loop detection is a critical component of any agentic system, as it helps to prevent infinite loops and other undesired behavior. Guardrails provides a simple way to detect and prevent loops in your agentic system.
 
+<div class='risks'/>
 > **Looping Risks**<br/>
 > Loops are a common source of bugs and errors in agentic systems. For example, an insecure agent could:
 

docs/guardrails/loops.md

@@ -0,0 +1,9 @@
+---
+title: Overview
+---
+
+# Rule Language
+
+<div class="subtitle">
+Learn how to write Guardrail rules.
+</div>

docs/guardrails/rules.md

@@ -1,51 +1,79 @@
 ---
-title: Welcome
+title: Invariant Agent Security
 ---
 
-# Invariant Agent Security and Debugging
+# Invariant Agent Security
 
 <div class='subtitle'>A security and debugging layer for agentic AI systems.</div>
 
-Invariant offers a toolchain for building and securing agentic AI systems. It supports building secure agentic AI systems _from scratch_, and to _secure existing or deployed AI agents_ in an organization.
+Invariant is a **security layer to protect agentic AI systems**. It supports building secure agentic AI systems _from scratch_, and to _secure existing or deployed AI agents_ in an organization.
 
-For this, the _Invariant Gateway_ intercepts and traces the LLM calls of your agent. This enables security guardrailing and insights during development and operation, without requiring any code changes.
+For this, the _Invariant Gateway_ **intercepts the LLM calls of your agent**, to implement _guardrailing and security analysis_ during development and operation, without requiring any code changes.
 
 <div class='overview small'>
     <div class='clear box thirdparty'>
         Agent
     </div>
+    ↔
     <div class='box fill main clear'>
         <a class='box clear' href='./gateway'>
             <p>Invariant Gateway</p>
-            <i>Transparent LLM proxy to trace and intercept LLM calls</i>
-            <i class='more'>→</i>
+            <i>Security proxy to intercept LLM and tool calls</i>
+            <i class='more'>↗ </i>
         </a>
     </div>
+    ↔
     <div class='clear box thirdparty'>
         LLM Provider
     </div>
 </div>
 
-## Getting Started as Developer
+## Why You Need A Security Layer for Your Agents
+
+Invariant helps you make sure that your agents are safe from malicious actors and prevents fatal malfunction:
+
+* It **blocks prompt injections and agent jailbreaks**.
+* It **imposes strict** rules on agent capabilities and behavior, to prevent malfunction and abuse.
+* It **analyzes the data flow of your agents**, to ensure that they are not leaking sensitive information.
+* It helps you **steer and control your agents**, to ensure that they are not doing anything unexpected.
+* It ensures that your agents are **in compliance with your organization's policies**.
+* It helps you to **surface novel malicious behavioral patterns** in your agents, and automatically proposes guardrailing rules to prevent them.
+
+Securing your agent is a crucial step in safely deploying AI agents to production or in your organization.
 
-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.
+## Getting Started as Developer
 
-```python hl_lines="5 6 7 8 9 10 11 12"
+To quickly secure your agentic application with Invariant, you can rely on our hosted gateway. It automatically traces and protects your agent's LLM calls and actions by enforcing guardrailing rules:
 
+**Example:** Guardrailing an agent with Invariant
+```python hl_lines='8 9 10 16 17 18 19 20 21 22 23 24'
+import os
 from swarm import Swarm, Agent
 from openai import OpenAI
-from httpx import Client
 
-# === Invariant integration ===
+# 1. Guardrailing Rules
+
+guardrails = """
+raise "Rule 1: Do not talk about Fight Club" if: 
+    (msg: Message)
+    "fight club" in msg.content
+"""
+
+
+# 2. Gateway 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",
+    client = OpenAI(
+        default_headers={
+            "Invariant-Authorization": "Bearer " + os.getenv("INVARIANT_API_KEY"),
+            "Invariant-Guardrails": guardrails.encode("unicode_escape"),
+        },
+        base_url="https://explorer.invariantlabs.ai/api/v1/gateway/<your-project-id>/openai",
     )
 )
 
-# === Agent Implementation ===
+
+# 3. Your Agent Implementation
 
 # define a tool
 def get_weather():
@@ -61,26 +89,29 @@ agent = Agent(
 # run the agent
 response = client.run(
     agent=agent,
-    messages=[{"role": "user", "content": "What's the weather?"}],
+    messages=[{"role": "user", "content": "Tell me more about fight club."}],
 )
+```
 
-print(response.messages[-1]["content"])
-# Output: "It seems to be sunny."
+**Output**
+```bash
+BadRequest: [Invariant] The message did not pass the guardrailing check:
+            'Rule 1: Do not talk about Fight Club'"
 ```
 
-With this code, your agent is automatically tracked and all execution traces will be logged in a designated dataset in Explorer ([screenshot here](./explorer/)).
+With this code, your agent is automatically secured and all execution traces will be logged in a designated dataset in Explorer ([screenshot here](./explorer/)).
 
-Overall, this integration opens up your agent system to the full Invariant family of tools, allowing you to [observe and debug](./explorer/), [write unit tests](testing/), and [analyze your agent's behavior for security vulnerabilities](https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer).
+This integration opens up your agent system to the full Invariant family of tools, allowing you to [guardrail and secure](./guardrails/), [observe and debug](./explorer/) and [unit test](testing/) your agents.
 
-This documentation describes how to get started with Invariant eco-system and how to use the different tools, to build and secure your agentic AI systems.
+This documentation describes how to get started with the Invariant eco-system and how to use the different tools, to build and secure your agentic AI systems.
 
 ## Getting Started as a Security Admin
 
 Looking to observe and secure AI agents in your organization? Read our no-code quickstart guides below, for configuring different agents directly with the Invariant Gateway.
 
-This way, you can keep track of your organization's agents, without having to change their code.
+This way, you can keep track and secure your organization's agents, without having to change their code.
 
-If you are interested in deploying your own dedicated instance of the Invariant Gateway, see [self-hosting](./gateway/self-hosted.md).
+If you are interested in deploying your own dedicated instance of the Invariant Gateway, see our [self-hosting guide](./gateway/self-hosted.md).
 
 <div class='tiles'>
 
@@ -114,15 +145,15 @@ You can use each tool independently, or in combination with each other. The foll
     <div class='box fill main clear'>
         <a class='box clear' href='./gateway'>
             <p>Invariant Gateway</p>
-            <i>Transparent LLM proxy to trace and intercept LLM calls</i>
-            <i class='more'>→</i>
+            <i>Security proxy to trace and intercept LLM calls</i>
+            <i class='more'>↗ </i>
         </a>
         <!-- <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>
+                <i class='more'>↗ </i>
             </div>
         </div> -->
     </div>
@@ -136,21 +167,21 @@ You can use each tool independently, or in combination with each other. The foll
     </div>
     <div class='offline'>
         <div class='title'>Trace Analysis</div>
+        <a class='box fill clear' href='https://github.com/invariantlabs-ai/invariant?tab=readme-ov-file#analyzer'>
+            <p>Guardrails</p>
+            <i>Steer and protect your agents</i>
+            <i class='more'>↗ </i>
+        </a>
         <a class='box fill clear' href='./explorer'>
             <p>Explorer</p>
-            <i>Trace viewing</i>
-            <i class='more'>→</i>
+            <i>Trace analysis and debugging</i>
+            <i class='more'>↗ </i>
         </a>
-        <a class='box fill clear' href='./testing'>
+        <!-- <a class='box fill clear' href='./testing'>
             <p>Testing</p>
             <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>
+            <i class='more'>↗ </i>
+        </a> -->
     </div>
     <div class='clear box thirdparty hidden'>
         LLM Provider