Home Assistant - Magic Mirror - Voice Assistants integration

Last time I checked, there was a way to send sensor data from HA to MM, but it didn’t look very nice and it wasn’t very useful (for me).
No seamless integration between the two platforms as far as I know…at least not very reliable…

Since I like to overcomplicate things I found a way to completely integrate Home Assistant and Magic Mirror for my home control hub and I also added voice control to this…because why not ?

WARNING: HEY GOOGLE COMMANDS: [ What day is it? | Turn ON office lights | Lights off ]


  • First voice command just activates a module (Calendar, above the clock) that is otherwise hidden and also provides the normal answer from the assistant; This can also be done manually from Home Assistant.
  • The second and third screens (home climate control and general UI) are activated manually from HA, (from a different device) because I didn’t want to abuse voice commands and turn whatever climate devices on or off in your homes.
  • The third and fourth (voice) commands are supposed to show the time between voice command (Google Assistant) to Home Assistant (that manages the lights through Zigbee2mqtt) and the fact that is showing changing the room light status in realtime on the mirror interface.

As long as you install HomeAssistant Core (python virtual env, not hassio or other method, so you can still have a fully operational Linux system) you can run Magic Mirror without problems on the same Pi

I have a full integration between HA and MM. I can fully control the mirror from HA and I can display HA on MM, but not by using a single dedicated module/integration.

The HA → MM control is quite important, because this makes this integration really powerful. By using this you will be able to fully control your MM instance from literally anything: Home Assistant, voice assistants (Google Assistant, Alexa, etc.), Web App, MMM-RC API . . .whatever

This is achieved by MMM-Remote-Control

On the MM side you need to add to your IP whitelist.

	port: 8080,
	ipWhitelist: ["", "::ffff:", "::1", "::ffff:", ""],

and simply add the module to your config

   		 module: 'MMM-Remote-Control'			

On the HA side, you can simply define switches (or scripts) to control actions on the MM.


  - platform: command_line
        friendly_name: CLOCK 
        command_on: 'curl -k ""'
        command_off: 'curl -k ""'
        command_state: ""
        value_template: '{{ value == "0" }}'

        friendly_name: REFRESH MIRROR
        # command_on: 'curl -k ""'
        command_on: 'sudo systemctl restart blackmirror.service'
        command_off: ''
        command_state: "0"

Here comes the interesting part - displaying HA → MM

