Skip to content

Commit 6048d27

Browse files
lbeurerkellnerlbeurerkellner
committed
improve index
1 parent c6484e3 commit 6048d27

File tree

2 files changed

+254
-7
lines changed

2 files changed

+254
-7
lines changed

‎docs/assets/invariant.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,4 +357,179 @@ span.llm::before {
357357

358358
label.md-nav__title {
359359
display: none;
360+
}
361+
362+
.overview {
363+
--body-blue: #6a7aff;
364+
--primary-blue: #3e3aff;
365+
border-radius: 4pt;
366+
display: flex;
367+
flex-direction: row;
368+
justify-content: center;
369+
padding: 5pt 20pt;
370+
align-items: center;
371+
margin-top: 70pt;
372+
margin-bottom: 120pt;
373+
}
374+
375+
.overview .box {
376+
border-radius: 4pt;
377+
text-decoration: none;
378+
background-color: var(--body-blue);
379+
border: 2pt solid var(--primary-blue);
380+
padding: 10pt;
381+
margin: 0pt 5pt;
382+
text-align: left;
383+
color: white;
384+
min-height: 60pt;
385+
display: flex;
386+
flex-direction: column;
387+
font-size: 10pt;
388+
389+
height: 50pt;
390+
position: relative;
391+
}
392+
393+
.overview .box i.more {
394+
position: absolute;
395+
top: 32%;
396+
right: 10pt;
397+
transform: translateY(-50%);
398+
font-size: 15pt;
399+
font-style: normal;
400+
color: var(--primary-blue);
401+
}
402+
403+
.overview .online {
404+
border: 1pt dashed var(--primary-blue);
405+
width: calc(100% - 50pt);
406+
height: 90pt;
407+
position: absolute;
408+
top: calc(-90pt);
409+
left: -1pt;
410+
z-index: 0;
411+
border-top-left-radius: 4pt;
412+
border-top-right-radius: 4pt;
413+
414+
display: flex;
415+
flex-direction: row;
416+
padding: 4pt;
417+
padding-left: 0pt;
418+
padding-top: 20pt;
419+
}
420+
421+
.overview .offline {
422+
border: 1pt dashed var(--primary-blue);
423+
width: calc(100%);
424+
height: 90pt;
425+
position: absolute;
426+
top: calc(100% + 20pt);
427+
left: -1pt;
428+
z-index: 0;
429+
border-radius: 4pt;
430+
431+
display: flex;
432+
flex-direction: row;
433+
padding: 4pt;
434+
padding-left: 0pt;
435+
padding-top: 20pt;
436+
}
437+
438+
.overview .offline hr {
439+
width: 160%;
440+
position: absolute;
441+
top: -25pt;
442+
left: -25%;
443+
/* border-top: 1pt dashed rgb(204, 204, 204); */
444+
background: none;
445+
background-color: transparent;
446+
}
447+
448+
.online div.title, .offline div.title {
449+
position: absolute;
450+
top: 4pt;
451+
left: 4pt;
452+
font-size: 10pt;
453+
margin: 0pt;
454+
padding: 0pt;
455+
line-height: 1.0;
456+
z-index: 100;
457+
border: none;
458+
color: var(--primary-blue);
459+
}
460+
461+
.overview .box:hover {
462+
background-color: var(--primary-blue);
463+
cursor: pointer;
464+
}
465+
466+
.overview .box p, .overview .box i {
467+
padding: 0pt;
468+
margin: 0pt;
469+
white-space: nowrap;
470+
text-overflow: ellipsis;
471+
}
472+
473+
.overview .box p {
474+
font-weight: 500;
475+
}
476+
477+
.overview .box.fill {
478+
width: 80%;
479+
}
480+
481+
.overview .box.fill-2 {
482+
width: 20%;
483+
}
484+
485+
.overview .box.clear {
486+
background-color: white;
487+
color: var(--primary-blue);
488+
border: 1pt solid var(--primary-blue);
489+
}
490+
491+
.overview .box.clear:hover {
492+
background-color: rgb(239, 239, 239);
493+
}
494+
495+
.overview .box.thirdparty:hover {
496+
background: none;
497+
cursor: default;
498+
}
499+
500+
.overview .box.main {
501+
border: none;
502+
padding: 0pt;
503+
display: flex;
504+
}
505+
506+
.overview .box.main:hover {
507+
cursor: default;
508+
}
509+
510+
.overview .box.main>.box {
511+
position: relative;
512+
left: -6pt;
513+
top: -0.5pt;
514+
width: 100%;
515+
}
516+
517+
.overview .box.thirdparty {
518+
background-color: white;
519+
color: grey;
520+
border-width: 1pt;
521+
border-color: grey;
522+
min-height: auto;
523+
height: auto;
524+
white-space: nowrap;
525+
text-align: center;
526+
}
527+
528+
.overview .box.hidden {
529+
opacity: 0.0;
530+
}
531+
532+
.overview.small {
533+
margin-top: 30pt;
534+
margin-bottom: 30pt;
360535
}

‎docs/index.md‎

Lines changed: 79 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,86 @@
22
title: Welcome
33
---
44

5-
# Invariant Documentation
5+
# Invariant Agent Security and Debugging
66

7-
<div class='subtitle'>Learn about Invariant tools for building, testing, and debugging AI agents</div>
7+
<div class='subtitle'>Invariant offers a low-friction toolchain for securing, testing, and debugging agentic AI systems.</div>
88

9-
This site hosts the documentation for the Invariant stack, including Invariant `testing`, [Explorer](https://explorer.invariantlabs.ai) and the Invariant SDK for uploading traces.
9+
The Invariant eco-system offers a toolchain for building and securing agentic AI systems. It is designed to help you build secure agentic systems _from scratch_ or to _secure an existing system with very little overhead_.
1010

11-
To learn more, please select a topic from the tiles below.
11+
For this, it relies on an entirely transparent proxy that intercepts and traces the LLM calls of your agent. This enables security guardrailing and insights during operation, without requiring any code changes to the agent.
12+
13+
<div class='overview small'>
14+
<div class='clear box thirdparty'>
15+
Agent
16+
</div>
17+
<div class='box fill main clear'>
18+
<a class='box clear' href='./gateway'>
19+
<p>Invariant Gateway</p>
20+
<i>Transparent LLM proxy to trace and intercept LLM calls</i>
21+
<i class='more'>→</i>
22+
</a>
23+
</div>
24+
<div class='clear box thirdparty'>
25+
LLM Provider
26+
</div>
27+
</div>
28+
29+
## Overview
30+
31+
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.
32+
33+
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:
34+
35+
<br/>
36+
<br/>
37+
38+
<div class='overview'>
39+
<div class='clear box thirdparty'>
40+
Agent
41+
</div>
42+
<div class='box fill main clear'>
43+
<a class='box clear' href='./gateway'>
44+
<p>Invariant Gateway</p>
45+
<i>Transparent LLM proxy to trace and intercept LLM calls</i>
46+
<i class='more'>→</i>
47+
</a>
48+
<div class='online'>
49+
<div class='title'>Online Guardrails</div>
50+
<div class='box fill clear' style="flex: 1;">
51+
<p>Analyzer</p>
52+
<i>Agent Security Scanner</i>
53+
<i class='more'>→</i>
54+
</div>
55+
</div>
56+
<div class='offline'>
57+
<hr/>
58+
<div class='title'>Offline Analysis</div>
59+
<a class='box fill clear' href='./explorer'>
60+
<p>Explorer</p>
61+
<i>Trace viewing and debugging</i>
62+
<i class='more'>→</i>
63+
</a>
64+
<a class='box fill clear' href='./testing'>
65+
<p>Testing</p>
66+
<i>Agent Unit Testing</i>
67+
<i class='more'>→</i>
68+
</a>
69+
</div>
70+
</div>
71+
<div class='clear box thirdparty'>
72+
LLM Provider
73+
</div>
74+
</div>
75+
76+
You can click any of the boxes to learn more about the respective tool.
77+
78+
## Next Steps
1279

1380
<div class='tiles'>
1481

15-
<a href="testing/" class='tile primary'>
16-
<span class='tile-title'>Testing →</span>
17-
<span class='tile-description'>Use Invariant <code>testing</code> to build debuggable unit tests for your AI agents</span>
82+
<a href="gateway/" class='tile primary'>
83+
<span class='tile-title'>Gateway →</span>
84+
<span class='tile-description'>Setup the Invariant Gateway to trace and intercept LLM calls</span>
1885
</a>
1986

2087
<a href="explorer/" class='tile primary'>
@@ -27,6 +94,11 @@ To learn more, please select a topic from the tiles below.
2794
<span class='tile-description'>Submit your AI agent to the Invariant benchmark registry for comparison</span>
2895
</a>
2996

97+
<a href="testing/" class='tile primary'>
98+
<span class='tile-title'>Testing →</span>
99+
<span class='tile-description'>Use Invariant <code>testing</code> to build debuggable unit tests for your AI agents</span>
100+
</a>
101+
30102
<a href="explorer/Explorer_API/2_traces" class='tile'>
31103
<span class='tile-title'>Trace Format →</span>
32104
<span class='tile-description'>Learn about the Invariant trace format and how to structure your traces for ingestion</span>

0 commit comments

Comments
 (0)