Skip to content

Commit 13d483f

Browse files
authored
Merge pull request #141 from superfaceai/nov23-updates
Docs design refresh
2 parents 3f2db2d + cb98a9d commit 13d483f

File tree

91 files changed

+1172
-730
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+1172
-730
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@
1818
npm-debug.log*
1919
yarn-debug.log*
2020
yarn-error.log*
21+
package.lock

docs/agent/adding-tools.mdx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Adding new tools
2+
To get the most out Superface, you need to connect it to the various platforms that you want to access data and insights from.
3+
4+
This is done using "Tools" created using the Superface CLI, or they may be provided for you.
5+
6+
Once a tool is created, it must be added to the Agent in order to be used. To do this, click on **Settings** and **Add Comlinks**.
7+
8+
![An empty Add Comlinks view. This is where tools are added to Superface](/img/agent/2-add-new-comlinks.png)
9+
10+
## What are Comlinks?
11+
Superface tools are made up of a set of files called Comlinks. Typically they are composed of three files that are generated by the Superface CLI.
12+
13+
1. A **provider** (`.provider.json`), that outlines the security policy, and additional required parameters for connecting to an external service.
14+
2. A **profile** (`.profile`), which is the overview of expected inputs and outputs required by the external service's API.
15+
3. A **map** (`.map.js`), which is a defined function call that executes the API request and handles the response from the external service.
16+
17+
## Adding tools
18+
To add a tool to Superface, locate the correct files on your local system and drag and drop them onto the browser window to upload them.
19+
20+
Once your tool(s) have uploaded, you will need to configure the security settings and any additional paramters as outlined in the provider file.

docs/agent/changing-models.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Changing models
2+
By default Superface uses the *OpenAI ChatGPT-3.5 Turbo* model, however this may not necessarily be the best model for all the capabilities you want to add with your tools.
3+
4+
You can modify the model that the agent uses by clicking on **Settings > System** and selecting the model you want to run your tools with from the **Foundation model** drop down list.
5+
6+
![The Foundation model list is found on the System settings page](/img/agent/6a-foundation-model-expanded.png)

docs/agent/configure-providers.mdx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Configuring providers
2+
All Superface tools have a *provider* as part of their configuration. The provider is where necessary elements such as API keys, and additional parameters that are needed to connect to an external service are defined.
3+
4+
![A list of Providers in Superface](/img/agent/3-configuring-providers.png)
5+
6+
The providers are listed in alpabetical order of the name of the external service they represent.
7+
8+
A fully configured provider will have a green dot next to it. If it's green, it's good to go.
9+
10+
If there is a red dot next to the name then some additional configuration is needed.
11+
12+
## Setting configurations
13+
To set up configuration options for a provider you can click on the cog icon to see the specific settings required.
14+
15+
For example, here are the configuration parameters required for the Mixpanel provider shown in the image above.
16+
17+
![The Mixpanel provider configuration options](/img/agent/4-mixpanel-provider-config.png)
18+
19+
Typically a provider outlines the security configuration as well as any additional parameters that are required by the third-party API your tool is connecting to. In this case we can see that Mixpanel requires both of these.
20+
21+
To set up your provider, fill out all of the blank fields and click **Save Changes**.
22+
23+
## Provider file example
24+
Below you can see the provider file for Mixpanel. This is where the parameters and security scheme detals you can see on the screen are defined.
25+
26+
```json
27+
{
28+
"name": "mixpanel",
29+
"defaultService": "default",
30+
"parameters": [
31+
{
32+
"name": "project_id",
33+
"description": "The ID of the Mixpanel project"
34+
},
35+
{
36+
"name": "workspace_id",
37+
"description": "The ID of the workspace to query"
38+
}
39+
],
40+
"services": [
41+
{
42+
"baseUrl": "https://eu.mixpanel.com/api/query",
43+
"id": "default"
44+
}
45+
],
46+
"securitySchemes": [
47+
{
48+
"type": "http",
49+
"scheme": "basic",
50+
"id": "ServiceAccount"
51+
}
52+
]
53+
}
54+
```
55+
56+
## Replacing a provider
57+
If you need to replace a provider at any time you can click on the edit icon to upload a new version.
58+
59+
![The Mixpanel provider configuration options](/img/agent/4a-config-replacement.png)
60+
61+
All tools can be updated by replacing the Comlink files at any time.