For this I’m using a combination of MMM-pages and MMM-iFrame but for my integration i needed a slightly modified version of iFrame so I can switch between URLs - You can find the CODE below, credit goes to @pooyasa


        // Default module config.
        defaults: {
        frameWidth: "300",
        updateInterval: 60 * 60 * 1000,
        url:  ["", "", "", "", "", "", "", ],
        scrolling: "no"
            start: function () {
                    self = this;
                    var count = 0;
        resume: function() {
            return this.getDom();
        getStyles: function() {
                    return [
            // Override dom generator.
        getDom: function() {
                    var { width, height } = this.config;
                    var wrapper = document.createElement("div");
                    wrapper.className = "mmm-iframe"
                    wrapper.style.width = `${this.config.frameWidth}px`;
                    var html = `
                            <div class="mmm-iframe-wrapper" style="padding-top: ${100 / (width / height)}%;">`;
                    wrapper.insertAdjacentHTML("afterbegin", html);
            return wrapper;
        notificationReceived: function(notification, payload,sender) {
            if (notification == "pooya") {  

On the MM side, integration is quite straightforward.

		{		// https://github.com/edward-shen/MMM-pages
			module: 'MMM-pages',  
			config: {
						["currentweather", "updatenotification", "compliments", "newsfeed", "calendar_monthly", "clock", "weatherforecast", "MMM-PushBulletNotifications", "MMM-SimpleLogo", "MMM-Parcel", "mmm-systemtemperature", "MMM-Snow",],
						["MMM-iFrame", "clock", "currentweather",]

					//excludes: ["updatenotification"],

		{		// https://github.com/alberttwong/MMM-iFrame  ---  MODIFIED CODE FOR PAGE SWITCHING
			module: 'MMM-iFrame',
			position: 'center',
			config: {
					url: ["", "", "", "", "", "", "",],  // ["URL1", "URL2"] 
					updateInterval: 60 * 60 * 1000,
					width: "1920",
					height: "1080", 
					frameWidth: "1800" 


What I’m doing here is very simple. I’m using MMM-Pages to define 2 different pages/interfaces for my mirror; First one is basically the mirror with all the modules; the second page contains the (modified) MMM-iFrame that displays the Home Assitant interface.

As you can see in the code above, the list of URLs defined in the MMM-iFrame allow me to switch between HomeAssistant tabs (you can use any HA tab, all or just one - if you only want to display a single page, you don’t need the modified version)

To change to the ‘page’ that has the HomeAssistant iFrame a simple command_line switch in HA could be used:

- platform: command_line
        friendly_name: PAGE
        command_on: 'curl -k ""'
        command_off: 'curl -k ""'
        command_state: ""
        value_template: '{{ value == "0" }}'

Voice assistant integration comes in the form of routines as long as you have the Home Assistant entities (reasonable for mirror control) exposed to Home Assistant Cloud - DOCUMENTATION

Example for exposing entity to Google Assistant:

   - switch.mirror_page  
    name: "INTERFACE"
    room: MIRROR

Example for exposing entity to Alexa:

   - switch.mirror_page  
    name: "INTERFACE"
    display_categories: SWITCH

The routine can be created in the Google Home app, Alexa, etc.

Here is an Example for Google Home:

This is how the “What day is it” routine looks like

One last step…

To make things look ‘propper’ on the mirror I have created a special theme that you can find below

theme.yaml - blackmirror:

splitter_card: “#3f6388
splitter_background: “white”
# Main colors
primary-color: “BLACK” # Header
accent-color: “#1c91ff” # Accent color
dark-primary-color: “var(–primary-color)” # Hyperlinks
light-primary-color: “var(–primary-color)” # Horizontal line in about
# Text colors
primary-text-color: “WHITE” # Primary text colour, here is referencing dark-primary-color
text-primary-color: “var(–primary-text-color)” # Primary text colour
secondary-text-color: “#999999” # For secondary titles in more info boxes etc.
disabled-text-color: “var(–primary-text-color)” # Disabled text colour
label-badge-border-color: “var(–primary-color)” # Label badge border, just a reference value
# Background colors
primary-background-color: “var(–primary-color)” # Settings background
secondary-background-color: “#222222” # Main card UI background
divider-color: “var(–primary-color)” # Divider
# Table rows
table-row-background-color: “var(–primary-color)” # Table row
table-row-alternative-background-color: “var(–primary-color)” # Table row alternative
# Nav Menu
paper-listbox-color: “white” # Navigation menu selection hoover
paper-listbox-background-color: “#020202” # Navigation menu background
paper-grey-50: “var(–primary-text-color)”
paper-grey-200: “#414A59” # Navigation menu selection
sidebar-icon-color: “var(–primary-color)”
sidebar-background-color: “var(–primary-color)”
pp-header-text-color: “var(–primary-color)”
# Paper card
paper-card-header-color: “grey” # Card header text colour
card-background-color: “#020202” # Card background colour
paper-dialog-background-color: “#1b1b1b” # Card dialog background colour
paper-item-icon-color: “#666666” # Icon color
paper-item-icon-active-color: “var(–accent-color)” # Icon color active
paper-item-icon_-color: “var(–primary-color)”
-_background-color: “#434954” # Popup item select
paper-tabs-selection-bar-color: “var(–primary-color)”
app-header-text-color: “var(–primary-color)”
# Labels
label-badge-red: “var(–accent-color)” # References the brand colour label badge border
label-badge-text-color: “var(–primary-text-color)” # Now same as label badge border but that"s a matter of taste
label-badge-background-color: “#2E333A” # Same, but can also be set to transparent here
# Switches
paper-toggle-button-checked-button-color: “var(–accent-color)”
paper-toggle-button-checked-bar-color: “var(–accent-color)”
paper-toggle-button-checked-ink-color: “var(–accent-color)”
paper-toggle-button-unchecked-button-color: “#666666
paper-toggle-button-unchecked-bar-color: “var(–disabled-text-color)”
paper-toggle-button-unchecked-ink-color: “var(–disabled-text-color)”
# Sliders
paper-slider-knob-color: “var(–accent-color)”
paper-slider-knob-start-color: “var(–accent-color)”
paper-slider-pin-color: “var(–accent-color)”
paper-slider-active-color: “var(–accent-color)”
paper-slider-container-color: “linear-gradient(var(–primary-background-color), var(–secondary-background-color)) no-repeat”
paper-slider-secondary-color: “var(–secondary-background-color)”
paper-slider-disabled-active-color: “var(–disabled-text-color)”
paper-slider-disabled-secondary-color: “var(–disabled-text-color)”
# Google colors
google-red-500: “#E45E65
google-green-500: “#39E949

card-background-color: “var(–splitter_card)”
primary-background-color: “var(–splitter_background)”
accent-color: “#1c91ff

Obviously, you need to copy this new theme to your theme.yaml file, but most important, when you will use the iFrame module for the first time, HomeAssistant will ask you to log in; after doing so go to your profile page and set the theme to blackmirror, ON THE MIRROR. The theme is set locally, on each device, so it will not change it across other devices.

Have fun!


This looks amazing!

I am considering building a large home control screen in the kitchen using this device (I can get one really cheap):

You think that would work well with this application?

I googled the Samsung Flip and it seems it has a web browser, so it will work, but unless you get it cheaper than an old (maybe non-smart) TV of the same size it would be a bit overkill as a control center.

Also, it seems it has HDMI OUT only…I believe that any screen you chose should have HDMI IN functionality for a smart home control center so you can link a RPI or any SBC you like to it and have a standalone system

But to answer shortly, since i don’t know what oter applications you have for that board, it will work in the web browser

Very cool! I wrote the MMM-Remote-Control module’s REST API a couple years ago with the hope of expanding more control of my MagicMirror and better integrating it with my home automation. I got sucked in on Home Assistant and never got the time to go back and really implement something like this. It’s awesome to see that you were able to bring the two together!

Also, for your multiple pages, an alternative would be MMM-Carousel, with most modules on one slide and the iframe on a second.


In this case, I need to thank you for your work; that module is absolutely amazing and it’s basically the base for every automation I have regarding the mirror.

I remember MMM-Carousel but I can’t remember why I didn’t used it… I think I had some problems with it but it was some time ago and I can’t remember.

This is fantastic!
My problem is that I have installed the hassio version on raspberry and switching to core would mean a lot of work. Can I run the mirror on another raspberry and have the same integration?

Sure. No problem. Just use the IP of the PI with the mirror when needed and it will work

I wish you would make a proper integration to HA :slight_smile:

1 Like

What are you looking for in a full integration?

(no snark/sarcasm here, genuinely curious about specifics you’d be looking to have included to justify it)

For me there are too many configurations and Modules available for a MM to try and support an integration on the HA side based on what standards HA requires.

I only use a couple Restful Switches to control showing modules and display power and use the MMM-MQTT bridge for translating more specific commands to MM module notifications.

Hi @shbatm
I did have MMM-MQTT Bridge set up, I even wrote the guide for it on the HA forum, but after the upgrade to 2.18 it failed for me. I’ve done a complete reinstall of MM now, and I’ve managed to get most modules running, but haven’t yet tried with MQTTbridge.
I did however find an integration :slight_smile: ha-magicmirror
And that works for most parts. It doesn’t work if ‘ScreenCast’ is activated, so I made a bug report for it.
It currently mostly handles monitor on / off, which is what I need anyways.
I’m not a coder, in any way, so I’m not much use in finding out why ScreenCast makes the integration fail, maybe you know? :wink:

I’ve written several modules for MM… MMM-NOAA3 is the most popular that I’ve written. I too got into HA from another MM user who was working on Voice Commander for MM but it’s hard running on a PI it’s limited… we did get it working but it was sluggish, etc.

So here I am and I am running MMM-HomeAssistant-Sensors to show sensors on my bathrooms MagicMirror. I’m sure having a MM integration would be interesting for some and I would probably play with it but at the end of the day there isn’t anything on MM I cannot get on HA…

HA is awesome [HUGE learning curve and after a year I’m finally ‘getting it’] whereas MM is pretty easy. By trade I’m not a coder either and still managed to write a lot of modules for MM. [CSS is NOT my strong suit LOL].

I do love being able to port sensors over to MM but as I said not really sure I’d be serious about having MM on my HA install. I’ve never run HA on a PI I’m using an Intel NUC and yes you can run both on it but for MM I’m using a PI4… not asking it to do much so it works great. Wasn’t really interested in having it talk to me or take commands honestly.

I have been trying to figure out how to write things for HA I have my own weather stations and would love to write something like you see in dark sky ‘module’ for HA… I’m working on it.

I am however really interested in having HA use voice commands as like I said I’m running it on a NUC so it has far more power and space. So to that end Thank you for what you’ve done!! It’s exciting and excellent work!


I know it’s been more than a year since this thread was active, but do you see Home Assistant’s Voice Assistant being able to accomplish what you are looking for? I too am interested. I’m new to HA but I’m learning and I am a developer by profession.

To be honest, I haven’t tried HA Voice Assistant yet because I don’t currently have the time to play with new integrations, but since it’s native to HA and it has default access to every function of your smart home it should work just fine and it will probably be easier to integrate than my solution.