/* Terminal hero animation styling */

.terminal-border {
  border: 4px solid #D1E6ED;
  background-color: #D1E6ED;
  padding: 5px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  padding: 0;
  box-shadow: 2px 8px 8px rgba(0, 0, 0, 0.15);
}

.terminal-container {
  border: 8px solid black;
  border-radius: 12px;
  background-color: #262626;
  height: 16em;
  font-family: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 0em 0 0 1em;
  font-size: 1.2em;
  color: white;
}

#terminal-content {
  display: flex;
  flex-direction: column;
  justify-content: left;
  gap: 0;
}

#terminal-content > * {
  margin: 0;
  padding: 0;
}

.cursor-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
}

#inline-code-img {
  width: 1.2em;
  height: auto;
  opacity: 0;
  display: none;
  margin: 0;
  padding: 0;
  border-radius: 6px;
}

#inline-code-img.on {
  opacity: 1;
  display: flex;
}

.empty-space {
  opacity: 0;
  display: flex;
}

#toggle-empty-space {
  opacity: 0;
  display: flex;
}

.off {
  display: none !important;
}

#barely-space {
  opacity: 0;
  font-size: 0.5em;
  display: flex;
}

/* Heart rate monitor animations */

.heartbeat-button {
  position: relative;
  padding: 0.4em 1.4em;
  font-size: 1.6em;
  font-weight: bold;
  border: none;
  color: white;
  background: #7046E0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 2em;
  margin-bottom: 1em;
  box-shadow: 0 4px 6px rgba(112, 70, 224, 0.5); /* Purple shaded box shadow */
  z-index: 2;
  width: 30%;
}

/* API key button spacing */

.api-key-button {
  position: absolute;
  background-color: #7046E0;
  border: none;
  color: white;
  padding: 0.3em 0.8em;
  font-size: 0.95em;
  font-weight: bold;
  border-radius: 4px;
}

.api-key-button.pattern2 {
  margin-top: 2.5em; /* Set distance from the top of the div */
  margin-left: 24.8em;
}

.api-key-button.pattern1 {
  margin-top: 0.9em; /* Set distance from the top of the div */
  margin-left: 19.2em;
}

.api-key-button.pattern0 {
  margin-top: 4em; /* Set distance from the top of the div */
  margin-left: 1.9em;
}

/* Discord CTA styling */
.discord-cta-div {
  display: flex;
  margin: 0 auto;
  align-items: center;
  background-color: rgba(114, 137, 218, 0.6);
  color: white;
  border: 3px solid rgba(88, 100, 242, 0.8);
  padding: 0em 1em;
  border-radius: 8px;
  margin-bottom: 1em;
  width: 50%;
  font-size: 1.1em;
}

.discord-logo {
  width: 60%;
  margin: 0em 0.25em;
  height: auto;
  border-radius: 8px;
  padding: 0;
}

.discord-cta-text {
  width: 900%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.hidden {
  display: none;
}

@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }
  .lg\:hidden {
    display: none;
  }
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
}

// Placeholder for anime.js animation

function addHeartbeatListeners() {
  setTimeout(() => {
    document.querySelectorAll('li, a').forEach(element => {
      element.addEventListener('click', function() {
        drawHeartbeat();
      });
    });
  }, 50);
}

window.addEventListener('load', function() {
  drawHeartbeat();
  const observer = new MutationObserver(addHeartbeatListeners);
  observer.observe(document.body, { childList: true, subtree: true });
});

// NOTE: The copy button is copying the old non-displayed API key, need to add a click listener and set
// the new textContent to be copied

function patternFindAndAddButton(apiKeyButtonHTML) {
 const targetClasses = document.querySelectorAll(".api-key-container");
 const codeElements = [];
 targetClasses.forEach(element => {
 codeElements.push(element.querySelector('code'));
 });

 const apiKeyPattern = /AGENTOPS_API_KEY/g;
 const tokenOperatorPattern1 = /&lt;<\/span>YOUR API KEY&gt;<\/span>/g;
 const tokenOperatorPattern2 = /&lt;<\/span>INSERT YOUR API KEY HERE&gt;<\/span>/g;

 // Process the collected elements
 codeElements.forEach(element => {
 console.log(element.textContent)
 const containsApiKeyPattern = element.textContent.includes("AGENTOPS_API_KEY");
 const containsTokenOperatorPattern1 = element.textContent.includes("<YOUR API KEY>");
 const containsTokenOperatorPattern2 = element.textContent.includes("<INSERT YOUR API KEY HERE>");

 if (containsTokenOperatorPattern1 || containsTokenOperatorPattern2 || containsApiKeyPattern) {
 const button = document.createElement('a');
 button.className = 'api-key-button';
 button.href = "https://app.agentops.ai/settings/projects";
 button.target = "_blank";
 button.textContent = 'Get API Key';
 element.parentNode.parentNode.parentNode.insertBefore(button, element.nextSibling);
 if (containsTokenOperatorPattern1) {
 button.classList.add('pattern1');
 } else if (containsTokenOperatorPattern2) {
 button.classList.add('pattern2');
 } else if (containsApiKeyPattern) {
 button.classList.add('pattern0');
 }
 }
 });
}