docs/agent/custom-instructions.mdx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Custom instructions
2+
It is possible to pass your own instructions that will be pre-loaded into the agent every time you use it.
3+
4+
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.
5+
6+
You can set your custom instructions by clicking on **Settings > System** and adding to the *Custom instructions* section.
7+
8+
![The Foundation model list is found on the System settings page](/img/agent/6-foundation-model.png)
9+
10+
## Custom instruction examples
11+
How you set up your instructions is up to you, but we recommend using a list. For example:
12+
13+
```text
14+
- When I ask for the top events from Mixpanel, always format the results in a table with the percentage change in descending order
15+
16+
- When sending an email always set the sender name to Operations Department
17+
18+
- 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.
19+
```

docs/agent/index.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import DocCardList from '@theme/DocCardList';
2+
3+
# Superface Agent
4+
The Superface Agent allows you to interact with SaaS platforms via natural language prompts.
5+
6+
![An example prompt asking for Top Events from Mixpanel](/img/agent/index-agent-view.png)
7+
8+
<DocCardList />

docs/agent/interface.mdx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Using the agent interface
2+
3+
After logging in to Superface, you will see a fresh agent interface ready to get started with your prompts.
4+
5+
![The initial Superface interface after log in](/img/agent/1-initial-interface.png)
6+
7+
If it's your first time using the agent, there probably won't be any tools set up yet. You can check this by asking `What can you do?`. If there are already tools installed, Superface will respond with a list of the capabilities they enable.
8+
9+
:::tip What are tools?
10+
In Superface world, "Tools" are what connects the agent to your external services. They are built using our [Command Line Interface](../develop/install-superface).
11+
:::
12+
13+
To get started, you will need to add some tools. You can do this by clicking on **Settings** and following our [Adding new tools](./adding-tools.mdx) guide.
14+
15+
If you have not developed any tools yet, you can start by following our [Developing Superface Tools](../develop/)
16+
17+
## Writing prompts
18+
19+
To get the most out of Superface you need to prompt it for answers. You can do this from the prompt bar at the bottom of the screen.
20+
21+
![The prompt bar at the bottom of the main agent interface](/img/agent/agent-prompt-bar.png)
22+
23+
## Task history
24+
25+
To access previous tasks, click on **History**. A drawer of your previous tasks (and any scheduled tasks) will appear on the left of the screen.
26+
27+
![The task history drawer in the main agent interface](/img/agent/task-history.png)

docs/agent/scheduling-tasks.mdx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Scheduling tasks
2+
3+
Once you have completed any task in the Superface agent it is possible to set it up on a recurrent schedule.
4+
5+
To do this in the main agent interface, click on **Schedules** next to the title of your task at the top of the screen.
6+
7+
![Tasks can be set to run on schedules using the Schedules feature](/img/agent/7-schedules.png)
8+
9+
Next, you will see the schedule configuration screen for this task.
10+
11+
![The schedule configuration screen for a task](/img/agent/7a-schedule-overview.png)
12+
13+
## Setting a schedule
14+
15+
To add a schedule, select a time period from the drop down list and click on **Create schedule**
16+
17+
![The schedule selection drop down](/img/agent/7b-schedule-dropdown.png)
18+
19+
The schedule options currently available are:
20+
21+
- Every minute
22+
- Every hour
23+
- Daily at 6am
24+
- Weekly on Monday
25+
- Custom
26+
27+
## Define a custom schedule
28+
29+
The custom schedule option is the most flexible because it allows you to define the exact time and frequency you want your task to run.
30+
31+
Custom schedules are defined using CRON formatting.
32+
33+
![Custom scheduling](/img/agent/7c-custom-schedule.png)
34+
35+
In the above example the custom schedule is set up to run at 0800 every Monday.
36+
37+
From left to right the numbers (or asterisks) used represent, the minute, the hour, the day of the month, the month, the day of the week.
38+
39+
We have included a visual representation of the CRON you set so you can make sure you get it right.
40+
41+
## Replays of scheduled tasks
42+
43+
Every time your task is triggered, a _run_ will be added to the list on the schedule page.
44+
45+
The output from the task will be added to your _History_ in the main agent interface.

