Skip to content

Show what Nibblets can do, with clearly labelled PR previews #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IAmJSD wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Show what Nibblets can do, with clearly labelled PR previews #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 154 additions & 10 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const features: {
}[] = [
{
icon: "alarm-clock",
title: "Always on",
text: "A nibblet is a thread that never really ends. It wakes on a heartbeat, and on schedules it sets for itself.",
title: "Work that keeps going",
text: "Give it a continuing job. It wakes on a heartbeat and on schedules it sets for itself, instead of waiting for your next message.",
},
{
icon: "brain",
Expand All @@ -44,17 +44,32 @@ const features: {
{
icon: "key-round",
title: "Your subscriptions",
text: "Runs on Claude Code, Codex or OpenCode, signed in with the plans you already pay for. No API bills.",
text: "Use your existing Claude Code, Codex or OpenCode login. Subscription use is subject to your provider’s plan and usage limits.",
},
{
icon: "house",
title: "Your machines",
text: "Each nibblet gets its own little container, with a browser you can watch and take over.",
text: "Each top-level nibblet runs in its own container, with files, tools and a browser you can watch and take over.",
},
{
icon: "egg",
title: "Little helpers",
text: "Big jobs get split up: a nibblet can hatch sub-agents of its own and hear back when they're done.",
text: "Split a job between sub-agents. They share the parent’s files and tools, have their own browsers, and report back when they’re done.",
},
{
icon: "house",
title: "Desktop apps, together",
text: "Open installed apps in its container. You and the nibblet see the same windows, so you can watch it work or take control yourself.",
},
{
icon: "alarm-clock",
title: "Keep a server running",
text: "Background tasks keep running between messages and agent turns. Inspect the output or step into a terminal. Tasks stop when their container stops.",
},
{
icon: "house",
title: "On your tailnet",
text: "With Tailscale configured, a nibblet joins your tailnet as its own machine. Share selected ports to reach what it builds from your other devices.",
},
{
icon: "smartphone",
Expand All @@ -64,7 +79,7 @@ const features: {
];
---

<Base>
<Base description="Self-hosted agents with their own browser, desktop apps and terminal. Use your existing AI subscriptions, delegate work, and check in from your phone.">
<header class="wrap top">
<a class="brand" href="/">
<img src="/favicon.svg" alt="" width="34" height="34" />
Expand All @@ -91,10 +106,11 @@ const features: {
→
</span>
</a>
<h1>Little agents that live on your own computers</h1>
<h1>Little agents with a computer of their own</h1>
<p class="lede">
Each nibblet is a hamster that chews through tasks for you. They use the Claude and ChatGPT
subscriptions you already have, remember things, and get on with work while you're away.
Give a hamster a job, a browser and a place to work on your own machine. It can use desktop
apps, delegate to little helpers and keep a server running between messages. Use the AI
subscriptions you already have, and check in from your phone.
</p>
<!-- The Mac app leads until the script below knows better. -->
<div class="downloads" data-os="mac">
Expand Down Expand Up @@ -234,6 +250,83 @@ const features: {
</ul>
</section>

<section class="wrap story" aria-labelledby="story-title">
<h2 id="story-title">Give it a job with something to show for it</h2>
<p class="section-intro">One idea to try: ask a nibblet to build a small dashboard.</p>
<ol>
<li>
<h3>Build it together</h3>
<p>Watch its browser, inspect the files, or open a terminal when you want to help.</p>
</li>
<li>
<h3>Keep it running</h3>
<p>
Let it start the dashboard as a background task, then carry on with the conversation.
</p>
</li>
<li>
<h3>Take a look from your phone</h3>
<p>
Configure Tailscale and share the dashboard’s port to open it from another device on
your tailnet.
</p>
</li>
</ol>
</section>

<section class="wrap roadmap" aria-labelledby="roadmap-title">
<h2 id="roadmap-title">What’s being built</h2>
<p class="section-intro">
The features below are development work, not promises about the current download. Check the{" "}
<a href={`${repo}/releases`}>release notes</a> for what’s shipped.
</p>
<details>
<summary>Explore upcoming features and their pull requests</summary>
<h3>Merged after 0.3.2 · awaiting release</h3>
<ul>
<li>
<a href={`${repo}/pull/37`}>Optional API keys and monthly usage budgets</a>: use
Anthropic or OpenAI API billing instead of a subscription. Estimated budgets can pause
an agent, but aren’t hard invoice caps.
</li>
<li>
<a href={`${repo}/pull/28`}>Agent spending controls</a> and{" "}
<a href={`${repo}/pull/38`}>Stripe Issuing support</a>: configure a bank, set allowances
and manage cards. Provider setup is required; live-provider validation is still needed.
</li>
<li>
<a href={`${repo}/pull/36`}>A plain-speaking agent</a>: choose a different prompt name
or drop the hamster talk. The hamster stays in the UI.
</li>
</ul>
<h3>Open pull requests · previews only</h3>
<ul>
<li>
<a href={`${repo}/pull/14`}>Virtual machines</a>: work towards Linux, Windows and macOS
guests. Support varies by host and guest; containers remain the recommended default.
</li>
<li>
<a href={`${repo}/pull/13`}>Local browser sign-in</a>: borrow a nibblet’s browser
profile in local Chrome, then hand it back. The full desktop and 1Password flow still
needs live testing.
</li>
<li>
<a href={`${repo}/pull/20`}>Encrypted saved chats and a message queue</a>: read cached
text and queue a message when a host is unavailable. This isn’t offline model execution.
</li>
<li>
<a href={`${repo}/pull/39`}>Location, when you share it</a>: let your device answer a
location request for nearby places and local times, with controls to decline or forget
it.
</li>
<li>
<a href={`${repo}/pull/35`}>A server-generated OpenAPI description</a>: make the running
server’s public API easier to discover and build against.
</li>
</ul>
</details>
</section>

<section class="wrap start" id="start">
<h2>Get started</h2>
<ol>
Expand Down Expand Up @@ -470,7 +563,7 @@ const features: {
h1 {
font-size: clamp(34px, 6vw, 58px);
font-weight: 700;
max-width: 14ch;
max-width: 18ch;
letter-spacing: -0.01em;
}
.lede {
Expand Down Expand Up @@ -763,6 +856,57 @@ const features: {
color: var(--dim);
}

.story,
.roadmap {
padding: 48px 0 24px;
}
.section-intro {
max-width: 44rem;
margin: -12px auto 24px;
text-align: center;
color: var(--dim);
}
.story ol {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 18px;
}
.story li,
.roadmap details {
padding: 22px 24px;
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.story h3,
.roadmap h3 {
font-size: 21px;
margin-bottom: 8px;
}
.story p,
.roadmap li {
color: var(--dim);
}
.roadmap summary {
cursor: pointer;
font-weight: 700;
}
.roadmap summary:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 5px;
}
.roadmap h3 {
margin-top: 24px;
}
.roadmap ul {
padding-left: 22px;
}
.roadmap li + li {
margin-top: 12px;
}

.start {
padding: 56px 0 24px;
}
Expand Down
Loading