Skip to content

Transform any webpage into an interactive knowledge base! Chat with your current page and get instant, intelligent responses about its content.

Notifications You must be signed in to change notification settings

Coooder-Crypto/web-assistant-frontend

Repository files navigation

🤖 Web Assistant - Your Smart Webpage Companion

Transform any webpage into an interactive knowledge base! Chat with your current page and get instant, intelligent responses about its content.

✨ Features

  • 🎯 Smart Context Understanding: Automatically captures and understands the content of your current webpage
  • 💬 Natural Conversation: Chat naturally about the page content with AI-powered responses
  • 🎨 Beautiful UI: Clean, modern interface with smooth animations and markdown support
  • 🌙 Dark Mode Support: Easy on your eyes during those late-night browsing sessions

🚀 Getting Started

Loading the Extension

  1. Open Chrome/Edge and navigate to chrome://extensions//edge://extensions/
  2. Enable "Developer mode"
  3. Click "Load unpacked" and select the dist folder from the project directory

🎮 Usage

  1. Visit any webpage
  2. click the extension icon to open the chat panel
  3. Start asking questions about the page content!

🛠️ Development

Prerequisites

  • Node.js (v16 or higher)
  • pnpm (v7 or higher)

Installation

# Clone the repository
git clone https://github.com/Coooder-Crypto/web-assistant-frontend.git

# Navigate to the project directory
cd web-assistant-frontend

# Install dependencies
pnpm install

# Build the extension
pnpm run build

# Build for production
pnpm run build

# Start development server
pnpm run dev

🔌 API Support

Currently supports:

  • Deepseek API
  • OpenAI API

🤝 Contributing

We welcome contributions! Here are some areas you can help with:

  • Integrate more AI APIs
  • Add more webpage content readers for different websites
  • Create and optimize prompts for better interactions
  • Performance optimization (code splitting, caching strategies, etc.)
  • UI/UX improvements (styles, animations, responsive design)
  • Bug fixes and feature enhancements

As a frontend novice, I would greatly appreciate guidance and suggestions from experienced developers. Your expertise and insights are invaluable to making this project better!

Please feel free to submit pull requests or open issues for discussion.


🤖 网页智聊 - 你的智能网页助手

让任何网页都变成可交互的知识库!与当前页面进行智能对话,获取即时解答。

✨ 特色功能

  • 🎯 智能上下文理解:自动捕获并理解当前网页的内容
  • 💬 自然对话:通过AI支持,实现与页面内容的自然交谈
  • 🎨 精美界面:简洁现代的界面设计,流畅的动画效果和Markdown支持
  • 🌙 深色模式:让你的深夜浏览更加护眼

🚀 开始使用

加载扩展

  1. 打开Chrome浏览器/Edge浏览器,访问 chrome://extensions//edge://extensions/
  2. 启用"开发者模式"
  3. 点击"加载已解压的扩展程序",选择项目目录中的 dist 文件夹

🎮 使用方法

  1. 访问任意网页
  2. 点击扩展图标打开聊天面板
  3. 开始询问关于页面内容的问题吧!

🛠️ 开发相关

环境要求

  • Node.js(v16或更高版本)
  • pnpm(v7或更高版本)

安装步骤

# 克隆仓库
git clone https://github.com/Coooder-Crypto/web-assistant-frontend.git

# 进入项目目录
cd web-assistant-frontend

# 安装依赖
pnpm install

# 构建扩展
pnpm run build

# 生产环境构建
pnpm run build

# 启动开发服务器
pnpm run dev

🔌 API 支持

目前支持:

  • Deepseek API
  • OpenAI API

🤝 参与贡献

我们欢迎各种形式的贡献!以下是一些你可以参与的方向:

  • 接入更多的 AI API
  • 为不同的网站添加更多的网页内容读取适配
  • 创建和优化 prompt 以提供更好的交互体验
  • 性能优化(代码分割、缓存策略等)
  • UI/UX 改进(样式、动画、响应式设计)
  • 修复 bug 和功能增强

作为一个前端菜鸟,非常希望能得到经验丰富的开发者的指导和建议。您的专业知识和见解对提升这个项目的质量非常宝贵!

欢迎提交 Pull Request 或开启 Issue 进行讨论。

🎉 玩得开心!

记得给项目点个星标⭐️,如果你觉得它很有用的话!

About

Transform any webpage into an interactive knowledge base! Chat with your current page and get instant, intelligent responses about its content.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published