Cloud docs/add getting started (#4690)

Co-authored-by: Ritik Sahni <ritiksahni0203@gmail.com>
This commit is contained in:
Naman
2026-02-11 10:10:40 +05:30
committed by GitHub
parent 263a6dec0c
commit b6bddee7ac
8 changed files with 224 additions and 148 deletions

View File

@@ -1,144 +0,0 @@
---
title: Getting Started
slug: cloud/getting-started
---
Run browser automations without writing code. This guide walks you through running your first task in the Cloud UI.
<Note>
Prefer to integrate via code? Check out the [SDK Quickstart](/getting-started/quickstart) instead.
</Note>
## Open Skyvern Cloud
Visit [app.skyvern.com](https://app.skyvern.com) and sign-up or sign-in to your account.
You'll land on the **Discover** page—your starting point for running automations.
<img src="/images/discover-page.png" alt="discover page in skyvern"/>
## Understand the Interface
The left sidebar organizes everything you need:
**Build**
- **Discover** — Run one-off tasks with natural language prompts
- **Workflows** — Create and manage multi-step automations
- **Runs** — View execution history for all your tasks and workflows
- **Browsers** — Monitor active browser sessions
**Agents**
- Pre-built templates for common use cases: form filling, data extraction, job applications, insurance quotes, and more. Select one to start with a working example.
**General**
- **Billing** — View usage and manage your plan
- **Credentials** — Store logins securely for authenticated sites
- **Settings** — Copy your API key and configure account settings
## Run Your First Task
The fastest way to see Skyvern in action is to run a task directly from the Discover page.
### Step 1: Enter your prompt
<img src="/images/cloud/discover-page.png" />
In the main input field, describe what you want to accomplish.
<Tip title="Prompting tip" icon="lightbulb">
Be specific about the goal, completion criteria, visual indicators, and all necessary data.
</Tip>
Check out our detailed [Prompting Guide](/prompting-guide).
You can also select one of the quick-action buttons below the input for common example tasks like "Add a product to cart" or "Get an insurance quote."
### Step 2: Configure settings (optional)
Click the gear icon to access additional options:
<img src="/images/advanced-settings-discover.png" alt="additional settings"/>
| Setting | What it does |
|---------|-------------|
| **Proxy Location** | Run automations from different geographic locations |
| **Browser Session ID** | Share login state between workflows |
| **2FA Identifier** | Handle two-factor authentication automatically |
| **Publish Workflow** | Save this task as a reusable template |
| **Data Schema** | Define structured JSON output format |
<Accordion title="Example: Data Schema">
Use a JSON schema to get typed output:
```json
{
"type": "object",
"properties": {
"product_name": { "type": "string" },
"price": { "type": "number" }
}
}
```
</Accordion>
### Step 3: Run the task
Click the send button to start.
In the background, Skyvern opens a browser, navigates to the URL you specified (or finds it using search), and interacts with the website component to get the job done.
## Watch the Live Browser
Once your task starts, you'll see the execution screen with two main panels:
<img src="/images/cloud/live-browser-view.png" />
| **Left: Task configuration** | **Center: Live Browser** | **Right: Agent Logs** |
|---------|---------|-------------|
| Shows the block being executed with its URL and prompt. The status badge indicates whether the task is running, completed, or failed. | A real-time view of the browser as Skyvern navigates. You'll see pages load, forms fill, and buttons click—exactly as if you were doing it yourself. | A real-time log of LLM's reasoning output and tool usage. Useful for troubleshooting complex workflows. |
The **"take control"** button lets you intervene and use the agent's browser yourself if it needs help with something unexpected, like a CAPTCHA or unusual login flow.
## Review the Results
After the task completes, go to **Runs** and open your latest task.
<img src="/images/cloud/results-overview.png" />
### Extracted Data
The AI extracts data based on your prompt and returns it as structured JSON:
```json
{
"post_title": "There's a ridiculous amount of tech in a disposable vape"
}
```
### Results Tabs
The results page has several tabs:
- **Actions** — Step-by-step breakdown of every action the AI took, with screenshots and reasoning
- **Recording** — Full video replay of the browser session
- **Parameters** — The task configuration you submitted (URL, prompt, webhooks, proxy, schema)
- **Diagnostics** — Debug info for troubleshooting: LLM prompts, element trees, annotated screenshots
## What's Next?
<CardGroup cols={2}>
<Card
title="Build a Workflow"
icon="diagram-project"
href="/workflows/manage-workflows"
>
Create reusable, multi-step automations with the visual workflow builder
</Card>
<Card
title="Handle Logins"
icon="key"
href="/credentials/introduction"
>
Store credentials securely for sites that require authentication
</Card>
</CardGroup>

View File

@@ -0,0 +1,84 @@
---
title: UI Overview
slug: cloud/ui-overview
subtitle: Navigate the Skyvern Cloud dashboard
---
Skyvern Cloud ([app.skyvern.com](https://app.skyvern.com)) lets you automate any website from your browser. Describe what you want in plain English, watch an AI-powered browser do it live, and get structured results back — no code required.
<Note>
Looking to integrate Skyvern into your own app? See the [API Quickstart](/getting-started/quickstart) instead.
</Note>
## The dashboard
Sign in and you'll land on the **Discover** page — the starting point for running automations.
<img src="/images/cloud/skyvern-cloud-discover.png" alt="Skyvern Cloud dashboard showing the Discover page" />
The left sidebar is your navigation hub. Here's what each section does:
### Build
Where you create and monitor automations.
| Page | Purpose |
|------|---------|
| **Discover** | Run one-off tasks. Type your instructions and target URL into a single prompt, pick an engine, and hit send. |
| **Workflows** | Build multi-step automations with the visual workflow editor. Add loops, conditionals, and data passing between steps. |
| **Runs** | Execution history for every task and workflow. Filter by status, drill into any run to see actions, recordings, and extracted data. |
| **Browsers** | Active browser sessions. Useful for persistent sessions that keep login state across tasks. |
### Agents
{/* TODO: Replace with screenshot of Agents section */}
<img src="/images/cloud/placeholder-agents-section.png" alt="Agents page showing pre-built automation templates" />
Ready-made automation templates. Each agent is preconfigured with a prompt, target URL, and settings — pick one to see it work or use it as a starting point for your own task.
### General
| Page | Purpose |
|------|---------|
| **Billing** | Usage, remaining credits, and plan management. |
| **Credentials** | Store website logins securely. Skyvern uses these to authenticate automatically when it encounters a login page. |
| **Settings** | API key, account preferences, and organization management. |
## How it works
Every automation in Skyvern Cloud follows the same pattern:
<Steps>
<Step title="Describe your task">
Type what you want into the prompt bar — include the target URL and your instructions in one go. Something like "Get the top post from https://news.ycombinator.com" or "Fill out the contact form at https://example.com/contact with my details."
</Step>
<Step title="Watch it happen">
A cloud browser opens and you see it navigate in real time. Pages load, elements highlight, actions fire. An agent log streams the AI's reasoning — every Thought and Decision — so you can follow along. If the AI gets stuck, hit **Take Control** to jump in and help.
</Step>
<Step title="Get your results">
Extracted data appears as structured JSON on the run detail page. Every run also includes an output view, full recording, the parameters you submitted, and auto-generated code to reproduce the task via API.
</Step>
</Steps>
That's it. The next guide walks you through this flow with a real example.
---
## Next steps
<CardGroup cols={2}>
<Card
title="Run Your First Task"
icon="play"
href="/cloud/your-first-task"
>
Follow along with a real example to see Skyvern Cloud in action
</Card>
<Card
title="Core Concepts"
icon="book"
href="/getting-started/core-concepts"
>
Understand tasks, workflows, blocks, and other building blocks
</Card>
</CardGroup>

View File

@@ -0,0 +1,131 @@
---
title: Your First Task
slug: cloud/your-first-task
subtitle: Run a browser automation from start to finish
---
Let's run a real automation. You'll tell Skyvern to visit a website, extract data, and return it as JSON. Then watch the entire thing happen live.
## Step 1: Write your prompt
Open [app.skyvern.com](https://app.skyvern.com) and you'll land on the **Discover** page.
<img src="/images/cloud/skyvern-cloud-discover.png" alt="Discover page with a prompt entered" />
The Discover page has a single input field. Type your instructions and include the target URL in the same prompt. For this example, enter:
```
Get the title of the #1 post on the front page for https://news.ycombinator.com
```
That's it. Skyvern parses the URL and figures out how to navigate the page and extract the data.
Below the input, you'll see quick-action chips like "Add a product to cart" and "What's the top post on hackernews". Click any of these to try a pre-filled example instead.
<Tip>
The more specific your prompt, the better. "Get the title of the #1 post" works much better than "get some data." Include the exact fields you want, what success looks like, and any constraints.
</Tip>
## Step 2: Pick an engine and run
Next to your prompt, you'll see an engine selector. Click it to switch engines:
| Engine | When to use it |
|--------|---------------|
| **Skyvern 1.0** | Tasks with a simple, single goal: filling a form, searching for information on Google, reading content from a page |
| **Skyvern 2.0** | Complex, multi-step tasks. Scores state-of-the-art 85.85% on the WebVoyager benchmark |
| **Skyvern 2.0 with code** | The default engine. Same capabilities as Skyvern 2.0, plus auto-generates reusable code and a workflow from the run |
For this example, keep the default **Skyvern 2.0 with code** selected.
Click the **send button** (arrow icon to the right of the input). Skyvern generates a workflow from your prompt and opens it in the workflow editor. Click **Run** in the top right, confirm the parameters, then click **Run workflow** to start execution.
<Accordion title="Optional: Advanced settings">
Click the **gear icon** next to send to configure additional options before running:
| Setting | What it does |
|---------|-------------|
| **Webhook Callback URL** | Endpoint to receive the extracted data when the run completes |
| **Proxy Location** | Route Skyvern through one of the available proxies |
| **Browser Session ID** | Reuse a persistent browser session to keep login state |
| **Browser Address** | Connect to a specific browser server for the task run |
| **2FA Identifier** | Identifier for a 2FA code to handle two-factor auth automatically |
| **Extra HTTP Headers** | Custom HTTP request headers (dict format) |
| **Generate Script** | Auto-generate reusable scripts from a successful run |
| **Publish Workflow** | Create a workflow alongside this task run |
| **Max Steps Override** | Cap the number of steps the AI can take |
| **Data Schema** | Define structured JSON output format |
| **Max Screenshot Scrolls** | Limit scrolls for post-action screenshots (default: 3) |
These are all optional. The defaults work for most tasks.
</Accordion>
## Step 3: Watch the live browser
This is where it gets interesting. Once the task starts, you'll see the run detail page with a live view of the browser:
<img src="/images/cloud/discover-prompt-in-process.png" alt="Run detail page showing a live browser navigating Hacker News" />
On the left, a **live browser view**. You'll see pages load, elements highlight, and actions fire.
On the right, the **agent log**. A running stream of the AI's Thoughts, Decisions, and block executions. If something goes wrong, this is where you'll figure out why.
## Step 4: Review the results
When the task finishes, the status badge flips to **completed** and the extracted data appears at the top of the page.
<img src="/images/cloud/discover-workflow-completed.png" alt="Completed run showing extracted data and result tabs" />
### Extracted data
The **Extracted Information** block shows your results as structured JSON:
```json
[
{
"top_post_title": "Don't rent the cloud, own instead"
}
]
```
The agent log on the right confirms what happened. You'll see a final Thought summarizing the result.
### Tabs
Below the extracted data, five tabs give you different views of the run:
- **Overview**: The default view. Shows extracted data and the agent log with every Thought and Decision.
- **Output**: The raw JSON output from the run.
- **Parameters**: The exact configuration that was submitted (URL, prompt, engine, schema). Useful for reproducing or tweaking the run.
- **Recording**: Full video replay of the browser session, start to finish.
- **Code**: Auto-generated code snippets to reproduce this task via the API or SDK.
## Try something bigger
Now that you've seen the basic flow, here are a few ideas to try next:
- **Fill a form**: Point Skyvern at a contact form and tell it what to enter in each field
- **Compare prices**: Extract product names and prices from an e-commerce page using a data schema
- **Navigate a flow**: Use the Advanced engine to walk through a multi-page checkout or signup process
- **Use an Agent template**: Check the **Agents** section in the sidebar for pre-built automations you can run instantly
---
## Next steps
<CardGroup cols={2}>
<Card
title="Run a Task via API"
icon="code"
href="/running-automations/run-a-task"
>
Trigger automations programmatically with the Skyvern API
</Card>
<Card
title="Core Concepts"
icon="book"
href="/getting-started/core-concepts"
>
Understand tasks, workflows, and other building blocks
</Card>
</CardGroup>

View File

@@ -76,9 +76,14 @@
},
{
"tab": "Cloud UI",
"pages": [
"cloud/getting-started",
"cloud/running-tasks"
"groups": [
{
"group": "Getting Started",
"pages": [
"cloud/ui-overview",
"cloud/your-first-task"
]
}
]
},
{

View File

@@ -6,7 +6,7 @@ slug: getting-started/quickstart
Run your first browser automation in 5 minutes. By the end of this guide, you'll scrape the top post from Hacker News using Skyvern's AI agent.
<Note>
Prefer a visual interface? Try the [Cloud UI](/cloud/getting-started) instead — no code required.
Prefer a visual interface? Try the [Cloud UI](/cloud/ui-overview) instead — no code required.
</Note>
## Step 1: Get your API key

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 861 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB