Add Mealie’s “Meal of the Day” to Home Assistant

By far one of my most-used Docker images is Mealie, a self-hosted recipe manager and meal planner. Adding new recipes to Mealie is as easy as pasting a URL into the app. Mealie will automatically pull in the ingredients, cooking steps, and images. It’s truly awesome, and I use every single day.

One of the features I really like about Mealie is the ability to plan out meals in advance. We typically go grocery shopping weekly, so I plan out meals on Sunday and we go grocery shopping on Monday. As we plan out meals for the week, I add them to the Mealie meal planner.

In this guide, I’m going to show you how to add your Mealie “Meal of the Day” into Home Assistant. This will allow you, and anyone else in your family who uses Home Assistant, to see what’s cooking for dinner.

---

Mealie Meal Plan

Here’s an example weekly meal plan from Mealie. As I am writing this guide, it is May 30th, 2021. So, my “Meal of the Day” for today is Crispy Chicken Ranch Wraps.

---

Prerequisites

The first step is to setup Mealie in Docker if you haven’t already. Then, create a Mealie meal plan under the “Planner” settings. This is as easy as pasting a few URL’s into Mealie and assigning them to a particular day.

Note: You must be running Mealie v0.4.1. If you are running an older version, you should first create a Mealie backup and then recreate the container with the latest version.

---

Test “Meal of the Day” URL in Browser

Like I mentioned earlier, in v0.4.1 you can use the URI /api​/meal-plans​/today​/image?group_name=Home to directly access the image to today’s meal.

My Mealie URL is http://192.168.68.141:9925, so the full URL to today’s meal image would be http://192.168.68.141:9925/api/meal-plans/today/image?group_name=Home.

Go ahead and replace the Mealie IP and port with your own and test it out on a web browser on your local network.

If it doesn’t load correctly, you might have to check the timezone you used when creating the Mealie docker container.

---

Create Home Assistant ‘Input Boolean’

After confirming the image loads correctly, open Home Assistant. The first thing we’ll need to create is create an Input Boolean. This isn’t actually going to do anything, but we are going to use it when creating the Picture Entity card in the next step. This will act as sort of like a dummy entity.

Configuration > Helpers > Add Helper > Toggle.

Give your toggle a name, such as Meal of the Day.

This will now create an entity called input_boolean.meal_of_the_day

---

Create ‘Picture Entity’ Card

Click Add Card > Picture Entity.

Find the entity you just created.

Give it a name if you’d like, and then enter the URL to Mealie’s “Meal of the Day” (http://192.168.68.141:9925/api/meal-plans/today/image?group_name=Home) under Image Path.

You may notice that image is in black and white initially. That is because the input boolean is set to Off, as shown in the state.

To fix this, just click the middle of the image and toggle it True.

Since we’ll never need to toggle it again, and we don’t really need to see the state, turn off the Show State? in the picture entity settings. Then, just click Save.

This should now show up correctly in Lovelace!

---

Optional: Install Lovelace-Card-Mod from HACS

According to the dev, he recommends installing Lovelace-Card-Mod from HACS to prevent the images from looking distorted. I haven’t personally ran into this issue after using this Mealie-Home Assistant integration for the past few weeks, but if you do – add this to the end of your picture entity card after installing Lovelace-Card-Mod.

style:
.: |
    ha-card {
    max-height: 300px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    }

The full yaml according to the dev should look like this:

type: picture-entity
entity: sensor.mealie_todays_meal
name: Dinner Tonight
show_state: true
show_name: true
image: 'http://localhost:9000/api/meal-plans/today/image?group_name=Home'
style:
.: |
    ha-card {
    max-height: 300px !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    }

Show Meal of the Day Name (Pending)

The thing thing I haven’t been able to figure out yet is how to pull in the title of the “Meal of the Day” and get that to show on the Lovelace card. There’s definitely a way to do it as the screenshot below suggests.

If anyone reading this figures out how to do this, or wants to share their Node-Red flow, please let me know so I can test it out and update this guide.

---

Wrapping Up

Overall, I think this is a great quality-of-life improvement for my whole family. Rather than wondering what’s for dinner, everyone can simply open Home Assistant!