-
Notifications
You must be signed in to change notification settings - Fork 267
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
generate notebooks in folders and style all iframes
- Loading branch information
Showing
26 changed files
with
1,847 additions
and
62 deletions.
There are no files selected for viewing
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| --- | ||
| title: 'Multion Examples' | ||
| description: 'Tracking Multion usage with AgentOps' | ||
| mode: "wide" | ||
| --- | ||
|
|
||
| <iframe id="iframe" src={'notebooks/multion/Autonomous_web_browsing.html'}></iframe> | ||
| <iframe id="iframe" src={'notebooks/multion/Sample_browsing_agent.html'}></iframe> | ||
| <iframe id="iframe" src={'notebooks/multion/Step_by_step_web_browsing.html'}></iframe> | ||
| <iframe id="iframe" src={'notebooks/multion/Webpage_data_retrieval.html'}></iframe> | ||
|
|
||
| <script type="module" src="/scripts/full_iframe.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,230 @@ | ||
| <!-- This file was generated by Pandoc --> | ||
| <!DOCTYPE html> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="generator" content="pandoc" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> | ||
| <title>AgentChat</title> | ||
| <style> | ||
| code{white-space: pre-wrap;} | ||
| span.smallcaps{font-variant: small-caps;} | ||
| div.columns{display: flex; gap: min(4vw, 1.5em);} | ||
| div.column{flex: auto; overflow-x: auto;} | ||
| div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} | ||
| /* The extra [class] is a hack that increases specificity enough to | ||
| override a similar rule in reveal.js */ | ||
| ul.task-list[class]{list-style: none;} | ||
| ul.task-list li input[type="checkbox"] { | ||
| font-size: inherit; | ||
| width: 0.8em; | ||
| margin: 0 0.8em 0.2em -1.6em; | ||
| vertical-align: middle; | ||
| } | ||
| .display.math{display: block; text-align: center; margin: 0.5rem auto;} | ||
| /* CSS for syntax highlighting */ | ||
| pre > code.sourceCode { white-space: pre; position: relative; } | ||
| pre > code.sourceCode > span { line-height: 1.25; } | ||
| pre > code.sourceCode > span:empty { height: 1.2em; } | ||
| .sourceCode { overflow: visible; } | ||
| code.sourceCode > span { color: inherit; text-decoration: inherit; } | ||
| div.sourceCode { margin: 1em 0; } | ||
| pre.sourceCode { margin: 0; } | ||
| @media screen { | ||
| div.sourceCode { overflow: auto; } | ||
| } | ||
| @media print { | ||
| pre > code.sourceCode { white-space: pre-wrap; } | ||
| pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; } | ||
| } | ||
| pre.numberSource code | ||
| { counter-reset: source-line 0; } | ||
| pre.numberSource code > span | ||
| { position: relative; left: -4em; counter-increment: source-line; } | ||
| pre.numberSource code > span > a:first-child::before | ||
| { content: counter(source-line); | ||
| position: relative; left: -1em; text-align: right; vertical-align: baseline; | ||
| border: none; display: inline-block; | ||
| -webkit-touch-callout: none; -webkit-user-select: none; | ||
| -khtml-user-select: none; -moz-user-select: none; | ||
| -ms-user-select: none; user-select: none; | ||
| padding: 0 4px; width: 4em; | ||
| color: #aaaaaa; | ||
| } | ||
| pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } | ||
| div.sourceCode | ||
| { } | ||
| @media screen { | ||
| pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } | ||
| } | ||
| code span.al { color: #ff0000; font-weight: bold; } /* Alert */ | ||
| code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ | ||
| code span.at { color: #7d9029; } /* Attribute */ | ||
| code span.bn { color: #40a070; } /* BaseN */ | ||
| code span.bu { color: #008000; } /* BuiltIn */ | ||
| code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ | ||
| code span.ch { color: #4070a0; } /* Char */ | ||
| code span.cn { color: #880000; } /* Constant */ | ||
| code span.co { color: #60a0b0; font-style: italic; } /* Comment */ | ||
| code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ | ||
| code span.do { color: #ba2121; font-style: italic; } /* Documentation */ | ||
| code span.dt { color: #902000; } /* DataType */ | ||
| code span.dv { color: #40a070; } /* DecVal */ | ||
| code span.er { color: #ff0000; font-weight: bold; } /* Error */ | ||
| code span.ex { } /* Extension */ | ||
| code span.fl { color: #40a070; } /* Float */ | ||
| code span.fu { color: #06287e; } /* Function */ | ||
| code span.im { color: #008000; font-weight: bold; } /* Import */ | ||
| code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ | ||
| code span.kw { color: #007020; font-weight: bold; } /* Keyword */ | ||
| code span.op { color: #666666; } /* Operator */ | ||
| code span.ot { color: #007020; } /* Other */ | ||
| code span.pp { color: #bc7a00; } /* Preprocessor */ | ||
| code span.sc { color: #4070a0; } /* SpecialChar */ | ||
| code span.ss { color: #bb6688; } /* SpecialString */ | ||
| code span.st { color: #4070a0; } /* String */ | ||
| code span.va { color: #19177c; } /* Variable */ | ||
| code span.vs { color: #4070a0; } /* VerbatimString */ | ||
| code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ | ||
| </style> | ||
| <link rel="stylesheet" href="https://app.agentops.ai/notebook_styles.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="bb6538d8-2a5d-4a99-b2c1-7130963e4f7b" class="cell markdown"> | ||
| <h1 id="adding-agentops-to-an-existing-autogen-service">Adding AgentOps | ||
| to an existing Autogen service</h1> | ||
| <p><img src="https://raw.githubusercontent.com/AgentOps-AI/agentops/main/docs/images/external/autogen/autogen_integration.png?raw=true"/></p> | ||
| <p>To get started, you'll need to install the AgentOps package and <a | ||
| href="app.agentops.ai">set an API key</a>.</p> | ||
| <p>AgentOps automatically configures itself when it's initialized | ||
| meaning your agent run data will be tracked and logged to your AgentOps | ||
| account right away.</p> | ||
| </div> | ||
| <div id="d93f2339-7b99-4cf1-9232-c24faba49c7b" class="cell code" | ||
| data-execution_count="1"> | ||
| <div class="sourceCode" id="cb1"><pre | ||
| class="sourceCode python"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> agentops</span> | ||
| <span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a></span> | ||
| <span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> autogen <span class="im">import</span> ConversableAgent, UserProxyAgent</span> | ||
| <span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a></span> | ||
| <span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="co"># When initializing AgentOps, you can pass in optional tags to help filter sessions</span></span> | ||
| <span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a>agentops.init(api_key<span class="op">=</span><span class="st">"..."</span>, tags<span class="op">=</span>[<span class="st">"simple-autogen-example"</span>])</span> | ||
| <span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a></span> | ||
| <span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="bu">print</span>(<span class="st">"AgentOps is now running. You can view your session in the link above"</span>)</span></code></pre></div> | ||
| <div class="output stream stderr"> | ||
| <pre><code>🖇 AgentOps: Session Replay: https://app.agentops.ai/drilldown?session_id=24c5d9f6-fb82-41e6-a468-2dc74a5318a3 | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>AgentOps is now running. You can view your session in the link above | ||
| </code></pre> | ||
| </div> | ||
| </div> | ||
| <div id="7858f0f6-9aca-4cdb-a514-9fbf7e353d50" class="cell markdown"> | ||
| <p>AutoGen will now start automatically tracking</p> | ||
| <ul> | ||
| <li>LLM prompts and completions</li> | ||
| <li>Token usage and costs</li> | ||
| <li>Agent names and actions</li> | ||
| <li>Correspondence between agents</li> | ||
| <li>Tool usage</li> | ||
| <li>Errors</li> | ||
| </ul> | ||
| </div> | ||
| <div id="2962d990-f7ef-43d8-ba09-d29bd8356d9f" class="cell code" | ||
| data-execution_count="2"> | ||
| <div class="sourceCode" id="cb4"><pre | ||
| class="sourceCode python"><code class="sourceCode python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Define an openai api key for the agent configurations</span></span> | ||
| <span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a>openai_api_key <span class="op">=</span> <span class="st">"..."</span></span> | ||
| <span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a>config_list <span class="op">=</span> [</span> | ||
| <span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a> {<span class="st">"model"</span>: <span class="st">"gpt-4-turbo"</span>, <span class="st">"api_key"</span>: openai_api_key, <span class="st">"tags"</span>: [<span class="st">"gpt-4"</span>, <span class="st">"tool"</span>]}</span> | ||
| <span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a>]</span> | ||
| <span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a></span> | ||
| <span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a><span class="co"># Create the agent that uses the LLM.</span></span> | ||
| <span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a>assistant <span class="op">=</span> ConversableAgent(<span class="st">"agent"</span>, llm_config<span class="op">=</span>{<span class="st">"config_list"</span>: config_list})</span> | ||
| <span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a></span> | ||
| <span id="cb4-10"><a href="#cb4-10" aria-hidden="true" tabindex="-1"></a><span class="co"># Create the agent that represents the user in the conversation.</span></span> | ||
| <span id="cb4-11"><a href="#cb4-11" aria-hidden="true" tabindex="-1"></a>user_proxy <span class="op">=</span> UserProxyAgent(<span class="st">"user"</span>, code_execution_config<span class="op">=</span><span class="va">False</span>)</span> | ||
| <span id="cb4-12"><a href="#cb4-12" aria-hidden="true" tabindex="-1"></a></span> | ||
| <span id="cb4-13"><a href="#cb4-13" aria-hidden="true" tabindex="-1"></a><span class="co"># Let the assistant start the conversation. It will end when the user types "exit".</span></span> | ||
| <span id="cb4-14"><a href="#cb4-14" aria-hidden="true" tabindex="-1"></a>assistant.initiate_chat(user_proxy, message<span class="op">=</span><span class="st">"How can I help you today?"</span>)</span> | ||
| <span id="cb4-15"><a href="#cb4-15" aria-hidden="true" tabindex="-1"></a></span> | ||
| <span id="cb4-16"><a href="#cb4-16" aria-hidden="true" tabindex="-1"></a><span class="co"># Close your AgentOps session to indicate that it completed.</span></span> | ||
| <span id="cb4-17"><a href="#cb4-17" aria-hidden="true" tabindex="-1"></a>agentops.end_session(<span class="st">"Success"</span>)</span> | ||
| <span id="cb4-18"><a href="#cb4-18" aria-hidden="true" tabindex="-1"></a><span class="bu">print</span>(<span class="st">"Success! Visit your AgentOps dashboard to see the replay"</span>)</span></code></pre></div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>agent (to user): | ||
|
|
||
| How can I help you today? | ||
|
|
||
| -------------------------------------------------------------------------------- | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>Provide feedback to agent. Press enter to skip and use auto-reply, or type 'exit' to end the conversation: Tell me a joke about AgentOps | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>user (to agent): | ||
|
|
||
| Tell me a joke about AgentOps | ||
|
|
||
| -------------------------------------------------------------------------------- | ||
|
|
||
| >>>>>>>> USING AUTO REPLY... | ||
| agent (to user): | ||
|
|
||
| Why don't AgentOps teams ever play hide and seek? | ||
|
|
||
| Because good luck hiding when they always know where everyone is supposed to be! | ||
|
|
||
| -------------------------------------------------------------------------------- | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>Provide feedback to agent. Press enter to skip and use auto-reply, or type 'exit' to end the conversation: Another | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>user (to agent): | ||
|
|
||
| Another | ||
|
|
||
| -------------------------------------------------------------------------------- | ||
|
|
||
| >>>>>>>> USING AUTO REPLY... | ||
| agent (to user): | ||
|
|
||
| Why did the AgentOps team bring a ladder to work? | ||
|
|
||
| Because they’re always reaching for high-level optimizations! | ||
|
|
||
| -------------------------------------------------------------------------------- | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>Provide feedback to agent. Press enter to skip and use auto-reply, or type 'exit' to end the conversation: exit | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stderr"> | ||
| <pre><code>🖇 AgentOps: This run's cost $0.001080 | ||
| 🖇 AgentOps: Session Replay: https://app.agentops.ai/drilldown?session_id=24c5d9f6-fb82-41e6-a468-2dc74a5318a3 | ||
| </code></pre> | ||
| </div> | ||
| <div class="output stream stdout"> | ||
| <pre><code>Success! Visit your AgentOps dashboard to see the replay | ||
| </code></pre> | ||
| </div> | ||
| </div> | ||
| <div id="7b422137-903a-41ef-a4ca-95b50aea4138" class="cell markdown"> | ||
| <p>You can view data on this run at <a | ||
| href="app.agentops.ai">app.agentops.ai</a>.</p> | ||
| <p>The dashboard will display LLM events for each message sent by each | ||
| agent, including those made by the human user.</p> | ||
| </div> | ||
| <div id="72993a75-1031-4874-aa26-0ef816a3256c" class="cell code"> | ||
| <div class="sourceCode" id="cb13"><pre | ||
| class="sourceCode python"><code class="sourceCode python"></code></pre></div> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.