DEV Community: TurnV X

browse-use tutorial: Let AI control the browser and work for you. (Low-cost version)

TurnV X — Sun, 23 Mar 2025 18:36:31 +0000

This tutorial requires you to have Git, Python, pip, and VSCode (or another IDE). There are many related tutorials available, so if you haven't set up these applications, please search online or ask an AI for help.

PS: The tutorials I write are usually based on what I find useful and have successfully replicated on multiple devices. They are not just simple summaries by AI; every word is typed by me. If you find it helpful, please give a free like. Thank you very much!

Step 1: Clone the browse-use repository

In VSCode, select an appropriate folder by choosing "Open Folder," and run the following command in the VSCode terminal: (If you can't clone it, you can also download the ZIP package directly from the repository and extract it.)

git clone https://github.com/browser-use/browser-use.git

Step 2: Install the browser-use library, the playwright library, and the gradio library

Still using the terminal, run the following commands in sequence (requires Python ≥ 3.11):

pip install browser-use

playwright install

pip install gradio

Step 3: Modify the code configuration for low-cost usage

3.1 Locate the gradio_demo.py file in the cloned repository and completely replace it with the code I've edited below: (I've made several changes, so I'm sharing it directly for everyone's convenience.)

import os
import asyncio
from dataclasses import dataclass
from typing import List, Optional

# Third-party imports
import gradio as gr
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from rich.console import Console
from rich.panel import Panel
from rich.text import Text
from pydantic import SecretStr

# Local module imports
from browser_use import Agent

load_dotenv()


@dataclass
class ActionResult:
    is_done: bool
    extracted_content: Optional[str]
    error: Optional[str]
    include_in_memory: bool


@dataclass
class AgentHistoryList:
    all_results: List[ActionResult]
    all_model_outputs: List[dict]


def parse_agent_history(history_str: str) -> None:
    console = Console()

    # Split the content into sections based on ActionResult entries
    sections = history_str.split('ActionResult(')

    for i, section in enumerate(sections[1:], 1):  # Skip first empty section
        # Extract relevant information
        content = ''
        if 'extracted_content=' in section:
            content = section.split('extracted_content=')[1].split(',')[0].strip("'")

        if content:
            header = Text(f'Step {i}', style='bold blue')
            panel = Panel(content, title=header, border_style='blue')
            console.print(panel)
            console.print()


async def run_browser_task(
    task: str,
    api_key: str,
    model: str = 'gpt-4o',
    headless: bool = True,
) -> str:
    if not api_key.strip():
        return 'Please provide an API key'

    os.environ['OPENAI_API_KEY'] = api_key

    try:
        agent = Agent(
            task=task,
            # llm=ChatOpenAI(model='gpt-4o'),
            llm=ChatOpenAI(base_url='https://api.cursorai.art/v1', model='gpt-4o', api_key=SecretStr(api_key)),
        )
        result = await agent.run()
        #  TODO: The result cloud be parsed better
        return result # type: ignore
    except Exception as e:
        return f'Error: {str(e)}'


def create_ui():
    with gr.Blocks(title='Browser Use GUI') as interface:
        gr.Markdown('# Browser Use Task Automation')

        with gr.Row():
            with gr.Column():
                api_key = gr.Textbox(label='OpenAI API Key', placeholder='sk-...', type='password')
                task = gr.Textbox(
                    label='Task Description',
                    placeholder='E.g., Find flights from New York to London for next week',
                    lines=3,
                )
                model = gr.Dropdown(
                    # choices=['gpt-4', 'gpt-3.5-turbo'], label='Model', value='gpt-4'
                    choices=['gpt-4o'], label='Model', value='gpt-4o'
                )
                headless = gr.Checkbox(label='Run Headless', value=True)
                submit_btn = gr.Button('Run Task')

            with gr.Column():
                output = gr.Textbox(label='Output', lines=10, interactive=False)

        submit_btn.click(
            fn=lambda *args: asyncio.run(run_browser_task(*args)),
            inputs=[task, api_key, model, headless],
            outputs=output,
        )

    return interface


