Doc readability value-prop updates (#288)

* Rounds up to nearest 100, makes script elegante suck it mint growth plan, I did it my damn self * mild file struct change to accommodate more scripts * oops don't update text with error message * also handle page navs and still update data * more robust method for updates on nav * final robustification * logo update (note needs design pass) Fixes #274 pending design pass * handling dynamic adjustments on all pages * Update host-env.mdx * Update host-env.mdx * Documentation Value Prop Positioning and Readability Updates * Icon images for docs * replace crew icon * icon & style updates * added stamp img * Big intro section update - for developers * Intro animations for Terminal * transferring currently unused UI to snippets * Massive readability change (bonus update coming) * Prepping Discord CTA (not final) * COMPLETE DRAFT push (incl. Discord CTA) * minor wording change * another minor wording change * OOPS fixed breaking change sry
AgentOps-AI · Jul 20, 2024 · b20f533 · b20f533
1 parent 36986bd
commit b20f533
Show file tree

Hide file tree

Showing 35 changed files with 962 additions and 244 deletions.
diff --git a/docs/mint.json b/docs/mint.json
@@ -51,10 +51,15 @@
     }
   ],
   "navigation": [
+    {
+      "group": "",
+      "pages": [
+        "v1/introduction"
+      ]
+    },
     {
       "group": "Getting Started",
       "pages": [
-        "v1/introduction",
         "v1/quickstart",
         "v1/examples"
       ]
@@ -72,6 +77,7 @@
     {
       "group": "Usage",
       "pages": [
+        "v1/usage/dashboard-info",
         "v1/usage/sdk-reference",
         "v1/usage/environment-variables",
         "v1/usage/tracking-llm-calls",

diff --git a/docs/snippets/add-code-tooltip.mdx b/docs/snippets/add-code-tooltip.mdx
@@ -0,0 +1,3 @@
+<Note>
+	Make sure to call `agentops.init` before calling any `openai`, `cohere`, `crew`, etc models.
+</Note>
diff --git a/docs/snippets/add-env-tooltip.mdx b/docs/snippets/add-env-tooltip.mdx
@@ -0,0 +1,3 @@
+<Tip>
+	Set your API Key as an `.env` variable for easy access.
+</Tip>
diff --git a/docs/snippets/claude-card.mdx b/docs/snippets/claude-card.mdx
diff --git a/docs/snippets/crewai-card.mdx b/docs/snippets/crewai-card.mdx
diff --git a/docs/snippets/discord-cta.mdx b/docs/snippets/discord-cta.mdx
@@ -0,0 +1,6 @@
+<a className="discord-cta-div" href="https://discord.gg/UgJyyxx7uc" target="_blank" rel="noopener noreferrer">
+  <img className="discord-logo" src="https://github.com/AgentOps-AI/agentops/blob/e2ab42a607a9657907dc4d3727d4e07d93c52e94/docs/v1/img/discord.png?raw=true" alt="Discord Logo"/>
+  <span className="discord-cta-text">
+    Join our Discord community for the latest updates and support!
+  </span>
+</a>
diff --git a/docs/snippets/github-stars.mdx b/docs/snippets/github-stars.mdx
@@ -0,0 +1 @@
+<Check>Look useful? [Star us on Github](https://github.com/AgentOps-AI/agentops)! (you may be our <span id="stars-text">2,000th</span> 😊)</Check>
diff --git a/docs/snippets/no-mintlify-cards.mdx b/docs/snippets/no-mintlify-cards.mdx
@@ -0,0 +1,33 @@
+<div className='unminted-cards'>
+	<div className='intro-row'>
+		<div className='intro-card-container'>
+			<img className = 'intro-icon-img' src="https://github.com/AgentOps-AI/agentops/blob/3c03341f5129f9f494ca64ed4e8d03b9a0575db4/docs/images/docs-icons/chat.png?raw=true" />
+			<p className='intro-card-text'>OpenAI automates my job posts...</p>
+		</div>
+		<div className='intro-card-container'>
+			<p className='intro-card-text trailing'>but with a 50% error rate!</p>
+			<img className = 'intro-icon-img trailing-img' src="https://github.com/AgentOps-AI/agentops/blob/438604c3c652a109c90b3d2484f0a18525c55b9e/docs/v1/img/docs-icons/bug-icon.png?raw=true" />
+		</div>
+	</div>
+	<div className='intro-row'>
+		<div className='intro-card-container'>
+			<img className = 'intro-icon-img' src="https://github.com/AgentOps-AI/agentops/blob/388a8a94603393cd2aa15e1adcd56e7f435839f9/docs/images/docs-icons/crew.png?raw=true" />
+			<p className='intro-card-text'>Crew boosts my product on Reddit...</p>
+		</div>
+		<div className='intro-card-container'>
+			<p className='intro-card-text trailing'>but misses key subreddits!</p>
+			<img className = 'intro-icon-img trailing-img' src="https://github.com/AgentOps-AI/agentops/blob/438604c3c652a109c90b3d2484f0a18525c55b9e/docs/v1/img/docs-icons/miss-icon.png?raw=true" />
+		</div>
+	</div>
+	<div className='intro-row'>
+		<div className='intro-card-container'>
+			<img className = 'intro-icon-img' src="https://github.com/AgentOps-AI/agentops/blob/3c03341f5129f9f494ca64ed4e8d03b9a0575db4/docs/images/docs-icons/claude.png?raw=true" />
+			<p className='intro-card-text'>Claude auto-replies to my emails...</p>
+		</div>
+		<div className='intro-card-container'>
+			<p className='intro-card-text trailing'>but has the wrong tone!</p>
+			<img className = 'intro-icon-img trailing-img' src="https://github.com/AgentOps-AI/agentops/blob/438604c3c652a109c90b3d2484f0a18525c55b9e/docs/v1/img/docs-icons/curse-icon.png?raw=true" />
+		</div>
+	</div>
+	<img className="resolved-stamp" src="https://github.com/AgentOps-AI/agentops/blob/d4b8b4eafa005a5455758dc5ddf1d33ed2f0fcc9/docs/v1/img/docs-icons/stamp.png?raw=true"/>
+</div>
diff --git a/docs/snippets/openai-card.mdx b/docs/snippets/openai-card.mdx
diff --git a/docs/snippets/openai-icon.mdx b/docs/snippets/openai-icon.mdx
diff --git a/docs/v1/examples.mdx b/docs/v1/examples.mdx
@@ -49,4 +49,7 @@ mode: "wide"
 </CardGroup>
 
 <script type="module" src="/scripts/github_stars.js"></script>
-<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
+<script type="module" src="/scripts/link_to_api_button.js"></script>
+<script type="module" src="/scripts/scroll-img-fadein-animation.js"></script>
+<script type="module" src="/scripts/button_heartbeat_animation.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/img/chart-waterfall.png b/docs/v1/img/chart-waterfall.png
diff --git a/docs/v1/img/discord.png b/docs/v1/img/discord.png
diff --git a/docs/v1/img/docs-icons/chat.png b/docs/v1/img/docs-icons/chat.png
diff --git a/docs/v1/img/docs-icons/claude.png b/docs/v1/img/docs-icons/claude.png
diff --git a/docs/v1/img/docs-icons/crew.png b/docs/v1/img/docs-icons/crew.png
diff --git a/docs/v1/integrations/autogen.mdx b/docs/v1/integrations/autogen.mdx
@@ -3,6 +3,9 @@ title: Autogen
 description: "AgentOps provides first class support for Autogen"
 ---
 
+import CodeTooltip from '/snippets/add-code-tooltip.mdx'
+import EnvTooltip from '/snippets/add-env-tooltip.mdx'
+
 AgentOps and Autogen teamed up to make monitoring Autogen agents dead simple.
 
 Autogen has comprehensive [documentation](https://microsoft.github.io/autogen/docs) available as well as a great [quickstart](https://microsoft.github.io/autogen/docs/Getting-Started).
@@ -32,43 +35,29 @@ Autogen has comprehensive [documentation](https://microsoft.github.io/autogen/do
 		</CodeGroup>
 	</Step>
 	<Step title="Add 3 lines of code">
-		1. Before setting up anything in Autogen, call `agentops.init()`
-		2. At the end of your agent run, call `agentops.end_session("Success")`
-		<CodeGroup>
-			```python python
-			import agentops
-
-			# Beginning of program (i.e. main.py, __init__.py)
-			# IMPORTANT: Must be before using any autogen setup
-			agentops.init(<INSERT YOUR API KEY HERE>)
-			...
-			# End of program (e.g. main.py)
-			agentops.end_session("Success") # Success|Fail|Indeterminate
-			```
-		</CodeGroup>
-		<Check>
-			Instantiating the AgentOps client will automatically instrument Autogen, meaning you will be able to see all
-			of your sessions on the AgentOps Dashboard along with the full LLM chat histories, cost, token counts, etc.
-		</Check>
-		<Tip>
-			For more features see our [Usage](/v1/usage) section.
-		</Tip>
-	</Step>
-	<Step title="Set your API key">
-		Retrieve an API Key from your Settings > [Projects & API Keys](https://app.agentops.ai/settings/projects) page.
-		<Frame type="glass" caption="Settings > Projects & API Keys">
-			<img height="200" src="/images/api-keys.png" />
-		</Frame>
-		<Info>
-			API keys are tied to individual projects.<br></br>
-			A Default Project has been created for you, so just click Copy API Key
-		</Info>
-		Set this API Key in your [environment variables](/v1/usage/environment-variables)
-		```python .env
-		AGENTOPS_API_KEY=<YOUR API KEY>
-		```
+		<CodeTooltip/>
+		<span className="api-key-container">
+			<CodeGroup>
+				```python python
+				import agentops
+				agentops.init(<INSERT YOUR API KEY HERE>)
+				...
+				# MUST END SESSION at end of program (e.g. main.py)
+				agentops.end_session("Success") # Success|Fail|Indeterminate
+				```
+			</CodeGroup>
+		</span>
+		<EnvTooltip />
+    <span className="api-key-container">
+      <CodeGroup>
+        ```python .env
+        AGENTOPS_API_KEY=<YOUR API KEY>
+        ```
+      </CodeGroup>
+      Read more about [environment variables](/v1/usage/environment-variables)
+    </span>
 	</Step>
-    <Step title="Run your agent">
+	<Step title="Run your agent">
 		Execute your program and visit [app.agentops.ai/drilldown](https://app.agentops.ai/drilldown) to observe your Autogen Agent! 🕵️
 		<Tip>
 			After your run, AgentOps prints a clickable url to console linking directly to your session in the Dashboard
@@ -81,4 +70,8 @@ Autogen has comprehensive [documentation](https://microsoft.github.io/autogen/do
 </Steps>
 
 <script type="module" src="/scripts/github_stars.js"></script>
-<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
+<script type="module" src="/scripts/link_to_api_button.js"></script>
+<script type="module" src="/scripts/scroll-img-fadein-animation.js"></script>
+<script type="module" src="/scripts/button_heartbeat_animation.js"></script>
+<script type="css" src="/styles/styles.css"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/integrations/cohere.mdx b/docs/v1/integrations/cohere.mdx
@@ -3,6 +3,9 @@ title: Cohere
 description: "AgentOps provides first class support for Cohere"
 ---
 
+import CodeTooltip from '/snippets/add-code-tooltip.mdx'
+import EnvTooltip from '/snippets/add-env-tooltip.mdx'
+
 <Note>
 This is a living integration. Should you need any added functionality message us on [Discord](https://discord.gg/UgJyyxx7uc)!
 </Note>
@@ -25,45 +28,33 @@ This is a living integration. Should you need any added functionality message us
     <Check>[Give us a star](https://github.com/AgentOps-AI/agentops) on GitHub while you're at it (you may be our <span id="stars-text">2,000th</span> 😊)</Check>
   </Step>
 	<Step title="Add 3 lines of code">
+    <CodeTooltip/>
+    <span className="api-key-container">
 		<CodeGroup>
 			```python python
 			import agentops
-
-			# Beginning of program (i.e. main.py, __init__.py)
-			# IMPORTANT: Must be before calling `co = cohere.Client()`
 			agentops.init(<INSERT YOUR API KEY HERE>)
       co = cohere.Client()
 			...
 			# End of program (e.g. main.py)
 			agentops.end_session("Success") # Success|Fail|Indeterminate
 			```
 		</CodeGroup>
+    </span>
     <Warning>
       Requires cohere>=5.4.0
     </Warning>
-    <Check>
-      Instantiating the AgentOps client will automatically instrument Cohere, meaning you will be able to see all
-      of your sessions on the AgentOps Dashboard along with the full LLM chat histories, cost, token counts, etc.
-    </Check>
-    <Tip>
-      For more features see our [Usage](/v1/usage) section.
-    </Tip>
-	</Step>
-	<Step title="Set your API key">
-		Retrieve an API Key from your Settings > [Projects & API Keys](https://app.agentops.ai/settings/projects) page.
-		<Frame type="glass" caption="Settings > Projects & API Keys">
-			<img height="200" src="/images/api-keys.png" />
-		</Frame>
-		<Info>
-			API keys are tied to individual projects.<br></br>
-			A Default Project has been created for you, so just click Copy API Key
-		</Info>
-		Set this API Key in your [environment variables](/v1/usage/environment-variables)
-		```python .env
-		AGENTOPS_API_KEY=<YOUR API KEY>
-		```
+		<EnvTooltip />
+    <span className="api-key-container">
+      <CodeGroup>
+        ```python .env
+        AGENTOPS_API_KEY=<YOUR API KEY>
+        ```
+      </CodeGroup>
+      Read more about [environment variables](/v1/usage/environment-variables)
+    </span>
 	</Step>
-    <Step title="Run your Agent">
+  <Step title="Run your Agent">
 		Execute your program and visit [app.agentops.ai/drilldown](https://app.agentops.ai/drilldown) to observe your Agents! 🕵️
 		<Tip>
 			After your run, AgentOps prints a clickable url to console linking directly to your session in the Dashboard
@@ -116,4 +107,8 @@ This is a living integration. Should you need any added functionality message us
 </CodeGroup>
 
 <script type="module" src="/scripts/github_stars.js"></script>
-<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
+<script type="module" src="/scripts/link_to_api_button.js"></script>
+<script type="module" src="/scripts/scroll-img-fadein-animation.js"></script>
+<script type="module" src="/scripts/button_heartbeat_animation.js"></script>
+<script type="css" src="/styles/styles.css"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/integrations/crewai.mdx b/docs/v1/integrations/crewai.mdx
@@ -3,7 +3,10 @@ title: 'CrewAI'
 description: '[CrewAI](https://crewai.io) is a framework for easily building multi-agent applications.'
 ---
 
-Crew and AgentOps have a first class partnership, adding agent observability to all Crew runs with 3 lines of code.
+import CodeTooltip from '/snippets/add-code-tooltip.mdx'
+import EnvTooltip from '/snippets/add-env-tooltip.mdx'
+
+AgentOps and CrewAI teamed up to make monitoring Crew agents dead simple. Crew and AgentOps have a first class partnership, adding agent observability to all Crew runs with 3 lines of code.
 
 <Card title="Crew.ai + AgentOps" icon="ship" href="https://www.loom.com/share/cfcaaef8d4a14cc7a974843bda1076bf">
 	CrewAI multi-agent framework with AgentOps support
@@ -37,43 +40,29 @@ Crew has comprehensive [documentation](https://docs.crewai.com) available as wel
 		</CodeGroup>
 	</Step>
 	<Step title="Add 3 lines of code">
-		1. Before calling the `Crew()` constructor in your code, call `agentops.init()`
-		2. At the end of your Crew run, call `agentops.end_session("Success")`
-		<CodeGroup>
-			```python python
-			import agentops
-
-			# Beginning of program (i.e. main.py, __init__.py)
-			# IMPORTANT: Must be before calling the `Crew()` constructor
-			agentops.init(<INSERT YOUR API KEY HERE>)
-			...
-			# End of program (e.g. main.py)
-			agentops.end_session("Success") # Success|Fail|Indeterminate
-			```
-		</CodeGroup>
-		<Check>
-			Instantiating the AgentOps client will automatically instrument Crew, meaning you will be able to see all
-			of your sessions on the AgentOps Dashboard along with the full LLM chat histories, cost, token counts, etc.
-		</Check>
-		<Tip>
-			For more features see our [Usage](/v1/usage) section.
-		</Tip>
-	</Step>
-	<Step title="Set your API key">
-		Retrieve an API Key from your Settings > [Projects & API Keys](https://app.agentops.ai/settings/projects) page.
-		<Frame type="glass" caption="Settings > Projects & API Keys">
-			<img height="200" src="/images/api-keys.png" />
-		</Frame>
-		<Info>
-			API keys are tied to individual projects.<br></br>
-			A Default Project has been created for you, so just click Copy API Key
-		</Info>
-		Set this API Key in your [environment variables](/v1/usage/environment-variables)
-		```python .env
-		AGENTOPS_API_KEY=<YOUR API KEY>
-		```
+		<CodeTooltip/>
+		<span className="api-key-container">
+			<CodeGroup>
+				```python python
+				import agentops
+				agentops.init(<INSERT YOUR API KEY HERE>)
+				...
+				# MUST END SESSION at end of program (e.g. main.py)
+				agentops.end_session("Success") # Success|Fail|Indeterminate
+				```
+			</CodeGroup>
+		</span>
+		<EnvTooltip />
+    <span className="api-key-container">
+      <CodeGroup>
+        ```python .env
+        AGENTOPS_API_KEY=<YOUR API KEY>
+        ```
+      </CodeGroup>
+      Read more about [environment variables](/v1/usage/environment-variables)
+    </span>
 	</Step>
-    <Step title="Run your crew">
+	<Step title="Run your crew">
 		Execute your program and visit [app.agentops.ai/drilldown](https://app.agentops.ai/drilldown) to observe your Crew! 🕵️
 		<Tip>
 			After your run, AgentOps prints a clickable url to console linking directly to your session in the Dashboard
@@ -102,4 +91,8 @@ agentops.init(skip_auto_end_session=True)
 </CardGroup>
 
 <script type="module" src="/scripts/github_stars.js"></script>
-<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
+<script type="module" src="/scripts/link_to_api_button.js"></script>
+<script type="module" src="/scripts/scroll-img-fadein-animation.js"></script>
+<script type="module" src="/scripts/button_heartbeat_animation.js"></script>
+<script type="css" src="/styles/styles.css"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<Check>Look useful? [Star us on Github](https://github.com/AgentOps-AI/agentops)! (you may be our <span id="stars-text">2,000th</span> 😊)</Check>