Manus JS: Trợ lý Nghiên cứu Web Thông minh Được Hỗ Trợ bởi AI

14.4k 2 năm trước

Mục lục

Follow source code tại đây!!!

Category	Badge Description	Badge
Main Stats	Stars
	Forks
	Contributors
	Pull Requests
	Last Commit
	Monthly Commits
Code Stats	Top Language
	Languages Count
	Code Size

Hế lô các anh, các chị, các quý bạn và các vị. Em là Dương, sinh năm 2004, hiện đang là một Fullstack developer. Em có niềm đam mê cháy bỏng tìm hiểu các kiến thức mới, đặc biệt AI-agent(thực ra vì khuôn khổ bài nên em nói zậy). Em có được biết 1 con siêu mạnh tên là Manus. Tuy nhiên vì không có Invite key mà hứng quá. Nên em có tự code ra 1 con riêng. Dựa theo các video demo của nó. Nôm na là em clone lại nó đóa. Thì như mọi ngừi đã bít, trong thời đại bùng nổ thông tin số, việc thu thập và xử lý dữ liệu từ nhiều nguồn web trở nên vô cùng phức tạp và tốn thời gian. Manus JS ra đời như một giải pháp thông minh, mang đến khả năng tự động hóa quá trình nghiên cứu web với sự hỗ trợ của các mô hình AI tiên tiến. Okey. Sản phẩm này không phải là thuốc, nhưng nhớ đọc kỹ hướng dẫn trước khi sử dụng haaaa

Hướng dẫn sử dụng

Clone repo

git clone https://github.com/duongnguyen321/manus-js.git

Cài đặt các gói liên quan. Mình sử dụng Bun để chạy, nên các các bạn cũng có thể thử tại đây nha

bun install

Cài đặt các service cần thiết

Cài Google chrome Mặc dù mình thích sử dụng Edge và Safari hơn. Nhưng vẫn phải cài để sử dụng browser tools research ạ <3

Mình sử dụng Google chrome như một real browser giúp bypass qua các lớp bảo mật, await DOM sau đó mới lấy thông tin trong trang web. Giúp cho thông tin lấy được chính xác hơn và đầy đủ hơn.

import { sleep } from 'bun';
import PUP_CONFIG from '../../configs/puppeteer.js';
import { connect } from 'puppeteer-real-browser';
import chalk from 'chalk';

export default async function createBrowser() {
	try {
		const { browser } = await connect(PUP_CONFIG);
		return browser;
	} catch (e: any) {
		console.log(chalk.red(e.message));
		await sleep(3000);
		await createBrowser();
	}
}

Kiếm API Key Vì đây chỉ là 1 con Agent. Nên vẫn cần một con AI để hoàn thiện nó. Ở đây mình có 2 options:

LangChain và OpenAI
OpenRouter và các model trên OpenRouter Cần phải tạo 1 file .env, vì vậy các bạn chạy lệnh sau nha: Sau đó nhớ thay đổi thông tin API Key trong env nhó

cp .env.example .env

Ví dụ về chọn OpenAI

  ❯ start
  $ bun run index.ts

  Available AI Providers:
  1. OpenAI(LangChain)
  2. OpenRouter
  Select an AI provider (1, 2) [Default: 1]:
  >
  You selected: OpenAI(LangChain)
  Initializing AI agent using openai...
  Initializing OpenAI agent...

Ví dụ về chọn OpenRouter

  ❯ start
  $ bun run index.ts

  Available AI Providers:
  1. OpenAI(LangChain)
  2. OpenRouter
  Select an AI provider (1, 2) [Default: 1]:
  > 2
  You selected: OpenRouter
  Initializing AI agent using openrouter...
  Initializing OpenRouter agent...

Kiếm API key ở đâu?

Đối với OpenRouter, có thể lên trang web openrouter.ai và đăng ký tài khoản, tạo API Key Với OpenRouter có thể sử dụng model: google/gemini-2.0-flash-thinking-exp:free vì đây là một model ngon và free Đối với OpenAI, có thể lên trang web platform.openai.com đăng ký tài khoản và tạo API Key. Với OpenAI bạn cần nạp tiền chứ không có bản free

Sử dụng

Hãy chạy thử file test trước xem ô kê la không đã nhó. Mở file /src/test.ts trong dự án, sửa câu hỏi trong phần executor.run sau đó chạy lệnh dưới đây:

bun run test

Oke nếu ô kê la thì chạy start và tận hưởng thoiii

bun start

Flow running

Chọn provider: Khi chọn provider cần thiết, sẽ init function và đợi câu hỏi của người dùng.

/index.ts

Phân tích task: Sử dụng 1 câu hỏi đầu tiên giúp tách thành các task nhỏ lẻ, yêu cầu research nếu cần thiết

Phần: Analyzing task and creating research plan ở 2 file initializeAgent.ts hoặc initializeAgentLangChain.ts

Sử dụng browser để mở trang, tìm kiếm thông tin, lấy toàn bộ text content trong trang web sau đó tóm tắt và gom vào thành một đoạn context

/src/agent/tools/performResearch.ts và /src/agent/tools/browserTools.ts Nếu BROWSER_LIMIT lớn hơn hoặc bằng 1, sẽ mở thêm 1 đường dẫn internal ở trong mỗi trang được mở. Giúp thông tin clear hơn.

Tóm tắt thông tin, ghép với planning ở (2), phân tích và trả về response

Phần: Synthesizing research findings… và 5. Generate final response ở 2 file initializeAgent.ts hoặc initializeAgentLangChain.ts

Planning

Agent Click, Research,… trong 1 trang web thay vì chỉ crawl và tóm tắt trang web.

Cảm ơn các bạn đã đọc!!!

Cảm ơn các bạn đã đọc nhoaaa, các bạn dùng thử, và phát triển thêm cùng mình nhoaaaa <3 À còn nữa, nếu có lỗi gì hay hong sử dụng được thì comment giúp mình nhó aaaaa <3