if __name__ == '__main__':
    demo = create_ui()
    demo.launch()

3.2 Navigate to the root directory of the browser-use folder using cd, and run the following command in the terminal:

cd browser-use
python examples/ui/gradio_demo.py

3.3 After starting the service, open http://127.0.0.1:7860/ in your browser, and enter the API Key and task description.

(The method to obtain the API Key is provided at the end of the document.)

Additional: How to Obtain the API Key

After registering and logging in on the CURSOR API official website, click on API Tokens and copy your own API token from the right side.

Thank you for watching, and I wish you great prosperity!

AI Code Assistant — Continue Custom Configuration for AI Development Using OpenAI GPT Models or Claude 3.5 Models

TurnV X — Sun, 23 Feb 2025 11:11:59 +0000

Introduction

This tutorial will guide you through the process of installing and customizing the Continue plugin in Visual Studio Code (VSCode) and using the Claude 3.5 model for AI development. By following this tutorial, you'll be able to efficiently use an AI assistant to enhance your development productivity. (This method allows access to all large models without a VPN)

Key Considerations

Key Point: Whether you're using OpenAI's GPT models, Claude models, or any other models, you only need to modify the config.json configuration file of Continue!

API KEY: Obtain your API key by creating one on the large model API platform CURSOR API. Example: sk-1Qpxob9KYXq6b6oCypgyxjFwuiA817KfPAHo8XET7HjWQqU

Base URL: https://api.cursorai.art/v1/

Mainstream Model Names: claude-3-5-sonnet-20241022, claude-3-5-sonnet-20240620, gpt-4o, gpt-4o-mini

Required Tools and Prerequisites

Install the latest version of Visual Studio Code
A network connection to download the plugin (No VPN needed for accessing large models)
An API key for the Claude 3.5 model
Basic programming knowledge, preferably familiar with JavaScript or Python

Detailed Step-by-Step Guide

Install the Continue Plugin

Open VSCode, go to the Extensions Marketplace (shortcut Ctrl+Shift+X), search for "Continue," and click Install.

Configure the Claude 3.5 Model

In VSCode, press Ctrl+Shift+P to open the command palette, type “Continue: Open configuration file,” and add the model configuration under "models". For example:

    {
      "apiKey": "your-api-key",
      "apiBase": "https://api.cursorai.art/v1",
      "model": "cursor-3-5-sonnet-20241022",
      "title": "Claude-3-5-sonnet-20241022",
      "systemMessage": "You are an expert software developer. You give helpful and concise responses.",
      "provider": "openai"
    }

Note: Make sure to separate model configurations with commas, but don’t add a comma after the last model!

Customize Plugin Settings

Adjust the Continue plugin's user settings according to your development needs, such as enabling Google search for documentation.

Use Continue for AI Development

In the code editor, select the model you just configured. Type @ to have Continue read any file, and the plugin will use the Claude 3.5 model to provide code optimization suggestions.

Configure Autocomplete Model (Optional)

In the model configuration file, modify the "tabAutocompleteModel" section as follows:

  "tabAutocompleteModel": {
    "apiKey": "your-api-key",
    "apiBase": "https://api.cursorai.art/v1",
    "model": "gpt-4o-mini",
    "title": "gpt-4o-mini",
    "provider": "openai"
  }

Example and Demonstration

Code Optimization Example

import requests
from bs4 import BeautifulSoup
import csv
from time import sleep

def crawl_website(url, output_file):
    # Set request headers to simulate browser access
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
    }

    try:
        # Send GET request to fetch page content
        response = requests.get(url, headers=headers)
        response.raise_for_status()  # Check if the request is successful

        # Parse the HTML using BeautifulSoup
        soup = BeautifulSoup(response.text, 'html.parser')

        # Extract data (example: extracting all titles)
        titles = soup.find_all('h2')  # Adjust the selector based on the actual webpage structure

        # Save data to a CSV file
        with open(output_file, 'w', newline='', encoding='utf-8') as f:
            writer = csv.writer(f)
            writer.writerow(['Title'])  # Write the header

            for title in titles:
                writer.writerow([title.text.strip()])

        print(f"Data saved to {output_file}")

    except requests.RequestException as e:
        print(f"Error during crawling: {e}")

    # Add delay to avoid frequent requests
    sleep(2)

