[Docs] Update and clean existing docs for better readability (#558)

* add `ai21` to docs page

* rename anthropic guide to `README.md`

* oops

* add ai21 labs logo image

* update image to png

* deleting image, cannot use as intended

* add ai21 session image for docs

* overhaul ai21 docs page

* remove `api-key-container` span element

* remove script to get api key button

* remove note for living integration

* add groq session image to external

* add groq integrations docs page

* remove code from groq docs in steps

* add mistral integration docs page

* remove `anthropic_example.ipynb`

* clean anthropic example notebooks

* fix link to session gif

* update anthropic integration description

* add anthropic, mistral and cohere images

* update examples pages

* rename to agent examples

* update fastapi to restapi

* update installation step for crewai

* populate multi session example page

* clean notebook

* update langchain example page

* modify link to `blob/main/...`

* overhauled integrations docs pages

* move `}` down

docs/mint.json

@@ -87,12 +87,15 @@
     {
       "group": "Integrations",
       "pages": [
+        "v1/integrations/ai21",
         "v1/integrations/anthropic",
         "v1/integrations/autogen",
         "v1/integrations/cohere",
         "v1/integrations/crewai",
+        "v1/integrations/groq",
         "v1/integrations/langchain",
         "v1/integrations/litellm",
+        "v1/integrations/mistral",
         "v1/integrations/multion",
         "v1/integrations/ollama",
         "v1/integrations/openai",

docs/v1/examples/examples.mdx

@@ -6,34 +6,60 @@ mode: "wide"
 
 ## Explore our example code to see AgentOps in action!
 
+### Agent Examples
 <CardGroup cols={2}>
     <Card title="Simple Agent" icon="microchip-ai" iconType="solid" href="/v1/examples/simple_agent">
         Jupyter Notebook with sample code that you can run! Start here!
     </Card>
-    <Card title="Crew.ai Example" icon="ship" href="/v1/integrations/crewai">
-        CrewAI multi-agent framework with AgentOps support
+    <Card title="Multi-Agent" icon="people-arrows" iconType="duotone" href="/v1/examples/multi_agent">
+        Jupyter Notebook with a simple multi-agent design
+    </Card>
+    <Card title="Multi Session" icon="computer" href="/v1/examples/multi_session">
+        Manage multiple sessions at the same time
+    </Card>
+</CardGroup>
+
+### Integration Examples
+<CardGroup cols={2}>
+    <Card title="AI21" icon="brain" href="/v1/integrations/ai21">
+        Integration with AI21's language models
+    </Card>
+    <Card title="Anthropic" icon={<img src="https://www.github.com/agentops-ai/agentops/blob/main/docs/images/external/anthropic/anthropic_icon_ivory.png?raw=true" alt="Anthropic" />} iconType="image" href="/v1/integrations/anthropic">
+        Track observations from Claude, Haiku and Sonnet series of models
     </Card>
     <Card title="AutoGen" icon="microsoft" href="/v1/integrations/autogen">
         AutoGen multi-agent conversible workflow with tool usage
     </Card>
-    <Card title="Multi-Agent Code Example" icon="people-arrows" iconType="duotone" href="/v1/examples/multi_agent">
-        Jupyter Notebook with a simple multi-agent design
+    <Card title="Cohere" icon={<img src="https://www.github.com/agentops-ai/agentops/blob/main/docs/images/external/cohere/Cohere-Logo-Mono Marble White-RGB.png?raw=true" alt="Cohere" />} iconType="image" href="/v1/integrations/cohere">
+        First class support for Command-R-Plus and chat streaming
+    </Card>
+    <Card title="Crew.ai" icon="ship" href="/v1/integrations/crewai">
+        CrewAI multi-agent framework with AgentOps support
     </Card>
-    <Card title="LangChain Example" icon="crow" href="/v1/examples/langchain">
+    <Card title="Groq" icon="bolt" href="/v1/integrations/groq">
+        Ultra-fast LLM inference with Groq Cloud
+    </Card>
+    <Card title="LangChain" icon="crow" href="/v1/examples/langchain">
         Jupyter Notebook with a sample LangChain integration
     </Card>
-    <Card title="FastAPI Example" icon="bolt-lightning" href="/v1/examples/fastapi">
-        Create a REST server that performs and observes agent tasks
+    <Card title="LiteLLM" icon="wand-magic-sparkles" href="/v1/integrations/litellm">
+        Unified interface for multiple LLM providers
     </Card>
-    <Card title="Multi Session Example" icon="computer" href="/v1/examples/multi_session">
-        Manage multiple sessions at the same time
+    <Card title="Mistral" icon={<img src="https://www.github.com/agentops-ai/agentops/blob/main/docs/images/external/mistral/mistral-ai-icon.png?raw=true" alt="Mistral" />} iconType="image" href="/v1/integrations/mistral">
+        Support for Mistral AI's open-weight models
     </Card>
-    <Card title="MultiOn Example" icon="atom" href="/v1/examples/multion">
+    <Card title="MultiOn" icon="atom" href="/v1/examples/multion">
         Create an autonomous browser agent capable of navigating the web and extracting information
     </Card>
-    <Card title="Ollama Example" icon={<img src="https://www.github.com/agentops-ai/agentops/blob/main/docs/images/external/ollama/ollama-icon.png?raw=true" alt="Ollama" />} iconType="image" href="/v1/examples/ollama">
+    <Card title="Ollama" icon={<img src="https://www.github.com/agentops-ai/agentops/blob/main/docs/images/external/ollama/ollama-icon.png?raw=true" alt="Ollama" />} iconType="image" href="/v1/examples/ollama">
         Simple Ollama integration with AgentOps
     </Card>
+    <Card title="OpenAI" icon={<img src="https://www.github.com/agentops-ai/agentops/blob/main/docs/images/external/openai/openai-white-logomark.png?raw=true" alt="OpenAI" />} iconType="image" href="/v1/integrations/openai">
+        First class support for GPT family of models
+    </Card>
+    <Card title="REST API" icon="bolt-lightning" href="/v1/examples/restapi">
+        Create a REST server that performs and observes agent tasks
+    </Card>
 </CardGroup>
 
 ## Video Guides
@@ -58,7 +84,6 @@ mode: "wide"
 </CardGroup>
 
 <script type="module" src="/scripts/github_stars.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>

docs/v1/examples/langchain.mdx

@@ -3,7 +3,7 @@ title: 'LangChain Example'
 description: 'Using the LangChain Callback Handler'
 mode: "wide"
 ---
-_View Notebook on <a href={'https://github.com/AgentOps-AI/agentops/blob/48ae12d4e4e085eed57346f1c40a054097431937/examples/langchain_examples.ipynb'} target={'_blank'}>Github</a>_
+_View Notebook on <a href={'https://github.com/AgentOps-AI/agentops/blob/main/examples/langchain_examples.ipynb'} target={'_blank'}>Github</a>_
 
 
 {/*  SOURCE_FILE: examples/langchain_examples/langchain_examples.ipynb  */}
@@ -149,181 +149,4 @@ Finally, check your run on [AgentOps](https://app.agentops.ai)
 Now if we look in the AgentOps dashboard, you will see a session recorded with the LLM calls and tool usage.
 
 ## Langchain V0.1 Example
-This example is out of date. You can uncomment all the following cells and the example will run but AgentOps is deprecating support.
-
-
-```python
-# %pip install langchain==0.1.6
-```
-
-
-```python
-# import os
-# from langchain_openai import ChatOpenAI
-# from langchain.agents import initialize_agent, AgentType
-# from langchain.agents import tool
-```
-
-The only difference with using AgentOps is that we'll also import this special Callback Handler
-
-
-```python
-# from agentops.partners.langchain_callback_handler import (
-#     LangchainCallbackHandler as AgentOpsLangchainCallbackHandler,
-# )
-```
-
-Next, we'll grab our two API keys.
-
-
-```python
-# from dotenv import load_dotenv
-
-# load_dotenv()
-```
-
-This is where AgentOps comes into play. Before creating our LLM instance via Langchain, first we'll create an instance of the AO LangchainCallbackHandler. After the handler is initialized, a session will be recorded automatically.
-
-Pass in your API key, and optionally any tags to describe this session for easier lookup in the AO dashboard.
-
-
-```python
-# AGENTOPS_API_KEY = os.environ.get("AGENTOPS_API_KEY")
-# OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")
-
-# agentops_handler = AgentOpsLangchainCallbackHandler(
-#     api_key=AGENTOPS_API_KEY, default_tags=["Langchain Example"]
-# )
-
-# llm = ChatOpenAI(
-#     openai_api_key=OPENAI_API_KEY, callbacks=[agentops_handler], model="gpt-3.5-turbo"
-# )
-```
-
-You can also retrieve the `session_id` of the newly created session.
-
-
-```python
-# print("Agent Ops session ID: " + str(agentops_handler.current_session_ids))
-```
-
-Agents generally use tools. Let's define a simple tool here. Tool usage is also recorded.
-
-
-```python
-# @tool
-# def find_movie(genre) -> str:
-#     """Find available movies"""
-#     if genre == "drama":
-#         return "Dune 2"
-#     else:
-#         return "Pineapple Express"
-
-
-# tools = [find_movie]
-```
-
-For each tool, you need to also add the callback handler
-
-
-```python
-# for t in tools:
-#     t.callbacks = [agentops_handler]
-```
-
-Finally, let's use our agent! Pass in the callback handler to the agent, and all the actions will be recorded in the AO Dashboard
-
-
-```python
-# agent = initialize_agent(
-#     tools,
-#     llm,
-#     agent=AgentType.CHAT_ZERO_SHOT_REACT_DESCRIPTION,
-#     verbose=True,
-#     callbacks=[
-#         agentops_handler
-#     ],  # You must pass in a callback handler to record your agent
-#     handle_parsing_errors=True,
-# )
-```
-
-
-```python
-# agent.invoke("What comedies are playing?", callbacks=[agentops_handler])
-```
-
-## Check your session
-Finally, check your run on [AgentOps](https://app.agentops.ai)
-
-# Async Agents
-
-Several langchain agents require async callback handlers. AgentOps also supports this.
-
-
-```python
-# import os
-# from langchain.chat_models import ChatOpenAI
-# from langchain.agents import initialize_agent, AgentType
-# from langchain.agents import tool
-```
-
-
-```python
-# from agentops.partners.langchain_callback_handler import (
-#     AsyncLangchainCallbackHandler as AgentOpsAsyncLangchainCallbackHandler,
-# )
-```
-
-
-```python
-# from dotenv import load_dotenv
-
-# load_dotenv()
-
-# AGENTOPS_API_KEY = os.environ.get("AGENTOPS_API_KEY")
-# OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")
-```
-
-
-```python
-# agentops_handler = AgentOpsAsyncLangchainCallbackHandler(
-#     api_key=AGENTOPS_API_KEY, tags=["Async Example"]
-# )
-
-# llm = ChatOpenAI(
-#     openai_api_key=OPENAI_API_KEY, callbacks=[agentops_handler], model="gpt-3.5-turbo"
-# )
-
-# print("Agent Ops session ID: " + str(await agentops_handler.session_id))
-```
-
-
-```python
-# @tool
-# def find_movie(genre) -> str:
-#     """Find available movies"""
-#     if genre == "drama":
-#         return "Dune 2"
-#     else:
-#         return "Pineapple Express"
-
-
-# tools = [find_movie]
-
-# for t in tools:
-#     t.callbacks = [agentops_handler]
-```
-
-
-```python
-# agent = initialize_agent(
-#     tools,
-#     llm,
-#     agent=AgentType.CHAT_ZERO_SHOT_REACT_DESCRIPTION,
-#     verbose=True,
-#     handle_parsing_errors=True,
-#     callbacks=[agentops_handler],
-# )
-
-# await agent.arun("What comedies are playing?")
-```
+You can find the example in the [notebook](https://github.com/AgentOps-AI/agentops/blob/main/examples/langchain_examples.ipynb).