AgentOps-AI · albertkimjunior · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024
diff --git a/docs/snippets/api-key-button.mdx b/docs/snippets/api-key-button.mdx
@@ -0,0 +1,3 @@
+<button className="action-button">
+  Reveal API Key
+</button>
diff --git a/docs/snippets/api-key-warning.mdx b/docs/snippets/api-key-warning.mdx
@@ -0,0 +1,3 @@
+<Warning>
+  Psst, anyone else around? Careful when revealing your API key!
+</Warning>
diff --git a/docs/snippets/dynamic-dashboard.mdx b/docs/snippets/dynamic-dashboard.mdx
diff --git a/docs/v1/concepts/core-concepts.mdx b/docs/v1/concepts/core-concepts.mdx
@@ -91,3 +91,6 @@ Optionally, agents may also have:
 ### Threads
 
 *Details coming soon.*
+
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/concepts/decorators.mdx b/docs/v1/concepts/decorators.mdx
@@ -21,3 +21,6 @@ Sometimes your agent system will use functions that are important to track as [`
 
 Adding this decorator above any function will allow every instance of that function call to be tracked and displayed
 in your [Session](v1/concepts/sessions) Drill-Down on the dashboard.
+
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/concepts/events.mdx b/docs/v1/concepts/events.mdx
@@ -105,3 +105,6 @@ def scrape_website(url: str):
     record(tool_event)
 ```
 </CodeGroup>
+
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/concepts/host-env.mdx b/docs/v1/concepts/host-env.mdx
@@ -29,4 +29,7 @@ AgentOps users can opt out of certain environment data collection by setting the
 AGENTOPS_ENV_DATA_OPT_OUT=True
 ```
 
-For more questions on privacy and data usage, please [send us an email](mailto:[email protected])
+For more questions on privacy and data usage, please [send us an email](mailto:[email protected])
+
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/concepts/sessions.mdx b/docs/v1/concepts/sessions.mdx
@@ -69,4 +69,7 @@ _More info for the curious_
 Under the hood, `agentops.init()` sets up a `Client` object with various configuration options like your API key, worker thread options
 for when to send out batches of events, etc. Whenever you start a new session, these configuration options will automatically
 be applied. You can also apply different configuration options when you start a new session by passing in a
-[Configuration](/v1/usage/sdk-reference/#configuration) object.
+[Configuration](/v1/usage/sdk-reference/#configuration) object.
+
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/concepts/tags.mdx b/docs/v1/concepts/tags.mdx
@@ -50,4 +50,7 @@ agentops.add_tags(['appended tag'])
 ## Session Drill-down
 1. Click the session selector button
 2. In the session selector, click "Tags"
-3. Choose what tags to search by
+3. Choose what tags to search by
+
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/examples.mdx b/docs/v1/examples.mdx
@@ -41,3 +41,6 @@ mode: "wide"
         ![thumbnail](https://cdn.loom.com/sessions/thumbnails/679d65cc06f148299e8dffc459d053ab-with-play.gif)
     </Card>
 </CardGroup>
+
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>
diff --git a/docs/v1/integrations/autogen.mdx b/docs/v1/integrations/autogen.mdx
@@ -19,7 +19,7 @@ Autogen has comprehensive [documentation](https://microsoft.github.io/autogen/do
 			poetry add agentops
 			```
 		</CodeGroup>
-		<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>
+		<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="Install Autogen">
 		<CodeGroup>
@@ -34,18 +34,20 @@ Autogen has comprehensive [documentation](https://microsoft.github.io/autogen/do
 	<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
+		<div className="adjust-api-key">
+			<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>
+				# 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>
+		</div>
 		<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.
@@ -63,10 +65,12 @@ Autogen has comprehensive [documentation](https://microsoft.github.io/autogen/do
 			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>
-		```
+		<div className="adjust-api-key">
+			Set this API Key in your [environment variables](/v1/usage/environment-variables)
+			```python .env
+			AGENTOPS_API_KEY=<YOUR API KEY>
+			```
+		</div>
 	</Step>
     <Step title="Run your agent">
 		Execute your program and visit [app.agentops.ai/drilldown](https://app.agentops.ai/drilldown) to observe your Autogen Agent! 🕵️
@@ -80,19 +84,5 @@ Autogen has comprehensive [documentation](https://microsoft.github.io/autogen/do
 	</Step>
 </Steps>
 
-<script>
-  {window.addEventListener('load', function() {
-    fetch("https://api.github.com/repos/AgentOps-AI/agentops")
-      .then((response) => response.json())
-      .then((data) => {
-        const stars = Math.ceil(data.stargazers_count / 1000) * 1000;
-        const dataContainer = document.getElementById("stars-text");
-        dataContainer.innerHTML = `${stars.toLocaleString()}th`;
-
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-        document.getElementById("stars-text").textContent = 'Error loading data.';
-      });
-  })}
-</script>
+<script type="module" src="/scripts/github_stars.js"></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
@@ -25,19 +25,21 @@ 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">
-		<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>
+		<div className="adjust-api-key">
+      <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>
+		</div>
     <Warning>
       Requires cohere>=5.4.0
     </Warning>
@@ -59,9 +61,11 @@ This is a living integration. Should you need any added functionality message us
 			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>
-		```
+    <div className="adjust-api-key">
+      ```python .env
+      AGENTOPS_API_KEY=<YOUR API KEY>
+			```
+		</div>
 	</Step>
     <Step title="Run your Agent">
 		Execute your program and visit [app.agentops.ai/drilldown](https://app.agentops.ai/drilldown) to observe your Agents! 🕵️
@@ -77,57 +81,45 @@ This is a living integration. Should you need any added functionality message us
 
 ## Full Examples
 
-<CodeGroup>
-  ```python chat()
-  import cohere
-  import agentops
-
-  agentops.init(<INSERT YOUR API KEY HERE>)
+<div className="adjust-api-key">
+  <CodeGroup>
+    ```python chat()
+    import cohere
+    import agentops
 
-  co = cohere.Client()
+    agentops.init(<INSERT YOUR API KEY HERE>)
 
-  chat = co.chat(
-      message="Is it pronounced ceaux-hear or co-hehray?"
-  )
+    co = cohere.Client()
 
-  print(chat)
+    chat = co.chat(
+        message="Is it pronounced ceaux-hear or co-hehray?"
+    )
 
-  agentops.end_session('Success')
-  ```
+    print(chat)
 
-  ```python chat_stream()
-  import cohere
-  import agentops
+    agentops.end_session('Success')
+    ```
 
-  agentops.init(<INSERT YOUR API KEY HERE>)
+    ```python chat_stream()
+    import cohere
+    import agentops
 
-  co = cohere.Client()
+    agentops.init(<INSERT YOUR API KEY HERE>)
 
-  stream = co.chat_stream(
-      message="Write me a haiku about the synergies between Cohere and AgentOps"
-  )
+    co = cohere.Client()
 
-  for event in stream:
-      if event.event_type == "text-generation":
-          print(event.text, end='')
+    stream = co.chat_stream(
+        message="Write me a haiku about the synergies between Cohere and AgentOps"
+    )
 
-  agentops.end_session('Success')
-  ```
-</CodeGroup>
+    for event in stream:
+        if event.event_type == "text-generation":
+            print(event.text, end='')
 
-<script>
-  {window.addEventListener('load', function() {
-    fetch("https://api.github.com/repos/AgentOps-AI/agentops")
-      .then((response) => response.json())
-      .then((data) => {
-        const stars = Math.ceil(data.stargazers_count / 1000) * 1000;
-        const dataContainer = document.getElementById("stars-text");
-        dataContainer.innerHTML = `${stars.toLocaleString()}th`;
+    agentops.end_session('Success')
+    ```
+  </CodeGroup>
+</div>
 
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-        document.getElementById("stars-text").textContent = 'Error loading data.';
-      });
-  })}
-</script>
+<script type="module" src="/scripts/github_stars.js"></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
@@ -44,18 +44,20 @@ Crew has comprehensive [documentation](https://docs.crewai.com) available as wel
 	<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
+		<div className="adjust-api-key">
+			<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>
+				# 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>
+		</div>
 		<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.
@@ -73,10 +75,12 @@ Crew has comprehensive [documentation](https://docs.crewai.com) available as wel
 			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>
-		```
+		<div className="adjust-api-key">
+			Set this API Key in your [environment variables](/v1/usage/environment-variables)
+			```python .env
+			AGENTOPS_API_KEY=<YOUR API KEY>
+			```
+		</div>
 	</Step>
     <Step title="Run your crew">
 		Execute your program and visit [app.agentops.ai/drilldown](https://app.agentops.ai/drilldown) to observe your Crew! 🕵️
@@ -106,19 +110,5 @@ agentops.init(skip_auto_end_session=True)
     <Card title="Markdown Validator" icon="markdown" href="https://github.com/Agentops-AI/crewAI-examples/tree/main/markdown_validator" />
 </CardGroup>
 
-<script>
-  {window.addEventListener('load', function() {
-    fetch("https://api.github.com/repos/AgentOps-AI/agentops")
-      .then((response) => response.json())
-      .then((data) => {
-        const stars = Math.ceil(data.stargazers_count / 1000) * 1000;
-        const dataContainer = document.getElementById("stars-text");
-        dataContainer.innerHTML = `${stars.toLocaleString()}th`;
-
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-        document.getElementById("stars-text").textContent = 'Error loading data.';
-      });
-  })}
-</script>
+<script type="module" src="/scripts/github_stars.js"></script>
+<script type="module" src="/scripts/adjust_api_dynamically.js"></script>