# Usage example
if __name__ == "__main__":
    target_url = "https://example.com"  # Replace with the URL you want to scrape
    output_file = "crawled_data.csv"
    crawl_website(target_url, output_file)

Using Continue-generated optimization suggestions (prompt: Modify for paginated scraping of Douban 250):

import requests
from bs4 import BeautifulSoup
import csv
from time import sleep
import random

def crawl_douban_top250(output_file, items_per_page=25):
    base_url = "https://movie.douban.com/top250"
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
        'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8',
    }

    total_pages = 10
    movies_data = []

    try:
        for page in range(total_pages):
            start_index = page * items_per_page
            url = f"{base_url}?start={start_index}"

            print(f"Scraping page {page + 1}...")
            response = requests.get(url, headers=headers)
            response.raise_for_status()

            soup = BeautifulSoup(response.text, 'html.parser')
            movie_items = soup.find_all('div', class_='item')

            if not movie_items:
                print(f"Warning: No movie data found on page {page + 1}")
                continue

            for item in movie_items:
                try:
                    rank = item.find('em').text
                    title = item.find('span', class_='title').text
                    info = item.find('div', class_='bd').find('p').text.strip()

                    info_lines = [line.strip() for line in info.split('\n') if line.strip()]
                    year = info_lines[1].split('/')[0].strip()
                    director = info_lines[0].split('导演: ')[1].split('主演:')[0].strip()

                    rating = item.find('span', class_='rating_num').text
                    votes = item.find('div', class_='star').find_all('span')[-1].text
                    votes = ''.join(filter(str.isdigit, votes))

                    movies_data.append([rank, title, year, director, rating, votes])
                    print(f"Scraped: {title}")
                except Exception as e:
                    print(f"Error processing movie data: {e}")
                    continue

        delay = random.uniform(3, 7)
        print(f"Waiting for {delay:.2f} seconds before continuing...")
        sleep(delay)

        with open(output_file, 'w', newline='', encoding='utf-8-sig') as f:
            writer = csv.writer(f)
            writer.writerow(['Rank', 'Movie Title', 'Year', 'Director', 'Rating', 'Number of Votes'])
            writer.writerows(movies_data)

            print(f"Scraping completed! A total of {len(movies_data)} movies scraped.")
            print(f"Data saved to {output_file}")

    except requests.RequestException as e:
        print(f"Network request error: {e}")
    except Exception as e:
        print(f"Program execution error: {e}")

if __name__ == "__main__":
    output_file = "douban_top250.csv"
    crawl_douban_top250(output_file)

Tips and Precautions

Tip: Ensure that your API key is kept secure and not exposed in public code repositories.

Note: When

using the Continue plugin for code optimization, always review the suggestions and ensure they align with your project requirements.

FAQs

Q1: How can I get the API key for Claude 3.5?

A1: You can visit CURSOR API, sign up, and obtain the API key by creating a token on the token page.

Q2: What if the Continue plugin is not working?

A2: Check if your API key is configured correctly and ensure that your network connection is stable. Also, check VSCode's output panel for error logs.

Q3: How can I customize prompt templates?

A3: In the Continue plugin settings page, locate the “Workspace prompts path” option and input your custom prompt content.

Q4: Does Claude 3.5 not support one-click code writing?

A4: This is due to official limitations, as Anthropic does not currently offer any auto-completion models. You can switch the model to gpt-4o to enable this feature.

Summary

By following this tutorial, you have learned how to install and configure the Continue plugin in VSCode, use your custom API key to access OpenAI GPT models or Claude 3.5 models, and boost your AI development efficiency. With proper configuration and usage of these tools, you can significantly enhance your development productivity.

Next, you can explore more advanced features of the Continue plugin or integrate other AI models to meet more complex development needs.