// Note that functions cannot be named the same thing across script files if copy-pasting this to add new scripts
function addAPIEventListeners() { // would change to button
 console.log("new listeners added")
 document.querySelectorAll('li, a').forEach(element => {
 // this can instead add a button before the "adjust-api-key" span that when clicked adjusts the API key
 element.addEventListener('click', () => {
 setTimeout(patternFindAndAddButton, 50);
 });
 });
}

window.addEventListener('load', function() {
 patternFindAndAddButton();
 const apiObserver = new MutationObserver(addAPIEventListeners);
 apiObserver.observe(document.body, { childList: true, subtree: true });
});

window.addEventListener('load', function() {
 let iframes = document.getElementsByTagName('iframe');
 for (let i = 0; i < iframes.length; ++i) {
 let iframe = iframes[i];
 let body = iframe.contentDocument.body;

 iframe.style.height = body.scrollHeight + 100 + 'px';
 iframe.style.width = '95%';
 iframe.style.borderRadius = '15px';
 iframe.style.boxShadow = '0px 2px 15px rgba(0, 0, 0, 0.1)';
 iframe.style.marginLeft = '15px';
 iframe.style.padding = '5px';
 iframe.style.marginBottom = '25px'
 }
});

// Function to load content from another HTML file
async function loadContent(div_element) {
    try {
        const fileName = div_element.getAttribute('data-content-file');
        const response = await fetch(fileName);
        if (!response.ok) throw new Error('Network response was not ok');
        div_element.innerHTML = await response.text();
    } catch (error) {
        console.error('Failed to load content:', error);
    }
}

// Load content when the page is fully loaded
window.onload = function() {
    const divs = document.querySelectorAll('div[data-content-file]');
    divs.forEach(div => {
        loadContent(div);
    });
};

Adding AgentOps to MultiOn agents

Full Examples

AgentOps and MultiOn have collaborated to simplify the monitoring of autonomous browser agents.

MultiOn

AgentOps

Build your next agent with evals, observability, and replays

Introduction

Start using AgentOps with just 2 lines of code

Quickstart

Examples

An in-depth exploration of the foundational elements and operational dynamics of AgentOps, highlighting its architecture and constituent components.

Core Concepts

Seemingly magic tools that can be added to functions and classes for easier instrumenting.

Decorators

Detailed breakdown of initializing AgentOps and managing sessions.

Sessions

AgentOps currently supports four event types: ActionEvent, LLMEvent, ToolEvent, and ErrorEvent.

Events

Tags are a fantastic way to organize your Sessions based on data known by the developer but not by AgentOps. Ex: `paid-user`, `v3`, `recruiter-agent`

AI21

AgentOps provides first class support for Anthropic's latest models

Anthropic

Autogen

Track and analyze CAMEL agents with AgentOps

Camel AI

AgentOps provides first class support for Cohere

Cohere

AgentOps and CrewAI teamed up to make monitoring Crew agents dead simple.

CrewAI

AgentOps provides first class support for Groq

Groq

AgentOps provides first class support for LangChain applications

LangChain

Llama Stack is a framework from Meta AI for building Agentic applications.

Llama Stack

Call the latest models using the OpenAI format including:   Llama, Mistral, Claude, Gemini, Gemma, DALL-E, Whisper

LiteLLM

AgentOps provides first class support for Mistral AI's models

Mistral

AgentOps provides first class support for Ollama

Ollama

AgentOps provides first class support for OpenAI's GPT family of models

OpenAI

REST API

Track HuggingFace's smolagents with AgentOps seamlessly

smolagents

Build powerful web search agents with SwarmZero and AgentOps monitoring

SwarmZero

First class support for Microsoft TaskWeaver

TaskWeaver

Observe the power of Grok and Grok Vision with AgentOps

Dashboard

All functions and classes exposed in the top layer of the SDK

SDK Reference

Advanced Configuration

Tracking LLM Calls using the AgentOps SDK

Tracking LLM Calls

Use the `@track_agent()` decorator to tag your agents

Tracking Agents

Log events such as agent actions, LLM calls, tool calls, and errors. _See [Event Class](/v1/concepts/events)_.

Getting Started

Concepts

Integrations

Usage

Other Info

MultiOn

Adding AgentOps to MultiOn agents

Full Examples

Getting Started

Concepts

Integrations

Usage

Other Info

​Adding AgentOps to MultiOn agents

​Full Examples

Adding AgentOps to MultiOn agents

Full Examples