Merge pull request #175 from superfaceai/add-videos

Add videos

docs/agent/custom-instructions.mdx

@@ -1,13 +1,40 @@
 # Custom instructions
+
 It is possible to pass your own instructions that will be pre-loaded into the agent every time you use it.
 
 This is useful for setting rules that are specific to you and how you want to use the agent on a day to day basis.
 
-You can set your custom instructions by clicking on **Settings > System** and adding to the *Custom instructions* section.
+You can set your custom instructions by clicking on **Settings > System** and adding to the _Custom instructions_ section.
 
 ![The Foundation model list is found on the System settings page](/img/agent/6-foundation-model.png)
 
+## Overview video
+
+<div
+  style={{
+    position: 'relative',
+    paddingBottom: '56.30689206762028%',
+    height: 0,
+  }}
+>
+  <iframe
+    src="https://www.loom.com/embed/901e13ab6b194116b2690a1fd4dac5af?sid=10e8509b-b804-496f-aa99-456a1d74ebf6"
+    frameBorder={0}
+    webkitallowfullscreen=""
+    mozallowfullscreen=""
+    allowFullScreen=""
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    }}
+  />
+</div>
+
 ## Custom instruction examples
+
 How you set up your instructions is up to you, but we recommend using a list. For example:
 
 ```text
@@ -16,4 +43,4 @@ How you set up your instructions is up to you, but we recommend using a list. Fo
 - When sending an email always set the sender name to Operations Department
 
 - When extracting sentiment from support tickets, only show me the email address of the user and if their sentiment was positive or negative, exclude other information.
-```
+```

docs/agent/example-videos.mdx

@@ -0,0 +1,30 @@
+# Example videos
+
+To demonstrate how to work with the AI Agent and selected tools you can take a look at the videos below for full walkthroughs.
+
+## Google Sheets and Pipedrive
+
+In this video we demonstrate how to use the AI Agent to import leads from a sheet in Google Sheets to the Pipedrive CRM. The video covers setup, authentication, prompt construction, running the prompt, scheduling and the use of custom instructions.
+
+<div
+  style={{
+    position: 'relative',
+    paddingBottom: '56.23376623376623%',
+    height: 0,
+  }}
+>
+  <iframe
+    src="https://www.loom.com/embed/13fa86469bb14d128bbb572c61c87c90?sid=b22bdde0-4f13-408e-8bec-69834151924a"
+    frameBorder={0}
+    webkitallowfullscreen=""
+    mozallowfullscreen=""
+    allowFullScreen=""
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    }}
+  />
+</div>

docs/agent/index.mdx

@@ -10,6 +10,31 @@ The Agent is based around the same concept of tools as Superface for GPTs, but p
 - Take advantage of a wide selection of pre-built tools for Google, Jira, Zendesk, and others.
 - Create new tools for any API using browser a based interface.
 
-![An example prompt asking for Top Events from Mixpanel](/img/agent/index-agent-view.png)
+## Overview video
+
+<div
+  style={{
+    position: 'relative',
+    paddingBottom: '56.30689206762028%',
+    height: 0,
+  }}
+>
+  <iframe
+    src="https://www.loom.com/embed/755f2cec41bc4b4eafdb24134415bfaf?sid=e4068101-dacc-4f62-a516-7e97e081aef3"
+    frameBorder={0}
+    webkitallowfullscreen=""
+    mozallowfullscreen=""
+    allowFullScreen=""
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    }}
+  />
+</div>
+
+##
 
 <DocCardList />

sidebars.js

@@ -123,7 +123,8 @@ module.exports = {
         // 'agent/updating-tools',
         'agent/changing-models',
         'agent/custom-instructions',
-        'agent/scheduling-tasks'
+        'agent/scheduling-tasks',
+        'agent/example-videos'
       ]
     },
     {