How to create a custom card for an integration?

I am mew to homeassistent and I’m wondering if there is a way of creating a costum card for a costum integration.

I looked into “Extending the WebSocket API”, because it is the only part of the frontent documentation where components are mentioned.

I’m a little overwhelmed by it and was wondering if it is the right way.
If so I’m wondering if there is a little less intimitating documentation of how to use it or a simple example code to figure out how it works.

Thanks in advance,
Florian

HA on one side provides a state machine for storing values from your integrations.
On the other side it provides a GUI for showing those values in a graphical way.
The integration and the GUI is not directly linked, but go through the state machine, so you make an integration and get the values into HA and then you can decide to make a GUI element that use those values for a graphical view. Others can also use those values to make their interpretation of the graphical view and if your GUI element can be used for other situations in HA, then it might be used for that too.

I looked into it, and from my perspective, you can only store entities with their states.
The thing I want to create is a costume card that shows the power price development of the next 24 hours from Tibber in a graph. It should also be able to activate devices for x hours in a time frame, when the costs will be the lowest.
For this, I will need to send a list of the prices with their time stamps to the frontend and a time/date selector to send data back to the backend.
The sensor entity (the only one I find with the option to display as a graph), if I unterstand it correctly, only accepts a current price, which is not usable. Is it possible to create costume entities, or what is the intended way of doing such a thing?

You are trying to reinvent a home automation system. You do not use HA for what it is intended for.

You should make your integration import the Tibber values in a sensor.
Then the user can utilize the builtin automation feature of HA to make the intelligence they want based on that Tibber information.
You might think that the right thing is to activate/deactivate a device based on those Tibber values, but other users might have other rules they want to incorporate, like what if they need the power for other stuff at that time, or they need a device powered before that time you choose.
You can make a card to show the graph if you want, but others have already made cards for such things, like the Apex Charts, and there is no need to reinvent the wheel, unless you can do it better.

there’s a guide in the developers documentation that covers how to make custom cards