# Backend API URL (required)
NEXT_PUBLIC_BACKEND_URL=https://api.example.com

# Reown Web3 Project ID (required for wallet connect)
NEXT_PUBLIC_PROJECT_ID=your_project_id

import { AomiFrame } from "@/components/aomi-frame";

<AomiFrame
  width="100%"
  height="600px"
  backendUrl="https://api.example.com"
  walletPosition="footer"
/>;

// Wallet button in sidebar footer (default)
<AomiFrame walletPosition="footer" />

// Wallet button in sidebar header
<AomiFrame walletPosition="header" />

// No wallet button in sidebar (use ControlBar wallet instead)
<AomiFrame walletPosition={null} />

import { AomiFrame } from "@/components/aomi-frame";

<AomiFrame.Root height="600px" backendUrl="https://api.example.com">
  <AomiFrame.Header
    withControl={true}
    controlBarProps={{
      hideModel: false, // Show model selector
      hideNamespace: false, // Show agent selector
      hideApiKey: true, // Hide API key input
      hideWallet: false, // Show wallet connect
    }}
  />
  <AomiFrame.Composer />
</AomiFrame.Root>;

<AomiFrame.Root height="600px">
  <AomiFrame.Header withControl={false} />
  <AomiFrame.Composer
    withControl={true}
    controlBarProps={{ hideWallet: true }}
  />
</AomiFrame.Root>

import { ControlBar } from "@/components/control-bar";

// Full control bar (all controls visible)
<ControlBar />

// Minimal: just model and namespace
<ControlBar hideApiKey hideWallet />

// Custom: hide defaults, add your own
<ControlBar hideModel hideNamespace hideApiKey hideWallet>
  <MyCustomModelPicker />
  <MyCustomWalletButton />
</ControlBar>

import { useControl } from "@aomi-labs/react";

function MyComponent() {
  const {
    state, // Current control state
    setState, // Update namespace or apiKey
    getAvailableModels, // Fetch available models
    getAuthorizedNamespaces, // Fetch authorized namespaces
    onModelSelect, // Select a model
    getControlState, // Get state synchronously
    onControlStateChange, // Subscribe to changes
  } = useControl();

  // Read state
  console.log(state.namespace); // "production" | "staging" | null
  console.log(state.apiKey); // "sk-..." | null
  console.log(state.availableModels); // ["gpt-4", "claude-3", ...]
  console.log(state.authorizedNamespaces); // ["default", "production", ...]

  // Update state
  setState({ namespace: "production" });
  setState({ apiKey: "sk-new-key" });

  // Select a model (calls backend)
  await onModelSelect("gpt-4");
}

type ControlState = {
  namespace: string | null; // Selected namespace/agent
  apiKey: string | null; // API key (persisted to localStorage)
  availableModels: string[]; // Models from backend
  authorizedNamespaces: string[]; // Namespaces from backend
};

import { useAomiRuntime } from "@aomi-labs/react";

function MyComponent() {
  const api = useAomiRuntime();

  // Thread management
  const threadId = api.currentThreadId;
  await api.createThread();
  await api.selectThread("thread-123");
  await api.deleteThread("thread-123");
  await api.renameThread("thread-123", "New Title");

  // Messages
  const messages = api.getMessages(threadId);
  await api.sendMessage("Hello!");
  const isGenerating = api.isRunning;
  api.cancelGeneration();

  // User state
  const user = api.user;
  api.setUser({ address: "0x...", chainId: 1, isConnected: true });

  // Notifications
  api.showNotification({ type: "success", title: "Done!" });
  api.dismissNotification("notification-id");

  // Events
  const unsubscribe = api.subscribe((event) => console.log(event));
  await api.sendSystemCommand("custom:action", { data: "value" });
}

// app/providers.tsx
import { WagmiProvider, createConfig, http } from "wagmi";
import { mainnet, polygon } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const config = createConfig({
  chains: [mainnet, polygon],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http(),
  },
});

const queryClient = new QueryClient();

export function Providers({ children }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

// Hide all controls for a minimal UI
<AomiFrame.Root>
  <AomiFrame.Header withControl={false} />
  <AomiFrame.Composer />
</AomiFrame.Root>

// Hide wallet for non-web3 apps
<AomiFrame.Root walletPosition={null}>
  <AomiFrame.Header controlBarProps={{ hideWallet: true }} />
  <AomiFrame.Composer />
</AomiFrame.Root>

// API-key only mode (no wallet, no namespace)
<AomiFrame.Root walletPosition={null}>
  <AomiFrame.Header
    controlBarProps={{
      hideModel: true,
      hideNamespace: true,
      hideWallet: true,
    }}
  />
  <AomiFrame.Composer />
</AomiFrame.Root>