References and Further Reading

Related Downloads

Visual Studio Code

VSCode CLine 插件(Claude dev)自定义配置使用 Opneai GPT模型或 Claude 3.5 模型进行 AI 开发

TurnV X — Sun, 23 Feb 2025 06:20:06 +0000

简介

本教程将指导您如何在 Visual Studio Code (VSCode) 中安装和自定义配置 CLine 插件，并使用 Claude 3.5 模型进行 AI 开发。通过本教程，您将能够高效地利用 AI 助手提升开发效率。

重点注意事项

重点： 无论是用 Openai GPT系列模型还是 Claude系列模型，都是选择 Openai 兼容 Openai Compatible 模式！！！

API KEY： 在大模型API平台 CURSOR API 令牌页面新建获得。例：sk-1Qpxob9KYXq6b6oCypgyxjFwuiA817KfPAHo8XET7HjWQqU

Base URL： https://api.cursorai.art/v1/

主流模型全称： claude-3-5-sonnet-20241022、claude-3-5-sonnet-20240620、gpt-4o、gpt-4o-mini

所需工具与前提条件

安装了最新版本的 Visual Studio Code
网络连接，用于下载插件和访问 Claude 3.5 API
拥有 Claude 3.5 模型的 API 密钥
基本的编程知识，建议熟悉 JavaScript 或 Python

详细步骤指南

安装 CLine 插件

打开 VSCode，进入扩展市场（快捷键 Ctrl+Shift+X），搜索 “CLine”，然后点击安装。

配置 Claude 3.5 API 密钥

在 VSCode 中，按 Ctrl+Shift+P 打开命令面板，输入 “CLine: Open Settings”，然后在设置中找到 “API Key” 选项，输入您的 Claude 3.5 API 密钥。
```
{
    "cline.apiKey": "您的Claude3.5_API_密钥"
}
```
自定义插件设置

根据您的开发需求，调整 CLine 插件的其他设置，例如响应时间、提示模板等。在设置页面中，您可以修改如下配置：
```
{
    "cline.responseTime": 5000,
    "cline.promptTemplate": "请根据以下代码提供优化建议："
}
```
使用 CLine 进行 AI 开发

在代码编辑器中，选择一段代码，右键点击选择 “CLine: Generate Suggestions”，插件将使用 Claude 3.5 模型生成代码优化建议。

示例与演示

代码优化示例

// 原始代码
function add(a, b) {
    return a + b;
}

使用 CLine 生成的优化建议：

// 优化后的代码
const add = (a, b) => a + b;

提示与注意事项

提示： 确保您的 API 密钥安全，不要在公共代码库中泄露。

注意： 在调用 API 时，请务必添加 try 重试机制，以提升代码的健壮性。

常见问题解答

Q1: 如何获取 Claude 3.5 的 API 密钥？

A1: 您可以访问 CURSOR API，注册并登录，在令牌页面新建令牌获取 API 密钥。

Q2: CLine 插件不工作怎么办？

A2: 请检查您的 API 密钥是否正确配置，并确保您的网络连接正常。此外，查看 VSCode 的输出面板以获取错误日志。

Q3: 如何自定义提示模板？

A3: 在 CLine 插件的设置页面中，找到 “promptTemplate” 选项，输入您自定义的提示内容。

总结

通过本教程，您已经学会如何在 VSCode 中安装和配置 CLine 插件，利用自定义key 使用 Openai Gpt系列模型或 Claude 3.5 模型提升 AI 开发效率。合理配置和使用这些工具，可以显著提高您的开发生产力。

接下来，您可以探索更多 CLine 插件的高级功能，或尝试集成其他 AI 模型以满足更复杂的开发需求。

参考资料与延伸阅读

以低于官方八倍的价格，揭秘如何在Cherry Studio中使用Claude！

TurnV X — Wed, 19 Feb 2025 13:56:32 +0000

Cherry Studio AI 是一款强大的多模型AI 助手，支持iOS、macOS 和Windows 平台。快速切换多个先进的LLM 模型，提升工作学习效率。

