React Hooks

npm install @openmodex/react

import { OpenModexProvider } from '@openmodex/react';

function App() {
  return (
    <OpenModexProvider
      apiKey="omx_sk_..."
      baseURL="https://api.openmodex.com/v1"
      model="gpt-4o"
    >
      <ChatApp />
    </OpenModexProvider>
  );
}

import { useChat } from '@openmodex/react';

function ChatApp() {
  const {
    messages,
    input,
    setInput,
    sendMessage,
    isLoading,
    stop,
    error,
    reload,
    append,
    metadata,
  } = useChat({
    apiKey: 'omx_sk_...',
    model: 'gpt-4o',
    system: 'You are a helpful assistant.',
    temperature: 0.7,
    max_tokens: 1024,
    top_p: 0.9,
    routing: { strategy: 'cost-optimized' },
    onFinish: (message) => console.log('Done:', message.content),
    onError: (error) => console.error(error),
  });

  return (
    <div>
      <div>
        {messages.map((m) => (
          <div key={m.id}>
            <strong>{m.role}:</strong> {m.content}
          </div>
        ))}
      </div>

      <form onSubmit={(e) => { e.preventDefault(); sendMessage(); }}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
        />
        <button type="submit" disabled={isLoading}>Send</button>
        {isLoading && <button onClick={stop}>Stop</button>}
      </form>

      <button onClick={reload}>Regenerate last response</button>

      {error && <p style={{ color: 'red' }}>{error.message}</p>}

      {metadata && (
        <p>Model: {metadata.model_used} | Latency: {metadata.latency_ms}ms</p>
      )}
    </div>
  );
}

import { useCompletion } from '@openmodex/react';

function CompletionApp() {
  const { completion, input, setInput, complete, isLoading, stop } = useCompletion({
    apiKey: 'omx_sk_...',
    model: 'gpt-4o',
    temperature: 0.8,
    max_tokens: 256,
    routing: { strategy: 'cost-optimized' },
  });

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={() => complete()} disabled={isLoading}>Complete</button>
      {isLoading && <button onClick={stop}>Stop</button>}
      <p>{completion}</p>
    </div>
  );
}

import { useModels } from '@openmodex/react';

function ModelList() {
  const { models, isLoading, error, refetch } = useModels({
    apiKey: 'omx_sk_...',
    category: 'chat',
    provider: 'openai',
    search: 'gpt',
    sort: 'name',
  });

  if (isLoading) return <p>Loading models...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {models.map((m) => (
        <li key={m.id}>
          <strong>{m.name}</strong> -- {m.provider}
          <br />
          <small>{m.description}</small>
        </li>
      ))}
    </ul>
  );
}

import { useModelCompare } from '@openmodex/react';

function ModelCompare() {
  const { comparison, highlights, isLoading, error } = useModelCompare({
    apiKey: 'omx_sk_...',
    models: ['gpt-4o', 'claude-3.5-sonnet', 'gemini-2.0-flash'],
  });

  if (isLoading) return <p>Comparing models...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {highlights && (
        <div>
          <p>Cheapest: {highlights.cheapest}</p>
          <p>Fastest: {highlights.fastest}</p>
          <p>Best quality: {highlights.best_quality}</p>
        </div>
      )}

      <table>
        <thead>
          <tr>
            <th>Model</th>
            <th>Provider</th>
            <th>Input $/M</th>
            <th>Latency (p50)</th>
          </tr>
        </thead>
        <tbody>
          {comparison && Object.entries(comparison).map(([id, item]) => (
            <tr key={id}>
              <td>{item.name}</td>
              <td>{item.provider}</td>
              <td>${item.pricing?.openmodex_input_per_m}</td>
              <td>{item.performance?.latency_p50_ms}ms</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

import { useEmbedding } from '@openmodex/react';

function EmbeddingApp() {
  const { embedding, isLoading, error, create } = useEmbedding({
    apiKey: 'omx_sk_...',
    model: 'text-embedding-3-small',
  });

  return (
    <div>
      <button onClick={() => create('Hello world')} disabled={isLoading}>
        Create Embedding
      </button>

      {isLoading && <p>Creating embedding...</p>}
      {error && <p>Error: {error.message}</p>}
      {embedding && <p>Dimensions: {embedding.length}</p>}
    </div>
  );
}