fix: lint and ts error, docs link (#77)

* fix: lint and ts error, docs link

* fix: update API key instructions and add model configuration in README files

* fix: update README files to include API key instructions and model configuration

* Feat/new env config (#78)

* fix: command in readme

* feat(core): update config for connectivity test

* fix: resolve merge conflicts and clean up environment variable handling in tests

---------

Co-authored-by: yuyutaotao <167746126+yuyutaotao@users.noreply.github.com>

Author: quanru

android/javascript-sdk-demo/README.md

@@ -11,11 +11,14 @@ If you want to use Android with Vitest, please refer to [android-with-vitest-dem
 create `.env` file
 
 ```shell
-# replace by your gpt-4o api key
-OPENAI_API_KEY="YOUR_TOKEN"
+# Replace with your own API key
+MIDSCENE_MODEL_BASE_URL="https://.../compatible-mode/v1"
+MIDSCENE_MODEL_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
+MIDSCENE_MODEL_NAME="qwen3-vl-plus"
+MIDSCENE_MODEL_FAMILY="qwen3-vl"
 ```
 
-Refer to this document if your want to use other models like Qwen: https://midscenejs.com/choose-a-model
+Refer to this document if your want to use other models like Qwen: https://midscenejs.com/model-strategy.html
 
 ### Run demo
 

android/javascript-sdk-demo/demo-run-yaml.ts

@@ -1,14 +1,18 @@
-import { AndroidAgent, AndroidDevice, getConnectedDevices } from '@midscene/android';
-import "dotenv/config";
+import {
+  AndroidAgent,
+  AndroidDevice,
+  getConnectedDevices,
+} from '@midscene/android';
+import 'dotenv/config';
 
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const sleep = (ms: number | undefined) => new Promise((r) => setTimeout(r, ms));
 Promise.resolve(
   (async () => {
     const devices = await getConnectedDevices();
     const page = new AndroidDevice(devices[0].udid);
 
     // 👀 init Midscene agent
-    const agent = new AndroidAgent(page,{
+    const agent = new AndroidAgent(page, {
       aiActContext:
         'If any location, permission, user agreement, etc. popup, click agree. If login page pops up, close it.',
     });
@@ -17,7 +21,6 @@ Promise.resolve(
 
     await sleep(5000);
 
-
     // 👀 run YAML with agent
     const { result } = await agent.runYaml(`
 tasks:

android/javascript-sdk-demo/demo.ts

@@ -1,14 +1,18 @@
-import { AndroidAgent, AndroidDevice, getConnectedDevices } from '@midscene/android';
-import "dotenv/config"; // read environment variables from .env file
-
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+import {
+  AndroidAgent,
+  AndroidDevice,
+  getConnectedDevices,
+} from '@midscene/android';
+import 'dotenv/config'; // read environment variables from .env file
+
+const sleep = (ms: number | undefined) => new Promise((r) => setTimeout(r, ms));
 Promise.resolve(
   (async () => {
     const devices = await getConnectedDevices();
     const page = new AndroidDevice(devices[0].udid);
 
     // 👀 init Midscene agent
-    const agent = new AndroidAgent(page,{
+    const agent = new AndroidAgent(page, {
       aiActContext:
         'If any location, permission, user agreement, etc. popup, click agree. If login page pops up, close it.',
     });
@@ -18,34 +22,40 @@ Promise.resolve(
     await sleep(5000);
 
     // 👀 type keywords, perform a search
-    await agent.aiAct(
-      'type "Headphones" in search box, click search button'
-    );
+    await agent.aiAct('type "Headphones" in search box, click search button');
 
     // 👀 wait for the loading
-    await agent.aiWaitFor("there is at least one headphone item on page");
+    await agent.aiWaitFor('there is at least one headphone item on page');
     // or you may use a plain sleep:
     // await sleep(5000);
 
     // 👀 understand the page content, find the items
     const items = await agent.aiQuery(
-      "{itemTitle: string, price: Number}[], find item in list and corresponding price"
+      '{itemTitle: string, price: Number}[], find item in list and corresponding price'
     );
-    console.log("headphones in stock", items);
+    console.log('headphones in stock', items);
 
-    const isMoreThan1000 = await agent.aiBoolean("Is the price of the headphones more than 1000?");
-    console.log("isMoreThan1000", isMoreThan1000);
+    const isMoreThan1000 = await agent.aiBoolean(
+      'Is the price of the headphones more than 1000?'
+    );
+    console.log('isMoreThan1000', isMoreThan1000);
 
-    const price = await agent.aiNumber("What is the price of the first headphone?");
-    console.log("price", price);
+    const price = await agent.aiNumber(
+      'What is the price of the first headphone?'
+    );
+    console.log('price', price);
 
-    const name = await agent.aiString("What is the name of the first headphone?");
-    console.log("name", name);
+    const name = await agent.aiString(
+      'What is the name of the first headphone?'
+    );
+    console.log('name', name);
 
-    const location = await agent.aiLocate("What is the location of the first headphone?");
-    console.log("location", location);
+    const location = await agent.aiLocate(
+      'What is the location of the first headphone?'
+    );
+    console.log('location', location);
 
     // 👀 assert by AI
-    await agent.aiAssert("There is a category filter on the left");
+    await agent.aiAssert('There is a category filter on the left');
   })()
 );

android/vitest-demo/README.md

@@ -11,13 +11,16 @@ This is a demo to show how to use adb to control android to do some automation t
 create `.env` file
 
 ```shell
-# replace by your gpt-4o api key
-OPENAI_API_KEY="YOUR_TOKEN"
+# Replace with your own API key
+MIDSCENE_MODEL_BASE_URL="https://.../compatible-mode/v1"
+MIDSCENE_MODEL_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
+MIDSCENE_MODEL_NAME="qwen3-vl-plus"
+MIDSCENE_MODEL_FAMILY="qwen3-vl"
 ```
 
 connect an Android device with [adb](https://developer.android.com/tools/adb)
 
-Refer to this document if your want to use other models like Qwen: https://midscenejs.com/choose-a-model
+Refer to this document if your want to use other models like Qwen: https://midscenejs.com/model-strategy.html
 
 ### Install
 

android/vitest-demo/tests/setting.test.ts

@@ -11,14 +11,13 @@ describe(
   async () => {
     await it('Android settings page demo for scroll', async () => {
       const devices = await getConnectedDevices();
-      const agent = await agentFromAdbDevice(devices[0].udid,{
+      const agent = await agentFromAdbDevice(devices[0].udid, {
         aiActContext:
           'If any location, permission, user agreement, etc. popup, click agree. If login page pops up, close it.',
       });
 
       await agent.launch('com.android.settings/.Settings');
 
-
       await agent.aiAct('scroll list to bottom');
       await agent.aiAct('open "More settings"');
       await agent.aiAct('scroll list to bottom');
@@ -27,5 +26,5 @@ describe(
       await agent.aiAct('swipe up one screen');
     });
   },
-  360 * 1000,
+  360 * 1000
 );

android/vitest-demo/tests/todo.test.ts

@@ -1,8 +1,12 @@
-import { AndroidAgent, AndroidDevice, getConnectedDevices } from '@midscene/android';
+import {
+  AndroidAgent,
+  AndroidDevice,
+  getConnectedDevices,
+} from '@midscene/android';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import 'dotenv/config'; // read environment variables from .env file
 
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const sleep = (ms: number | undefined) => new Promise((r) => setTimeout(r, ms));
 
 vi.setConfig({
   testTimeout: 240 * 1000,
@@ -16,7 +20,7 @@ describe('Test todo list', () => {
   beforeAll(async () => {
     const devices = await getConnectedDevices();
     const page = new AndroidDevice(devices[0].udid);
-    agent = new AndroidAgent(page,{
+    agent = new AndroidAgent(page, {
       aiActContext:
         'If any location, permission, user agreement, etc. popup, click agree. If login page pops up, close it.',
     });
@@ -29,43 +33,47 @@ describe('Test todo list', () => {
     'ai todo',
     async () => {
       await agent.aiAct(
-        "type 'Study JS today' in the task box input and press the Enter key",
+        "type 'Study JS today' in the task box input and press the Enter key"
       );
       await agent.aiAct(
-        "type 'Study Rust tomorrow' in the task box input and press the Enter key",
+        "type 'Study Rust tomorrow' in the task box input and press the Enter key"
       );
       await agent.aiAct(
-        "type 'Study AI the day after tomorrow' in the task box input and press the Enter key",
+        "type 'Study AI the day after tomorrow' in the task box input and press the Enter key"
       );
       await agent.aiAct(
-        'move the mouse to the second item in the task list and click the delete button on the right of the second task',
+        'move the mouse to the second item in the task list and click the delete button on the right of the second task'
       );
       await agent.aiAct(
-        'click the check button on the left of the second task',
+        'click the check button on the left of the second task'
       );
       await agent.aiAct(
-        "click the 'completed' status button below the task list",
+        "click the 'completed' status button below the task list"
       );
 
       const list = await agent.aiQuery('string[], the complete task list');
       expect(list.length).toEqual(1);
 
       await agent.aiAssert(
-        'Near the bottom of the list, there is a tip shows "1 item left".',
+        'Near the bottom of the list, there is a tip shows "1 item left".'
       );
 
       const name = await agent.aiString('What is the name of the first todo?');
       console.log('name', name);
 
-      const todoCount = await agent.aiNumber('How many todos are there in the list?');
+      const todoCount = await agent.aiNumber(
+        'How many todos are there in the list?'
+      );
       console.log('todoCount', todoCount);
 
       const isAllCompleted = await agent.aiBoolean('Is all todos completed?');
       console.log('isAllCompleted', isAllCompleted);
 
-      const location = await agent.aiLocate('What is the location of the first todo?');
+      const location = await agent.aiLocate(
+        'What is the location of the first todo?'
+      );
       console.log('location', location);
     },
-    720 * 1000,
+    720 * 1000
   );
 });

android/yaml-scripts-demo/README.md

@@ -6,11 +6,13 @@
 create `.env` file
 
 ```shell
-# replace by your gpt-4o own
-OPENAI_API_KEY="YOUR_TOKEN"
-```
+# Replace with your own API key
+MIDSCENE_MODEL_BASE_URL="https://.../compatible-mode/v1"
+MIDSCENE_MODEL_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
+MIDSCENE_MODEL_NAME="qwen3-vl-plus"
+MIDSCENE_MODEL_FAMILY="qwen3-vl"
 
-Refer to this document if your want to use other models like Qwen: https://midscenejs.com/choose-a-model
+Refer to this document if your want to use other models like Qwen: https://midscenejs.com/model-strategy.html
 
 ## Install
 

android/yaml-scripts-demo/midscene-scripts/maps-navigation.yaml

@@ -1,5 +1,3 @@
-# search headphone on ebay, extract the items info into a json file, and assert the shopping cart icon
-
 android:
   # launch: https://www.ebay.com
   deviceId: s4ey59ytbitot4yp

android/yaml-scripts-demo/midscene-scripts/twitter-auto-like.yaml

@@ -1,5 +1,3 @@
-# search headphone on ebay, extract the items info into a json file, and assert the shopping cart icon
-
 android:
   deviceId: s4ey59ytbitot4yp
 

bridge-mode-demo/README.md

@@ -9,11 +9,14 @@ This is a demo to show how to use bridge mode to control the page on your deskto
 create `.env` file
 
 ```shell
-# replace by your gpt-4o api key
-OPENAI_API_KEY="YOUR_TOKEN"
+# Replace with your own API key
+MIDSCENE_MODEL_BASE_URL="https://.../compatible-mode/v1"
+MIDSCENE_MODEL_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
+MIDSCENE_MODEL_NAME="qwen3-vl-plus"
+MIDSCENE_MODEL_FAMILY="qwen3-vl"
 ```
 
-Refer to this document if your want to use other models like Qwen: https://midscenejs.com/choose-a-model
+Refer to this document if your want to use other models like Qwen: https://midscenejs.com/model-strategy.html
 
 ### Install