Image Generation Example

import { ByokClient } from "@byokapi/client"
import { makeAutoObservable, runInAction } from "mobx"

class ImageStore {
  client: ByokClient
  imageUrl: string | null = null
  generating = false

  constructor() {
    this.client = new ByokClient({
      bridgeUrl: "http://localhost:8881/bridge",
      appName: "Image Demo",
    })
    makeAutoObservable(this)
  }

  async init() {
    await this.client.connect()
    await this.client.requestGrant({ capabilities: ["image"] })
  }

  async generate(prompt: string) {
    this.generating = true
    this.imageUrl = null

    const api = this.client.getBridgeAPI()
    const grantId = this.client.getActiveGrantId()

    const result = await api.doImage({
      grantId,
      modelId: "dall-e-3",
      prompt,
      size: "1024x1024",
      n: 1,
    })

    runInAction(() => {
      this.imageUrl = result.images[0]?.url ?? null
      this.generating = false
    })
  }
}

import { observer } from "mobx-react-lite"

const ImageGen = observer(({ store }: { store: ImageStore }) => {
  const [prompt, setPrompt] = useState("")

  return (
    <div>
      <input
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="A cat wearing a space suit..."
      />
      <button onClick={() => store.generate(prompt)} disabled={store.generating}>
        {store.generating ? "Generating..." : "Generate"}
      </button>
      {store.imageUrl && (
        <img src={store.imageUrl} alt="Generated image" className="max-w-lg rounded-xl" />
      )}
    </div>
  )
})