docs/agent/updating-tools.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Updating tools
2+
You can update the tools you have available in Superface at any time by clicking on the edit icon.
3+
4+
![A list of tools in the Superface agent that are available to use](/img/agent/5-updating-tools.png)
5+
6+
This will take you to the **Add Comlinks** section where you can re-upload new files for the tool you want to make changes to.
7+
8+
![The Upload Comlinks screen is where you can edit tools by uploading new files](/img/agent/2-add-new-comlinks.png).
9+
10+
Drag and drop your updated/edited files and they will overwrite the previous versions if the naming convention used has not changed.
11+
12+
:::tip
13+
You only need to upload the files that you have made changes to. If nothing has changed in the profile, or provider files, you don't need to add these because they already exist in Superface.
14+
:::

docs/api-examples/index.mdx

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
---
2-
slug: /api-examples
2+
slug: /tool-examples
33
id: index
44
---
55

6-
# API Examples
6+
# Tool Examples
77

8-
Superface is the AI for APIs. It makes creating API integrations faster, and more manageable so you can focus on developing your application.
8+
Superface's agent relies on tools in order to access external systems and perform the tasks that you require. Below are some walkthrough examples of creating tools that can be used directly in the agent interface with popular services such as HubSpot, Pipedrive, Slack and more.
99

1010
<div className="row padding-bottom--lg">
1111
<div className="col col--6">
1212
<div className="card shadow">
1313
<a href="/docs/api-examples/hubspot" className="menu__link">
1414
<div className="card__body">
1515
<h3>HubSpot</h3>
16-
<p>
17-
Use the HubSpot V3 API to retrive a list of companies in the CRM.
18-
</p>
16+
<p>Use the HubSpot V3 API to retrive a list of companies in the CRM.</p>
1917
</div>
2018
</a>
2119
</div>
@@ -35,10 +33,7 @@ Superface is the AI for APIs. It makes creating API integrations faster, and mor
3533
<a href="/docs/api-examples/notion" className="menu__link">
3634
<div className="card__body">
3735
<h3>Notion</h3>
38-
<p>
39-
This use case allows you to list all of the users in your Notion
40-
workspace.
41-
</p>
36+
<p>This use case allows you to list all of the users in your Notion workspace.</p>
4237
</div>
4338
</a>
4439
</div>
@@ -48,9 +43,7 @@ Superface is the AI for APIs. It makes creating API integrations faster, and mor
4843
<a href="/docs/api-examples/pagerduty" className="menu__link">
4944
<div className="card__body">
5045
<h3>PagerDuty</h3>
51-
<p>
52-
List the most recent reported incidents from your PagerDuty account.
53-
</p>
46+
<p>List the most recent reported incidents from your PagerDuty account.</p>
5447
</div>
5548
</a>
5649
</div>
@@ -60,10 +53,7 @@ Superface is the AI for APIs. It makes creating API integrations faster, and mor
6053
<a href="/docs/api-examples/pipedrive" className="menu__link">
6154
<div className="card__body">
6255
<h3>Pipedrive</h3>
63-
<p>
64-
This use case allows you to list all of the Organizations in your
65-
Pipedrive CRM.
66-
</p>
56+
<p>This use case allows you to list all of the Organizations in your Pipedrive CRM.</p>
6757
</div>
6858
</a>
6959
</div>
@@ -73,10 +63,7 @@ Superface is the AI for APIs. It makes creating API integrations faster, and mor
7363
<a href="/docs/api-examples/resend" className="menu__link">
7464
<div className="card__body">
7565
<h3>Resend</h3>
76-
<p>
77-
Uses Resend's email API to send an email message from an application
78-
to a specific email address.
79-
</p>
66+
<p>Sends an email message from an application to a specific email address.</p>
8067
</div>
8168
</a>
8269
</div>
@@ -86,10 +73,7 @@ Superface is the AI for APIs. It makes creating API integrations faster, and mor
8673
<a href="/docs/api-examples/slack" className="menu__link">
8774
<div className="card__body">
8875
<h3>Slack</h3>
89-
<p>
90-
Uses Slack's Web API to list 5 public channels in your Slack
91-
workspace.
92-
</p>
76+
<p>Uses Slack's Web API to list 5 public channels in your Slack workspace.</p>
9377
</div>
9478
</a>
9579
</div>

0 commit comments

Comments
 (0)