Modern LuCI Plugin Development Solution: AI Agent Integrated with Playwright and Docker for Fully Automated Development

OpenWrt 的 LuCI 插件开发一直存在环境搭建复杂、UI 调试效率低、跨平台编译繁琐等问题，导致开发周期极长。

最近发现 GitHub Copilot 可以预装测试环境软件包，更改copilot-instrument.md来实现自定义agent行为，于是尝试将其与 Playwright 和 Docker 结合，打造了一套现代化的 LuCI 插件开发方案。

该方案集成 AI 辅助代码生成（playwright docker）、自动化 UI 测试和全自动 CI/CD 构建发布流水线，大幅提升开发效率

已经成功运用于多个 LuCI 插件项目中，如 luci-app-2fa 和 luci-app-tailscale-community。

AI 辅助开发：让 Copilot 理解 OpenWrt

在编写 LuCI 后端代码（如 ucode 或 Lua）时，AI 生成内容容易出现理解偏差。通过在项目目录下配置 copilot-instructions.md，可以为 AI 预设一套开发规范。

这份指令集包括：

  • 全自动调试指令：告诉 AI 如何在 Docker 容器中编译、部署和测试插件。
  • 服务启动顺序：明确 ubusd、procd、rpcd、uhttpd 的依赖关系，避免页面报错。
  • 路径映射：帮助 AI 理解源码与 OpenWrt 文件系统（如 /www/luci-static）的对应关系。
  • 开发规范：定义代码风格与openwrt/luci类似、注释要求和最佳实践。

自动化 UI 测试：Playwright + Docker

为了确保插件在不同 OpenWrt 版本下的 UI 渲染一致，引入 Playwright 进行端到端测试。通过 Docker 容器模拟完整的 LuCI 环境，Agent 可自动登录、截图并验证页面效果，大幅减少手动测试时间。

Login Page 2FA Verification Invalid OTP
login 2fa error
来源自 luci-app-2fa #3

相关配置可在 copilot-instructions.md 中定义，适用于如 luci-app-tailscale-community 这类复杂应用。

全自动 CI/CD 构建流水线

本项目模板内置 GitHub Actions 配置文件 build.yml，实现：

  • 多格式并行编译：同时支持 IPK 和 APK 格式。
  • 动态版本管理：基于 Git Tag 或 Commit Hash 自动注入 PKG_VERSION。
  • 自动签名与托管：构建后自动使用 usign 签名，并部署至 GitHub Pages，生成可直接用于 OpenWrt 的 OPKG 软件源。

快速开始

你可以直接使用本模板快速创建项目：

👉 Tokisaki-Galaxy/openwrt-template

核心配置文件：

  • 构建逻辑：build.yml
  • AI 指令集：copilot-instructions.md
  • 测试 Mock：handlers.js

通过结合 AI Agent 的生成能力与端到端测试的验证能力，LuCI 插件的开发协作与分发效率将显著提升。欢迎在 GitHub Discussion 参与交流。

案例

PR 示例

技术细节

  • SDK 环境：基于 openwrt/rootfs:x86-64-23.05.5 镜像
  • 主要工具：ucode、ubus、rpcd、Playwright

OpenWrt LuCI plugin development has long been plagued by issues such as complex environment setup, inefficient UI debugging, and cumbersome cross-platform compilation, leading to extremely long development cycles.

I recently discovered that GitHub Copilot can pre-install test environment software packages. By modifying copilot-instrument.md, you can define custom agent behaviors. I tried integrating it with Playwright and Docker to create a modern LuCI plugin development solution.

This solution integrates AI-assisted code generation (playwright docker), automated UI testing, and a fully automated CI/CD build and release pipeline, significantly improving development efficiency.

It has been successfully applied to multiple LuCI plugin projects, such as luci-app-2fa and luci-app-tailscale-community.

AI-Assisted Development: Helping Copilot Understand OpenWrt

When writing LuCI backend code (such as ucode or Lua), AI-generated content can often be misunderstood. By configuring copilot-instructions.md in the project directory, you can predefine a set of development guidelines for the AI.

This instruction set includes:

  • Fully automated debugging commands: Instructing the AI on how to compile, deploy, and test the plugin within a Docker container.
  • Service startup order: Clarifying the dependencies of ubusd, procd, rpcd, and uhttpd to avoid page errors.
  • Path mapping: Helping the AI understand the correspondence between source code and the OpenWrt filesystem (such as /www/luci-static).
  • Development standards: Defining code style consistent with openwrt/luci, comment requirements, and best practices.

Automated UI Testing: Playwright + Docker

To ensure consistent UI rendering of plugins across different OpenWrt versions, Playwright is introduced for end-to-end testing. Using a Docker container to simulate a complete LuCI environment, the Agent can automatically log in, take screenshots, and verify page rendering, significantly reducing manual testing time.

Login Page 2FA Verification Invalid OTP
login 2fa error
Source from luci-app-2fa #3

Related configurations can be defined in copilot-instructions.md and are suitable for complex applications like luci-app-tailscale-community.

Fully Automated CI/CD Build Pipeline

This project template includes built-in GitHub Actions configuration file build.yml, enabling:

  • Multi-format parallel compilation: Simultaneously supporting IPK and APK formats.
  • Dynamic version management: Automatically injecting PKG_VERSION based on Git Tag or Commit Hash.
  • Automatic signing and hosting: After building, automatically sign using usign and deploy to GitHub Pages, generating an OPKG software repository directly usable for OpenWrt.

Quick Start

You can use this template to quickly create a project:

👉 Tokisaki-Galaxy/openwrt-template

Core configuration files:

  • Build logic: build.yml
  • AI instruction set: copilot-instructions.md
  • Test Mock: handlers.js

By combining the generation capabilities of AI Agents with the validation capabilities of end-to-end testing, the efficiency of LuCI plugin development, collaboration, and distribution will be significantly improved. You are welcome to join the discussion on GitHub Discussion.

Case Studies

PR Examples

Technical Details

  • SDK Environment: Based on the openwrt/rootfs:x86-64-23.05.5 image
  • Main Tools: ucode, ubus, rpcd, Playwright
openwrt
#openwrt #luci #github-copilot #playwright #agent
Modern LuCI Plugin Development Solution: AI Agent Integrated with Playwright and Docker for Fully Automated Development
https://tokisaki.top/blog/openwrt-template/
作者
Tokisaki Galaxy
发布于
2026年1月29日
许可协议