Quick Start

import {
  RunAnywhere,
  SDKEnvironment,
  ModelManager,
  ModelCategory,
  LLMFramework,
  type CompactModelDef,
} from '@runanywhere/web'

import { LlamaCPP } from '@runanywhere/web-llamacpp'

// Define your model catalog
const MODELS: CompactModelDef[] = [
  {
    id: 'lfm2-350m-q4_k_m',
    name: 'LFM2 350M Q4_K_M',
    repo: 'LiquidAI/LFM2-350M-GGUF',
    files: ['LFM2-350M-Q4_K_M.gguf'],
    framework: LLMFramework.LlamaCpp,
    modality: ModelCategory.Language,
    memoryRequirement: 250_000_000,
  },
]

let _initPromise: Promise<void> | null = null

export async function initSDK(): Promise<void> {
  if (_initPromise) return _initPromise

  _initPromise = (async () => {
    // 1. Initialize core SDK
    await RunAnywhere.initialize({
      environment: SDKEnvironment.Development,
      debug: true,
    })

    // 2. Register the LlamaCpp backend (loads WASM automatically)
    await LlamaCPP.register()

    // 3. Register model catalog
    RunAnywhere.registerModels(MODELS)
  })()

  return _initPromise
}

export { RunAnywhere, ModelManager, ModelCategory }

import { useEffect, useState, useCallback } from 'react'
import { ModelManager, ModelCategory, EventBus } from '@runanywhere/web'
import { TextGeneration } from '@runanywhere/web-llamacpp'
import { initSDK } from './runanywhere'

function App() {
  const [ready, setReady] = useState(false)
  const [response, setResponse] = useState('')

  useEffect(() => {
    initSDK().then(() => setReady(true))
  }, [])

  const handleGenerate = useCallback(async () => {
    // Download model if needed
    const models = ModelManager.getModels().filter((m) => m.modality === ModelCategory.Language)
    const model = models[0]

    if (model.status !== 'downloaded' && model.status !== 'loaded') {
      await ModelManager.downloadModel(model.id)
    }

    // Load model
    await ModelManager.loadModel(model.id)

    // Stream tokens in real-time
    const { stream, result: resultPromise } = await TextGeneration.generateStream(
      'Explain quantum computing briefly.',
      { maxTokens: 200, temperature: 0.7 }
    )

    let text = ''
    for await (const token of stream) {
      text += token
      setResponse(text)
    }

    const metrics = await resultPromise
    console.log(`${metrics.tokensPerSecond.toFixed(1)} tok/s | ${metrics.latencyMs}ms`)
  }, [])

  return (
    <div>
      <button onClick={handleGenerate} disabled={!ready}>
        {ready ? 'Generate' : 'Loading SDK...'}
      </button>
      <div>{response}</div>
    </div>
  )
}

import { useState, useCallback } from 'react'
import { TextGeneration } from '@runanywhere/web-llamacpp'

export function Chat() {
  const [prompt, setPrompt] = useState('')
  const [response, setResponse] = useState('')
  const [isStreaming, setIsStreaming] = useState(false)

  const handleGenerate = useCallback(async () => {
    if (!prompt.trim()) return

    setResponse('')
    setIsStreaming(true)

    try {
      const { stream } = await TextGeneration.generateStream(prompt, {
        maxTokens: 200,
        temperature: 0.7,
      })

      let accumulated = ''
      for await (const token of stream) {
        accumulated += token
        setResponse(accumulated)
      }
    } catch (error) {
      setResponse('Error: ' + (error as Error).message)
    } finally {
      setIsStreaming(false)
    }
  }, [prompt])

  return (
    <div>
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Ask anything..."
      />
      <button onClick={handleGenerate} disabled={isStreaming}>
        {isStreaming ? 'Generating...' : 'Generate'}
      </button>
      <div>{response}</div>
    </div>
  )
}