https://www.xybrid.ai/demo

1<!doctype html>
2<html lang="en">
3	<head>
4		<meta charset="utf-8" />
5		<meta name="viewport" content="width=device-width, initial-scale=1" />
6		<link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet" />
7		<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png">
8		<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png">
9		<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png">
10		<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76x76.png">
11		<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png">
12		<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png">
13		<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png">
14		<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png">
15		<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
16		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
17		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
18		<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
19		<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
20		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
21		<link rel="icon" type="image/x-icon" href="/favicon.ico">
22		<meta name="msapplication-TileColor" content="#ffffff">
23		<meta name="msapplication-TileImage" content="/favicon-144x144.png">
24		<meta name="msapplication-config" content="/browserconfig.xml">
25		
26		<link href="./_app/immutable/assets/0.DG2aLNwg.css" rel="stylesheet">
27		<link href="./_app/immutable/assets/Footer.BwIXAKsC.css" rel="stylesheet">
28		<link href="./_app/immutable/assets/6.e3oesJBg.css" rel="stylesheet"><!--12qhfyh--><meta name="description" content="Run ML models on-device or in the cloud with intelligent routing. Zero infrastructure. Privacy-first, cost-optimized. Any model. Any platform."/> <meta property="og:type" content="website"/> <meta property="og:url" content="https://www.xybrid.ai/demo"/> <meta property="og:title" content="Xybrid - Hybrid On-Device AI"/> <meta property="og:description" content="Run ML models on-device or in the cloud with intelligent routing. Zero infrastructure. Privacy-first, cost-optimized. Any model. Any platform."/> <meta property="og:image" content="https://www.xybrid.ai/og-image.jpg"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/> <meta property="og:site_name" content="Xybrid"/> <meta property="og:logo" content="https://www.xybrid.ai/logo.png"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:url" content="https://www.xybrid.ai/demo"/> <meta name="twitter:title" content="Xybrid - Hybrid On-Device AI"/> <meta name="twitter:description" content="Run ML models on-device or in the cloud with intelligent routing. Zero infrastructure. Privacy-first, cost-optimized. Any model. Any platform."/> <meta name="twitter:image" content="https://www.xybrid.ai/og-image.jpg"/> <link rel="canonical" href="https://www.xybrid.ai/demo"/> <link rel="alternate" type="application/rss+xml" title="Xybrid Blog" href="/blog/rss.xml"/><!----><!--1du1zi4--><meta name="description" content="Run a compact language model locally in your browser with Xybrid."/><!----><title>Run AI on your browser | Xybrid</title>
29	</head>
30	<body data-sveltekit-preload-data="hover">
31		<div style="display: contents"><!--[--><!--[--><!----><!----><div class="x-page x-root x-marketing-root"><nav class="x-nav "><div class="x-nav__left"><a class="x-nav__brand" href="/" aria-label="Xybrid home"><img class="x-logo-mark" src="/logo.png" alt="" width="34" height="34" style="display: inline-block; width: 34px; height: 34px; object-fit: contain;"/><!----></a> <ul class="x-nav__links"><li><a class="x-nav__link" href="/models">Models</a></li> <li><a class="x-nav__link" href="/blog">Blog</a></li> <li><a class="x-nav__link" href="/games">Games</a></li> <li><a class="x-nav__link --has-arrow" href="https://docs.xybrid.dev" target="_blank" rel="noopener">Docs</a></li></ul></div> <div class="x-nav__right"><a class="x-btn --ghost --sm x-nav__social svelte-1h8gbq9" href="https://github.com/xybrid-ai/xybrid" target="_blank" rel="noopener"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><!--[!--><!--[--><path d="M8 .2A8 8 0 0 0 .5 11a8 8 0 0 0 5.5 5.06c.4.07.55-.18.55-.4v-1.4c-2.24.5-2.7-1.07-2.7-1.07-.36-.94-.9-1.18-.9-1.18-.74-.5.06-.5.06-.5.82.06 1.25.85 1.25.85.73 1.26 1.92.9 2.4.68.07-.53.28-.9.5-1.1-1.78-.2-3.65-.9-3.65-4 0-.88.32-1.6.84-2.17-.08-.2-.36-1.02.08-2.12 0 0 .68-.22 2.23.83a7.7 7.7 0 0 1 4.05 0c1.55-1.05 2.23-.83 2.23-.83.44 1.1.16 1.92.08 2.12.52.57.84 1.3.84 2.17 0 3.1-1.88 3.8-3.67 4 .3.25.55.74.55 1.5v2.22c0 .22.15.47.55.4A8 8 0 0 0 15.5 11 8 8 0 0 0 8 .2z"></path><!--]--><!--]--></svg><!----><!--[-->465<!--]--></a> <a class="x-btn --ghost --sm x-nav__social svelte-1h8gbq9" href="https://discord.gg/xybrid" target="_blank" rel="noopener"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><!--[!--><!--[!--><!--[--><path d="M13.55 3.06A12.4 12.4 0 0 0 10.5 2.13a8.5 8.5 0 0 0-.4.83 11.5 11.5 0 0 0-3.43 0 8.4 8.4 0 0 0-.4-.83 12.4 12.4 0 0 0-3.05.93A12.93 12.93 0 0 0 .42 11.6a12.5 12.5 0 0 0 3.78 1.9c.3-.42.58-.86.81-1.32a8.1 8.1 0 0 1-1.28-.62c.1-.08.21-.16.32-.24a8.93 8.93 0 0 0 7.5 0c.11.08.22.16.32.24-.41.24-.83.45-1.28.62.24.46.5.9.81 1.32a12.5 12.5 0 0 0 3.78-1.9 12.78 12.78 0 0 0-2.63-8.54ZM5.35 9.98c-.74 0-1.35-.69-1.35-1.54s.6-1.55 1.35-1.55c.74 0 1.36.7 1.35 1.55 0 .85-.6 1.54-1.35 1.54Zm5.3 0c-.74 0-1.35-.69-1.35-1.54s.6-1.55 1.35-1.55c.74 0 1.36.7 1.35 1.55 0 .85-.6 1.54-1.35 1.54Z"></path><!--]--><!--]--><!--]--></svg><!----> Discord</a> <a class="x-btn --ghost --sm x-nav__signin svelte-1h8gbq9" href="https://console.xybrid.dev">Sign in</a> <a class="x-btn --primary --sm" href="https://console.xybrid.dev/">Get API key <svg class="x-arrow" aria-hidden="true" width="12" height="12" viewBox="0 0 13 13" fill="none"><!--[--><path d="M3 6.5h6.5M7 4l2.5 2.5L7 9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"></path><!--]--></svg><!----></a> <span class="x-nav__progress" aria-hidden="true"></span> <button type="button" class="x-nav__burger svelte-1h8gbq9" aria-label="Open menu" aria-expanded="false" aria-controls="x-nav-drawer"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" fill="none"><!--[!--><!--[!--><!--[!--><!--[--><path d="M3 5h12M3 9h12M3 13h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><!--]--><!--]--><!--]--><!--]--></svg><!----></button></div></nav> <!--[!--><!--]--> <div id="x-nav-drawer" class="x-nav__drawer svelte-1h8gbq9" aria-hidden="true" inert>

