playright in docs (#139)

README.md

@@ -65,6 +65,10 @@ lavague --instructions examples/instructions/huggingface.yaml --config examples/
 
 For a step-by-step guide or to run LaVague in a Google Colab, see our [quick-tour](https://docs.lavague.ai/en/latest/docs/get-started/quick-tour/) which will walk you through how to get set-up and launch LaVague with our CLI tool.
 
+## 🎭 Playwright integration
+
+If you want to get started with LaVague build using Playwright as your underlying automation tool, see our [Playwright integration guide](./docs/docs/get-started/playwright.md)
+
 ## 🙋 Contributing
 
 We would love your help in making La Vague a reality. 

docs/docs/get-started/get-started-vscode-extension.md

@@ -18,11 +18,7 @@ You can generate your automation code and directly preview and test the generate
 Check out what the LaVague VSCode Extension looks like in action:
 
 <div>
-  <figure>
-    <img src="https://raw.githubusercontent.com/lavague-ai/lavague/main/docs/assets/vscode-demo.gif" alt="LaVague VSCode Extension Example">
-    <figcaption><b>LaVague interacting with Hacker News.</b></figcaption>
-  </figure>
-  <br><br>
+    <img src="https://raw.githubusercontent.com/lavague-ai/lavague/main/docs/assets/vscode-demo.gif" alt="LaVague VSCode Extension Example" style="margin-left: 0px;">
 </div>
 
 ### Getting started

docs/docs/get-started/playwright.md

@@ -0,0 +1,48 @@
+# Playwright Integration
+
+In this guide, we're going to show you how you can get started with 'lavague build' with Playwright.
+
+🔨`lavague build` will take your text instructions and leverage a large action model to create a Python file with the automation code needed to perform that action.
+
+!!! note "Playright vs Selenium"
+
+    - 🚀 Playwright is faster with better performance than Selenium.
+    - ⚡ Unlike Selenium, it doesn't require any additional driver installations as cross-browser support is built-in.
+    - ⏳ However, we currently only support Playwright for the `lavague build` command, due to constraints around supporting an async library with `launch` and the vscode extension.
+
+|         | Playwright | Selenium |
+| :---:          | :---: | :---: |
+lavague build    | ✅  | ✅ |
+lavague launch   | ❌ | ✅ | 
+VSCode extension | ❌ | ✅ | 
+
+## Getting started with Playwright
+
+To get started with `lavague build` with Playwright, you need to:
+
+**Step one:** Download lavague with the optional Playwright dependencies
+
+```
+pip install lavague[playwright]
+```
+
+**Step two:** Run your lavague build command with a `Playwright` configuration file
+
+For example, you can run lavague build with our example Playright configuration file and instructions file with the following command from the root of our LaVague repo:
+
+`lavague -c examples/configurations/api/openai_api_playwright.py -i examples/instructions/hugginface.yaml build`
+
+!!! success "Generated automation file"
+    A new file will be created in your current directory `openai_api_playwright_huggingface_gen.py`, which contains the automation code needed to run the instructions outlined in the `huggingface.yaml` file.
+
+You can create a new `yaml` file with your own `url` and `instructions` to test different actiosn on new sites!
+
+!!! abstract "Playright configuration file"
+
+    There are two key configuration options we need to specify to make a LaVague config file compatible with Playright instead of Selenium:
+
+    1. Set `get_driver` option to our Playwright driver:
+    `get_driver = default_get_playwright_driver`
+
+    2. Set `prompt_template` to the default Playwright prompt template:
+    `prompt_template = PLAYWRIGHT_PROMPT`

docs/docs/get-started/setting-up-la-vague.md

@@ -1,11 +1,14 @@
 
-# Installation & set up
+# Installation
 
 In this section, we're going to walk you through how you can install and set up everything you need to run LaVague locally.
 
 > If you just want to test out LaVague without having to install anything locally, you can run our [Quick Tour notebook with Google Colab](https://colab.research.google.com/github/lavague-ai/lavague/blob/main/docs/docs/get-started/quick-tour-notebook/quick-tour.ipynb).
 
-To start using LaVague, we need to install a webdriver and store it in our home directory, so that LaVague can interact with the browser in our environment. We will then also need to install the LaVague package.
+To start using LaVague, we need to install a webdriver and store it in our home directory, so that LaVague can interact with the browser using underlying automation tool `Selenium`. We will then also install the LaVague package.
+
+!!! note "Playwright integration"
+    Alternatively, we support using Playwright for our `lavague build` command, which does not require webdriver installation. With the `lavague build` CLI command, you can generate Python files with automation code to carry out actions from text instructions! See our [playwright guide](./playwright.md) to see how to get started with Playright. 
 
 We provide two key installation options:
 

docs/index.md

@@ -37,6 +37,10 @@ lavague --instructions examples/instructions/huggingface.yaml --config examples/
 
 For a step-by-step guide or to run LaVague in a Google Colab, see our [quick-tour](https://docs.lavague.ai/en/latest/docs/get-started/quick-tour/) which will walk you through how to get set-up and launch LaVague with our CLI tool.
 
+## 🎭 Playwright integration
+
+If you want to get started with LaVague build using Playwright as your underlying automation tool, see our [Playwright integration guide](./docs/get-started/playwright.md)
+
 ## 🙋 Contributing
 
 We would love your help in making La Vague a reality. 

mkdocs.yml

@@ -100,6 +100,7 @@ nav:
   - Quick tour: 'docs/get-started/quick-tour.ipynb'
   - Alpha VSCode extenstion: 'docs/get-started/get-started-vscode-extension.md'
   - Customization: 'docs/get-started/customization.md'
+  - Playwright: 'docs/get-started/playwright.md'
 
 - 🤝 Integrations:
   - Overview: 'docs/integrations/home.md'