CURSOR AI是一个模型种类齐全，响应速度快，技术支持强大的api网站。

一、下载Cherry Studio AI

1.1 进入Cherry Studio - 全能的AI助手下载自己系统对应的客户端并安装

二、为Cherry Studio设置想用的Claude模型

2.1 进入设置页

2.2 选择模型服务，点击openAI，添加api密钥和api地址，在最底部增加模型。

为什么选择openAI：因为CURSOR AI上所有的模型采用的是openAI的协议；

api密钥获取地址：CURSOR API

api地址：见下图

增加模型：claude-3-5-sonnet-20241022

2.3 在对话处选择claude-3-5-sonnet-20241022模型并开始对话

三、在CURSOR AI中获取apikey、模型名称及价格说明

3.1 在CURSOR API注册完成后点击API令牌，点击右侧的复制，就获得了一个apikey

3.2 点击模型价格，点击模型名称可以复制任意模型（包括但不限于对话、语音、绘画、视频模型）

3.3 关于价格，模型的花费与官方是一致的。但是因为充值比例不同，在CURSOR AI上，美刀和RMB的汇率是一比一的，所以实际消费会变得非常便宜。

感谢你的耐心观看，祝你发财！

Are you still spending $200 a month on an OpenAI Pro subscription? Open WebUI is a must-have tool for researchers!

TurnV X — Mon, 17 Feb 2025 15:57:08 +0000

Don't buy shared accounts anymore. This article teaches you how to use Open WebUI to access OpenAI's most advanced models like o1-pro, o3-mini, and sora at a very low cost. This includes, but is not limited to, gpt4o, claude-3-5-sonnet-20241022, gemini-exp-1206, deepseek-r1, and other music, art, and video generation models.

Open WebUI is a user-friendly WebUI for LLMs, supporting runtime environments like Ollama and OpenAI-compatible APIs. The interface and usage are very similar to OpenAI's.

Here is the table of contents for this article:
1. Deploying Open WebUI
2. Adding request URLs and models to Open WebUI
3. Enhancing Open WebUI with AI drawing capabilities

Let's start the tutorial:

1.Deploying Open WebUI

1.1 Using Windows as an example, hold down Win + R on your computer, type "cmd" in the run box that appears, and press Enter to open the terminal.

1.2 Type the following in the terminal:

pip install open-webui

If you haven't added your Python path to your system's PATH variable, you should add D:\install\python\Scripts (your Python path) to the system's PATH environment variable. (You can refer to other tutorials for guidance.)

1.3 After the installation is complete, enter the following in the terminal: (It will download some packages, so please be patient while it completes.)

open-webui serve

1.4 Go to the website below and register an account. (The registration details aren't strict and won't be uploaded to the official server; it's just for local verification.)

http://localhost:8080

2.Add request URL and model for Open WebUI.

2.1 Next, we'll start configuring the model. Follow the sequence in the diagram to enter the settings page.

2.2 Click on External Connections and add a connection. In the URL field, enter:

https://api.cursorai.art/v1

After registering an account in the CURSOR API, copy an API key and paste it into the Key field.

In the Model ID field, enter models like gpt-4o-2024-11-20, o3-mini-all, claude-3-5-sonnet-20241022, gemini-2.0-pro-exp-02-05, etc. (Don't forget to click the '+' on the right.)

2.3 Additional: after registering an account in the CURSOR API, go to the **API Tokens* section and copy an API key. In the Model Pricing section, click on the model name to copy it.(You can change the language settings to your native language.)

2.4 Select a model where the arrow points, and you can start the conversation! (If it doesn't connect initially, try switching models and retrying a few times, including refreshing the page and restarting the service.)

3 Add AI Drawing Functionality to Open WebUI

3.1 Go to the settings page and click on Admin Settings.

3.2 Click on "Images" and turn on the button for image generation on the right side. Use the same URL as before, paste the API key, select the default model as DALL-E 3, set the resolution to 1024x1024, and click "Save" at the bottom right.