AI Usage Tracking Tool for No Code Developers - Helicone AI

Integrating Helicone AI with Your Bubble App

Tracking AI usage, cost and performance in your no code app has been a pain until now. In this Bubble tutorial video, I'm going to show you how easy it is to integrate Helicone AI and swap it in with barely any changes into your existing Bubble app so that you get access within just 30 seconds to a minute to an amazingly helpful dashboard like this where you can track all of your requests, you can track them by user, you can track them by the model that is used. You can instantly get an idea of cost and usage of AI models, whether that is OpenAI or Anthropic's Claude all the way through to Grok. They've basically got them all. And so I'm going to demo all of those.

Setting Up Helicone in Your Bubble App

Well, not all of them. I'm going to demo how you can add this into your Bubble app in this video. But before I do that, if you're watching this video, it's because you have an idea and you're trying to bring it to reality with no code. And if you want to accelerate that journey, then click the link down in the description to head over to our website, planetnocode.com, to find out more. So here is my empty Helicone dashboard, and I've also opened up the documentation and this is so straightforward.

Implementing Helicone with Claude

Let me show you what I've got so far. So I've got an app here, let me just refresh it. And I'm not even doing a complex conversation here. I'm just doing a, sending a request over to Claude and getting a response back. So we'll say hello and my workflow sends the request, I save it or store as a custom state, and I get the response back here.

So how easy is it to track this with Helicone? Well, I'm going to go into the Helicone documentation and go down to Anthropic and look at the Crl. Okay. And now it's telling me what I need to do. And you'll see that this is remarkably similar to what I've already got.

Configuring API Settings

If I go into my API here, I currently have this set up with Claude, and I'm just going to relabel it. So I'm going to say that this is Helicone, I'll say hello, cone with Claude, and I need to have my x API key. Okay, here is, here is one frustration. Shared headers in Bubble can't be marked as private. And if we go over into the API documentation, we actually see that there are a couple of values that we want to keep private.

We want to make the Helicone auth key private and we want to make the API key private. So this is going to add, I'm afraid 5 seconds to your development time because we need to add in not a shared header but add in a header here. And so I'm going to paste in the key there. I will of course be deleting this key before publishing, making sure that this is marked as private because in the top I'm going to put my Helicone key. So if I go back into here and then go developer and I'll generate a key and of course I'll be deleting this key also I'll just call it Bubble app demo create key, copy it and paste in there.

Finalizing API Configuration

And then how does it want me to present it? It wants bearer and it's saying auth in front. So copy that.

Okay. And there's just a few other bits. It wants me to say user agent. And then I think that is basically it. So I can add in the user agent into the shared.

Okay. And the basically the most important bit here because I've in just the last half hour integrated Helicone into some internal apps and some experimental stuff that we're building which are using Claude tools and function calling that have got huge prompts, system, you know, big contact windows. And the point is that this has not changed and the output of from Bubble's perspective will not change. I won't have to update anything else in my Bubble app, at least that's what I found with my testing. So I think that's all in order now.

Testing the Integration

And so I'm going to just initialize to test that. That works great. And we get the response back. So now immediately if I go into my Helicone dashboard we should see maybe it takes a few seconds if I go into requests. No app data found.

Oh, it was instant when I tried it last. Okay, am I missing something?

Yes, yes I am missing something. Can you tell what it is? Well, I'm going to tell you. I'm still sending this to Anthropic. I actually have to send this to Helicone.

Correcting the Endpoint

So amateur. That's why it did not work. Right. Update the endpoint now. I think I've updated everything that I need updated.

Let's initialize the call. I get the response back. And now, hello. If I refresh, it should give me an instant reflection of what's gone down. There we go.

I've made one request so I can go in straight away and I can see exactly what has happened here. I can go and view the full exchange. It gives me an instant reflection of cost. There we go. It's really cheap because I'm using Haiku.

Tracking User Metrics

So what if I want to track by user? So Helicone has got a way of sending across a wide range of custom properties that you can set up, but one of them that they've set aside is user id. So I'm in the user metric section of their documentation and I'm just going to select user id and it's got to be in the header of the call. So I'm going to add it into the header of this call, make sure it's not private because it's got to be dynamic in my workflow. And then I've put the speech marks back in, but I can dive right into my workflow and do that.

So you could of course make this dynamic, you could say current user's email address, as long as you put it in speech marks, you might want to say current users email JSON safe, although maybe someone can comment down below. I don't think an email can have characters in that message with JSON. Someone else will know that. But for now we'll just say sort of testxample.com. and so now if I run my app, I'll say what is your name?

I don't know what it's going to respond back. Okay, and it says my name is Claude.

Analyzing User Data in Helicone

And then I, I can now go into my dashboard here and we've got user there. So I can go in again and I can now go in and click on the user, or rather I go here for users and here's my user and it's going to show me how much they've cost me. It's going to show me how much they've used it. I can go down and break down the individual calls that they do. But I'm going to show you one final really handy thing, which is that your Bubble app of course, has at least two different versions.

Segmenting Data by App Version

It's got your test version and your live version. So let me show how we can use custom properties so that you can further segment data in your Helicone dashboard by version. So to add in custom properties, we're back in the Helicone documentation. And all we need to do is define another header in the API call that follows this naming protocol. So here's one that I've done earlier.

So here I say Helicone property version and I put in dev and then in my workflow I can have isn't live version formatted as text. So if it isn't the live version, it is the dev version. And if it is the live version. If it isn't the live version, no, it is live. And then I format a JSON text because that adds in the speech marks around it.

Finalizing and Testing Version Tracking

And so that then gives me. If I refresh here, I get version and I can add in. Okay. Right, yeah. So I had to re record this bit.

It wasn't working. Maybe I'm just going to say here, be a little bit patient with it. I've now got two version properties, so let's put them both in. I thought it wasn't working. I thought I'd made a mistake.

Oh, yeah, there we go. That's what I needed. But, yeah, it then would allow you to further segment and save filters so that you can view basically your cost for your dev version versus your live version. So, yeah, there you go. That is how you can use Helicone AI to get all of this amazing data.

Conclusion and Additional AI Integrations

It works with OpenAI. In fact, let's just go back into their documentation. Look, you got all of these, you got OpenAI, you've got a zoo, you've got alarm, you've got grok, you've even got other ones such as Firecrawl, which we've done a video on recently. All of those, you can put Helicone in the middle and it just helps you manage errors, track latency, track what you're used to doing and track your costs all in one really helpful dashboard.