Consumer Portal To Build Usage DashboardsReal-time usage dashboard with OpenMeter React SDK

A tight feedback loop between customers interacting with your product and the usage reflected on their billing and usage dashboard is essential for controlling spending. The lack of instant usage feedback can lead to unexpected customer costs, overspending, and, eventually, churn. This is particularly critical in sectors like automation, AI, and APIs, where unforeseen software issues on the user's end can rapidly escalate usage and costs.

The OpenMeter Consumer Portal and Web SDK enable you to offer real-time usage dashboard for your customers, allowing them to track their consumption in real-time.

#How can OpenMeter help?

With our Consumer Portal, you can build in-app user-facing dashboards where your customers can follow their consumption in real-time, backed by OpenMeter's robust metering. We provide the authentication layer and React hooks to fetch data from OpenMeter for specific customers so you can focus on building your product.

#Getting Started

You can start using the Consumer Portal with React in three simple steps:

#1. Create a subject-specific token

Use our SDKs to create a subject-specific token on your backend and return it to your frontend app.

import { OpenMeter } from '@openmeter/sdk';
 
const openmeter = new OpenMeter({
  baseUrl: 'https://openmeter.cloud',
  token: '<API_TOKEN>', // Cloud only
});
 
const token = await openmeter.portal.createToken({
  subject: 'customer-1',
});

#2. Install the React.js Provider

Use our Web and React SDK to initialize the OpenMeter Provider with the generated token in your frontend app.

import { OpenMeterProvider } from "@openmeter/web/react";
 
const MyApp = () => {
  const [token, setToken] = React.useState(null);
 
  React.useEffect(() => {
    // You'll need an authenticated endpoint that returns the Portal Token
    fetch(`/your-backend-service/openmeter/portal`, {
      method: "POST",
    })
      .then((res) => res.json())
      .then(({ token }) => setToken(token));
  }, []);
 
  return (
    <OpenMeterProvider url="https://openmeter.cloud" token={token}>
      // ...your app
    </OpenMeterProvider>
  );
};
 
ReactDOM.render(<MyApp />, document.body);

#3. Query Usage With React Hooks

Use our React hooks to query OpenMeter.

const openmeter = useOpenMeter();
 
useEffect(() => {
  if (openmeter) {
    openmeter
      .queryPortalMeter({
        meter: 'tokens',
        windowSize: WindowSize.Day,
        from: new Date('2023-10-01T00:00:00Z'),
        to: new Date('2023-10-31T00:00:00Z'),
      })
      .then(({ data }) => {
        /* use data */
      });
  }
}, [openmeter]);

Check out our Consumer Portal Guide and our Next.js dashboard example.

#Get started today

We're excited to see what you'll build with OpenMeter!
Visit the Consumer Portal to get started.