GUI MQTT Client for esp-idf.
I used this component.
This component can communicate directly with the browser.
There is an example of using the component here. It's a great job.

I use this index.html.
I use this open source framework.

ESP-IDF V4.4/V5.x.
ESP-IDF V5.0 is required when using ESP32C2.
ESP-IDF V5.1 is required when using ESP32C6.

git clone https://github.com/nopnop2002/esp-idf-mqtt-client
cd esp-idf-mqtt-client
git clone https://github.com/Molorius/esp32-websocket components/websocket
idf.py menuconfig
idf.py flash monitor

You can use the MDNS hostname instead of the IP address.

• esp-idf V4.3 or earlier
  You will need to manually change the mDNS strict mode according to this instruction.
• esp-idf V4.4 or later
  If you set CONFIG_MDNS_STRICT_MODE = y in sdkconfig.default, the firmware will be built with MDNS_STRICT_MODE = 1.

• Open browser.
• Enter the esp32 address in your browser's address bar.
  You can use the mDNS hostname instead of the IP address.
  Default mDNS name is esp32-server.local.
• Enter Host & port.
  You can specify the mDNS host name like mqtt-broker.local for the host name.
  You can use broker.emqx.io as public broker.
  Press Connect button.
• Press Subscribe button.
• Enter the payload and press the Send button.

You can publish new topic using mqtt_pub.sh.

• Open terminal.
• Start mqtt_pub.sh.

https://github.com/nopnop2002/esp-idf-mqtt-image-client