@toknwrks/regen-compute-react

React components for Regenerative Compute — drop-in UI for ecological credit retirement in AI applications.

Developers use these to signal to their users that their AI product is backed by verified ecological regeneration on Regen Network.

Install

npm install @toknwrks/regen-compute-react @toknwrks/regen-compute-client

Setup

Get an API key at compute.regen.network, then add it to your environment:

Local development — add to .env.local:

REGEN_API_KEY=rfa_...

Production — add REGEN_API_KEY as an environment variable in your hosting platform:

• Vercel: Project Settings → Environment Variables
• Netlify: Site Settings → Environment Variables
• Railway / Render / Fly.io: your project's environment/secrets settings

The API key is only ever read server-side. It is never exposed to the browser.

Components

<RegenChatBadge />

A small inline badge for chat footers and message input areas. The most common placement — always visible to the end user while they're using the AI.

import { RegenChatBadge } from '@toknwrks/regen-compute-react'

// Minimal
<RegenChatBadge />

// With certificate link and credit display
<RegenChatBadge
  certificateUrl="https://compute.regen.network/certificate/WyJy..."
  creditsRetired="0.42 C"
/>

Typical placement in a chat UI:

<div className="chat-input-wrapper">
  <textarea placeholder="Message..." />
  <div className="chat-input-footer">
    <RegenChatBadge certificateUrl={latestCertUrl} />
    <button type="submit">Send</button>
  </div>
</div>

---

<RegenPoweredBy />

A "Powered by" card for app footers, sidebars, and about pages. Shows the Regen brand with a short description and a link to the retirement certificate.

import { RegenPoweredBy } from '@toknwrks/regen-compute-react'

// App footer
<footer>
  <p>© 2025 Acme AI</p>
  <RegenPoweredBy />
</footer>

// Sidebar with live stats
<RegenPoweredBy
  certificateUrl={latestCertUrl}
  creditsRetired="1.2 C"
/>

---

<RetireButton />

A button that retires credits via your server action or API route. Your API key never leaves the server.

// app/actions/retire.ts
'use server'
import { RegenClient } from '@toknwrks/regen-compute-client'

const regen = new RegenClient({ apiKey: process.env.REGEN_API_KEY! })

export async function retireCredits() {
  return regen.retire({ credit_class: 'C', quantity: 1, reason: 'AI session' })
}

// app/components/MyChat.tsx
'use client'
import { RetireButton } from '@toknwrks/regen-compute-react'
import { retireCredits } from '../actions/retire'

export function MyChat() {
  return (
    <RetireButton onRetire={retireCredits}>
      Offset This Session
    </RetireButton>
  )
}

After retirement, the button automatically shows a certificate link (on-chain) or marketplace link (credit card fallback).

---

<RegenCertificate />

Displays a full retirement certificate with on-chain details.

import { RegenCertificate } from '@toknwrks/regen-compute-react'
import { RegenClient } from '@toknwrks/regen-compute-client'

// In a Next.js server component:
const regen = new RegenClient({ apiKey: process.env.REGEN_API_KEY! })
const cert = await regen.certificate('WyJy...')

<RegenCertificate certificate={cert} />

---

<RegenImpact />

Displays aggregate Regen Network impact statistics.

import { RegenImpact } from '@toknwrks/regen-compute-react'
import { RegenClient } from '@toknwrks/regen-compute-client'

const regen = new RegenClient({ apiKey: process.env.REGEN_API_KEY! })
const impact = await regen.impact()

<RegenImpact impact={impact} />

---

Styling

All components use inline styles with zero CSS dependencies. Override with className or style:

<RegenChatBadge className="my-badge" style={{ fontSize: '12px' }} />

License

Apache-2.0