LuCI plugin development for OpenWrt has always suffered from complex environment setup, inefficient UI debugging, and tedious cross-platform compilation, resulting in extremely long development cycles.
Recently I discovered that GitHub Copilot can preinstall testing environment packages and allow customizing agent behavior by changing copilot-instrument.md, so I tried combining it with Playwright and Docker to build a modern LuCI plugin development approach.
This approach integrates AI-assisted code generation (playwright docker), automated UI testing, and a fully automated CI/CD build-and-release pipeline, greatly boosting development efficiency.
It has already been successfully applied to several LuCI plugin projects, such as luci-app-2fa and luci-app-tailscale-community.
AI-Assisted Development: Making Copilot Understand OpenWrt
When writing LuCI backend code (such as ucode or Lua), the content generated by AI is prone to misunderstandings. By configuring copilot-instructions.md in the project directory, you can preset a set of development guidelines for the AI.
This instruction set includes:
- Fully automated debugging instructions: tell the AI how to compile, deploy, and test the plugin in Docker containers.
- Service startup order: clarify the dependency relationships among
ubusd,procd,rpcd, anduhttpdto avoid page errors. - Path mapping: help the AI understand the correspondence between the source code and the OpenWrt filesystem (such as
/www/luci-static). - Development guidelines: define a code style similar to 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. By simulating a complete LuCI environment in Docker containers, the Agent can automatically log in, take screenshots, and verify page effects, greatly reducing manual testing time.
| Login Page | 2FA Verification | Invalid OTP |
|---|---|---|
| Source: luci-app-2fa #3 |
The relevant configuration can be defined in copilot-instructions.md and applies to complex applications such as luci-app-tailscale-community.
Fully Automated CI/CD Build Pipeline
This project template includes the GitHub Actions configuration file build.yml, which implements:
- Multi-format parallel compilation: supports both IPK and APK formats at the same time.
- Dynamic version management: automatically injects
PKG_VERSIONbased on Git Tags or Commit Hashes. - Automatic signing and hosting: after building, automatically signs with
usignand deploys to GitHub Pages, generating an OPKG software repository that can be used directly for OpenWrt.
Quick Start
You can directly 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 mocks:
handlers.js
By combining the AI Agent’s generation capability with the verification capability of end-to-end testing, the collaboration and distribution efficiency of LuCI plugin development will improve significantly. Feel free to join the discussion on GitHub Discussions.
Case Studies
Example PRs
Technical Details
- SDK environment: based on the
openwrt/rootfs:x86-64-23.05.5image - Main tools: ucode, ubus, rpcd, Playwright