31<ul class="x-nav__drawer-links svelte-1h8gbq9"><li class="svelte-1h8gbq9"><a href="/models" class="svelte-1h8gbq9">Models</a></li> <li class="svelte-1h8gbq9"><a href="/blog" class="svelte-1h8gbq9">Blog</a></li> <li class="svelte-1h8gbq9"><a href="/games" class="svelte-1h8gbq9">Games</a></li> <li class="svelte-1h8gbq9"><a href="https://docs.xybrid.dev" target="_blank" rel="noopener" class="svelte-1h8gbq9">Docs ↗</a></li></ul> <div class="x-nav__drawer-foot svelte-1h8gbq9"><a class="x-btn --ghost" href="https://github.com/xybrid-ai/xybrid" target="_blank" rel="noopener"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><!--[!--><!--[--><path d="M8 .2A8 8 0 0 0 .5 11a8 8 0 0 0 5.5 5.06c.4.07.55-.18.55-.4v-1.4c-2.24.5-2.7-1.07-2.7-1.07-.36-.94-.9-1.18-.9-1.18-.74-.5.06-.5.06-.5.82.06 1.25.85 1.25.85.73 1.26 1.92.9 2.4.68.07-.53.28-.9.5-1.1-1.78-.2-3.65-.9-3.65-4 0-.88.32-1.6.84-2.17-.08-.2-.36-1.02.08-2.12 0 0 .68-.22 2.23.83a7.7 7.7 0 0 1 4.05 0c1.55-1.05 2.23-.83 2.23-.83.44 1.1.16 1.92.08 2.12.52.57.84 1.3.84 2.17 0 3.1-1.88 3.8-3.67 4 .3.25.55.74.55 1.5v2.22c0 .22.15.47.55.4A8 8 0 0 0 15.5 11 8 8 0 0 0 8 .2z"></path><!--]--><!--]--></svg><!----><!--[-->465<!--]--></a> <a class="x-btn --ghost" href="https://discord.gg/xybrid" target="_blank" rel="noopener"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><!--[!--><!--[!--><!--[--><path d="M13.55 3.06A12.4 12.4 0 0 0 10.5 2.13a8.5 8.5 0 0 0-.4.83 11.5 11.5 0 0 0-3.43 0 8.4 8.4 0 0 0-.4-.83 12.4 12.4 0 0 0-3.05.93A12.93 12.93 0 0 0 .42 11.6a12.5 12.5 0 0 0 3.78 1.9c.3-.42.58-.86.81-1.32a8.1 8.1 0 0 1-1.28-.62c.1-.08.21-.16.32-.24a8.93 8.93 0 0 0 7.5 0c.11.08.22.16.32.24-.41.24-.83.45-1.28.62.24.46.5.9.81 1.32a12.5 12.5 0 0 0 3.78-1.9 12.78 12.78 0 0 0-2.63-8.54ZM5.35 9.98c-.74 0-1.35-.69-1.35-1.54s.6-1.55 1.35-1.55c.74 0 1.36.7 1.35 1.55 0 .85-.6 1.54-1.35 1.54Zm5.3 0c-.74 0-1.35-.69-1.35-1.54s.6-1.55 1.35-1.55c.74 0 1.36.7 1.35 1.55 0 .85-.6 1.54-1.35 1.54Z"></path><!--]--><!--]--><!--]--></svg><!----> Discord</a> <a class="x-btn --ghost" href="https://console.xybrid.dev">Sign in</a></div></div><!----> <main id="main-content"><section class="x-section demo__section svelte-jz6j6f" id="live-demo"><div class="x-container svelte-jz6j6f"><div class="x-section__head demo__head svelte-jz6j6f"><h2 class="x-h1 svelte-jz6j6f">The model runs <em class="svelte-jz6j6f">here</em>.</h2> <p class="x-lead svelte-jz6j6f">The hero above is a simulation — this is not. SmolLM2-135M, the smallest model we ship,
32				streamed by <span class="x-mono svelte-jz6j6f">@xybrid/web</span> on your GPU or CPU. The prompt never
33				leaves this tab.</p></div> <div class="demo svelte-jz6j6f"><div class="demo__card x-card --glass svelte-jz6j6f"><div class="demo__meta svelte-jz6j6f"><span class="demo__model svelte-jz6j6f"><span class="demo__model-dot svelte-jz6j6f" aria-hidden="true"></span> smollm2-135m-instruct</span> <span class="x-pill svelte-jz6j6f">@xybrid/web · preview</span> <span class="demo__engine-hint svelte-jz6j6f"><!--[!--><!--[!-->WebGPU when available · wasm fallback<!--]--><!--]--></span></div> <!--[!--><!--]--> <label class="demo__label svelte-jz6j6f" for="demo-prompt">Prompt</label> <textarea id="demo-prompt" class="demo__prompt svelte-jz6j6f" rows="2" maxlength="280">Write a haiku about AI that works offline.</textarea> <div class="demo__chips svelte-jz6j6f" role="group" aria-label="Suggested prompts"><!--[--><button type="button" class="demo__chip svelte-jz6j6f --active">Write a haiku about AI that works offline.</button><button type="button" class="demo__chip svelte-jz6j6f">Explain in two sentences why on-device inference matters.</button><button type="button" class="demo__chip svelte-jz6j6f">Give three reasons to run a language model locally.</button><!--]--></div> <div class="demo__controls svelte-jz6j6f"><!--[!--><button type="button" class="x-btn --accent svelte-jz6j6f">Run it in this browser</button><!--]--> <div class="demo__accel svelte-jz6j6f" role="group" aria-label="Engine preference"><!--[--><button type="button" class="demo__accel-btn svelte-jz6j6f --active" aria-pressed="true">auto</button><button type="button" class="demo__accel-btn svelte-jz6j6f" aria-pressed="false">webgpu</button><button type="button" class="demo__accel-btn svelte-jz6j6f" aria-pressed="false">wasm</button><!--]--></div></div> <p class="demo__cost svelte-jz6j6f">136 MB one-time download, cached by your browser. <strong class="svelte-jz6j6f">Replies capped at
34						256 tokens</strong> — a demo safeguard.</p> <div class="demo__output svelte-jz6j6f --idle"><!--[--><span class="demo__output-label svelte-jz6j6f">Example output — run it to see your own</span> <p class="demo__stream svelte-jz6j6f">"The AI's voice is like a gentle breeze,<br class="svelte-jz6j6f"/>A soothing melody that calms the
35							mind,<br class="svelte-jz6j6f"/>It whispers secrets to those who listen,<br class="svelte-jz6j6f"/>A reminder that the world
36							is a vast and wondrous place."</p><!--]--></div> <!--[!--><!--]--> <span class="demo__sr-status svelte-jz6j6f" role="status" aria-l

36ive="polite"></span></div> <div class="demo__code x-code svelte-jz6j6f"><div class="x-code__chrome svelte-jz6j6f"><div class="x-code__lights svelte-jz6j6f"><span class="svelte-jz6j6f"></span><span class="svelte-jz6j6f"></span><span class="svelte-jz6j6f"></span></div> <div class="x-code__tabs svelte-jz6j6f"><span class="x-code__tab --active svelte-jz6j6f">demo.ts</span></div> <button type="button" class="x-code__copy svelte-jz6j6f">copy</button></div> <pre class="x-code__body demo__code-body svelte-jz6j6f"><!----><span class="t-key">import</span> { <span class="t-type">XybridLlm</span> } <span class="t-key">from</span> <span class="t-str">'@xybrid/web'</span>;
37
38<span class="t-key">const</span> <span class="t-id">llm</span> <span class="t-op">=</span> <span class="t-key">await</span> <span class="t-type">XybridLlm</span>.<span class="t-fn">load</span>(<span class="t-str">'…/model_metadata.json'</span>, {
39  <span class="t-prop">wasmPath</span>: <span class="t-str">'/demo/llm-runtime'</span>,
40  <span class="t-prop">accelerator</span>: <span class="t-str">'auto'</span>,
41});
42
43<span class="t-key">const</span> <span class="t-id">stream</span> <span class="t-op">=</span> <span class="t-id">llm</span>.<span class="t-fn">generateStream</span>(
44  <span class="t-str">'Write a haiku about AI that works offline.'</span>,
45  { <span class="t-prop">maxOutputTokens</span>: <span class="t-num">256</span> },
46);
47<span class="t-key">for await</span> (<span class="t-key">const</span> <span class="t-id">delta</span> <span class="t-key">of</span> <span class="t-id">stream</span>) <span class="t-fn">render</span>(<span class="t-id">delta</span>);<!----></pre> <p class="demo__code-note svelte-jz6j6f">The exact calls this page makes — it rewrites as you edit the prompt. <a href="https://github.com/xybrid-ai/xybrid/tree/master/bindings/web" target="_blank" rel="noopener" class="svelte-jz6j6f">bindings/web ↗</a></p></div></div></div></section><!----></main> <footer class="x-footer"><div class="x-container"><div class="x-footer__row"><div class="x-footer__col"><a href="/" aria-label="Xybrid home" style="display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--c-fg);"><img class="x-logo-mark" src="/logo.png" alt="" width="26" height="26" style="display: inline-block; width: 26px; height: 26px; object-fit: contain;"/><!----></a> <p class="x-small" style="margin-top: 14px; max-width: 36ch;">The operating layer for on-device AI. Built in 🇫🇷.</p></div> <div class="x-footer__col"><h4>Product</h4> <ul><li><a href="https://github.com/xybrid-ai/xybrid" target="_blank" rel="noopener">Runtime ↗</a></li> <li><a href="https://console.xybrid.dev">Console</a></li></ul></div> <div class="x-footer__col"><h4>Developers</h4> <ul><li><a href="https://docs.xybrid.dev" target="_blank" rel="noopener">Documentation ↗</a></li> <li><a href="https://docs.xybrid.dev/quickstart" target="_blank" rel="noopener">Quickstart ↗</a></li> <li><a href="https://docs.xybrid.dev/api">API reference</a></li></ul></div> <div class="x-footer__col"><h4>Company</h4> <ul><li><a href="/blog">Blog</a></li></ul></div></div> <div class="x-footer__bottom"><span>© 2026 Xybrid</span> <span style="font-family: var(--c-font-mono); font-size: 11px; color: var(--c-fg-4); letter-spacing: 0.05em;">v0.10.1</span></div></div></footer><!----></div><!----><!----><!----><!--]--> <!--[!--><!--]--><!--]-->
48			
49			

49<script>
50				{
51					__sveltekit_b1t3p1 = {
52						base: new URL(".", location).pathname.slice(0, -1),
53						env: {"PUBLIC_POSTHOG_KEY":"phc_wChHnifJyQW2PWGRQTTbtdoT9FobMD3rQ2TNfZJAvfcR"}
54					};
55
56					const element = document.currentScript.parentElement;
57
58					Promise.all([
59						import("./_app/immutable/entry/start.DCslHCDY.js"),
60						import("./_app/immutable/entry/app.BFO6RO-y.js")
61					]).then(([kit, app]) => {
62						kit.start(app, element, {
63							node_ids: [0, 6],
64							data: [{type:"data",data:{gh:{stars:465,contributors:15,commitsThisMonth:4,commitGraph:[1,2,2,0,1,2,0,0,0,1,0,0,0,2,2,4,2,4,1,1,5,2,6,3,2,2,2,2,0,2,1,1]},latestReleaseTag:"v0.10.1"},uses:{}},null],
65							form: null,
66							error: null
67						});
68					});
69				}
70			</script>

70
71		</div>
72	</body>
73</html>