From 6d6df2e76364c52a7fd1f7c699ebec9127dbd0cf Mon Sep 17 00:00:00 2001 From: Suchintan Date: Sun, 16 Jun 2024 02:10:29 -0400 Subject: [PATCH] Documentation updates -- add introduction + Skyvern in action page (#477) --- README.md | 5 +- docs/getting-started/skyvern-in-action.mdx | 49 +++++++++ docs/introduction.mdx | 110 ++++++++++++--------- docs/mint.json | 44 +++++---- 4 files changed, 142 insertions(+), 66 deletions(-) create mode 100644 docs/getting-started/skyvern-in-action.mdx diff --git a/README.md b/README.md index 63aeccc3..4a6eff6d 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@

-[Skyvern](https://www.skyvern.com) automates browser-based workflows using LLMs and computer vision. It provides a simple API endpoint to fully automate manual workflows, replacing brittle or unreliable automation solutions. +[Skyvern](https://www.skyvern.com) automates browser-based workflows using LLMs and computer vision. It provides a simple API endpoint to fully automate manual workflows on a large number of websites, replacing brittle or unreliable automation solutions.

@@ -33,12 +33,13 @@ Traditional approaches to browser automations required writing custom scripts for websites, often relying on DOM parsing and XPath-based interactions which would break whenever the website layouts changed. -Instead of only relying on code-defined XPath interactions, Skyvern adds computer vision and LLMs to the mix to parse items in the viewport in real-time, create a plan for interaction and interact with them. +Instead of only relying on code-defined XPath interactions, Skyvern relies on prompts in addition to computer vision and LLMs to the mix to parse items in the viewport in real-time, create a plan for interaction and interact with them. This approach gives us a few advantages: 1. Skyvern can operate on websites it’s never seen before, as it’s able to map visual elements to actions necessary to complete a workflow, without any customized code 1. Skyvern is resistant to website layout changes, as there are no pre-determined XPaths or other selectors our system is looking for while trying to navigate +1. Skyvern is able to take a single workflow and apply it to a large number of websites, as it’s able to reason through the interactions necessary to complete the workflow 1. Skyvern leverages LLMs to reason through interactions to ensure we can cover complex situations. Examples include: 1. If you wanted to get an auto insurance quote from Geico, the answer to a common question “Were you eligible to drive at 18?” could be inferred from the driver receiving their license at age 16 1. If you were doing competitor analysis, it’s understanding that an Arnold Palmer 22 oz can at 7/11 is almost definitely the same product as a 23 oz can at Gopuff (even though the sizes are slightly different, which could be a rounding error!) diff --git a/docs/getting-started/skyvern-in-action.mdx b/docs/getting-started/skyvern-in-action.mdx new file mode 100644 index 00000000..e48b17e2 --- /dev/null +++ b/docs/getting-started/skyvern-in-action.mdx @@ -0,0 +1,49 @@ +--- +title: 'Skyvern In Action' +description: 'Examples of Skyvern running in production' +--- + +## Automatically apply to jobs on sites like Lever.co +Skyvern can be instructed to navigate to job application websites like Lever.co and automatically generate answers, fill out and submit the job application. + +[💡 See it for yourself](https://app.skyvern.com/create/job_application) + +Video recording coming soon! + +## Automate transactions on e-commerce websites +Skyvern can be instructed to navigate to e-commerce websites, search for products, and add them to cart. Skyvern can even purchase the underlying items! + +[💡 See it for yourself](https://app.skyvern.com/create/finditparts) + +

+ Skyvern adding products to cart on finditparts.com +

+ +## Navigating to government websites to register accounts or fill out forms +Skyvern can navigate complex and boring government forms and fill them out with given information. It's especially powerful because the forms can change their layouts, and Skyvern will continue filling them out correctly. + +[💡 See it for yourself](https://app.skyvern.com/create/california_edd) +``` +./run_ui.sh california_edd +``` +

+ +

+ +## Retrieving insurance quotes from insurance providers in any language +Skyvern can navigate complex multi-part forms and fill out forms in any language + +[💡 See it for yourself](https://app.skyvern.com/create/geico) +

+ +

+ +[💡 See it for yourself](https://app.skyvern.com/create/bci_seguros) +

+ +

+ +## Log into a portal and download invoices (Demo coming soon) +Skyvern can log into a website, navigate until it finds a page with invoices, and download the invoices + +Demo video coming soon \ No newline at end of file diff --git a/docs/introduction.mdx b/docs/introduction.mdx index 2589c0b9..ea27b451 100644 --- a/docs/introduction.mdx +++ b/docs/introduction.mdx @@ -1,71 +1,87 @@ --- title: Introduction -description: 'Welcome to the home of your new documentation' +description: '🐉 Automate Browser-based workflows using LLMs and Computer Vision 🐉' --- -Hero Light -Hero Dark +[Skyvern](https://www.skyvern.com) automates browser-based workflows using LLMs and computer vision. It provides a simple API endpoint to fully automate manual workflows, replacing brittle or unreliable automation solutions. +

+ Recording of Skyvern automating an insurance quote being generated on Geico.com +

-## Setting up +# Why Skyvern? -The first step to world-class documentation is setting up your editing environments. +Traditional approaches to browser automations required writing custom scripts for websites, often relying on DOM parsing and XPath-based interactions which would break whenever the website layouts changed. + +Instead of only relying on code-defined XPath interactions, Skyvern relies on prompts in addition to computer vision and LLMs to the mix to parse items in the viewport in real-time, create a plan for interaction and interact with them. + +This approach gives us a few advantages: + +1. Skyvern can operate on websites it’s never seen before, as it’s able to map visual elements to actions necessary to complete a workflow, without any customized code +1. Skyvern is resistant to website layout changes, as there are no pre-determined XPaths or other selectors our system is looking for while trying to navigate +1. Skyvern is able to take a single workflow and apply it to a large number of websites, as it’s able to reason through the interactions necessary to complete the workflow +1. Skyvern leverages LLMs to reason through interactions to ensure we can cover complex situations. Examples include: + 1. If you wanted to get an auto insurance quote from Geico, the answer to a common question “Were you eligible to drive at 18?” could be inferred from the driver receiving their license at age 16 + 1. If you were doing competitor analysis, it’s understanding that an Arnold Palmer 22 oz can at 7/11 is almost definitely the same product as a 23 oz can at Gopuff (even though the sizes are slightly different, which could be a rounding error!) + +Want to see examples of Skyvern in action? [Check out some examples we have here](introduction/use-cases) + +# How it works +Skyvern was inspired by the Task-Driven autonomous agent design popularized by [BabyAGI](https://github.com/yoheinakajima/babyagi) and [AutoGPT](https://github.com/Significant-Gravitas/AutoGPT) -- with one major bonus: we give Skyvern the ability to interact with websites using browser automation libraries like [Playwright](https://playwright.dev/). + + + Skyvern's system diagram + Skyvern's system diagram + + + +## Skyvern use-cases - Get your docs set up locally for easy development + Watch Skyvern automatically apply to jobs - Preview your changes before you push to make sure they're perfect + Watch Skyvern automate purchases on e-commerce websites + + + Watch Skyvern automate interacting with government websites + + + Watch Skyvern navigate complex multi-page forms in any language -## Make it yours - -Update your docs to your brand and add valuable content for the best user conversion. - +## Quickstart - Customize your docs to your company's colors and brands + Start automating tasks with the hosted version of Skyvern - Automatically generate endpoints from an OpenAPI spec - - - Build interactive features and designs to guide your users - - - Check out our showcase of our favorite documentation + Start automating tasks in your own cloud + diff --git a/docs/mint.json b/docs/mint.json index 64369a5d..2fb1f87c 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -48,41 +48,51 @@ "name": "Skyvern Cloud", "icon": "cloud", "url": "https://app.skyvern.com" + }, + { + "name": "Book a demo", + "icon": "calendar", + "url": "https://meetings.hubspot.com/suchintan" } ], "navigation": [ { - "group": "Get Started", + "group": "Getting Started", "pages": [ "introduction", - "getting-started" + "getting-started/skyvern-in-action", + "getting-started/quickstart-skyvern-cloud", + "getting-started/quickstart-open-source", + "getting-started/supported-features" ] }, { - "group": "Running Tasks", + "group": "Tasks", "pages": [ "running-tasks/introduction", + "running-tasks/prompting-tips", "running-tasks/advanced-features", "running-tasks/api-spec", - "running-tasks/prompting-tips", - "running-tasks/faq" + "running-tasks/webhooks", + "running-tasks/visualizing-results", + "running-tasks/visualizing-results-advanced" ] }, { - "group": "Visualizer", - "pages": [ - "visualizer/set-up", - "visualizer/tasks-and-steps", - "visualizer/debugging-a-step", - "visualizer/faq" - ] - }, - { - "group": "Workflows", + "group": "Workflows (Beta)", "pages": [ "workflows/introduction", - "workflows/components", - "workflows/faq" + "workflows/creating-workflows", + "workflows/running-workflows", + "workflows/workflow-blocks" + ] + }, + { + "group": "Integrations", + "pages": [ + "integrations/zapier", + "integrations/make.com", + "integrations/api" ] } ],