explaingit

skyf0xx/pebble

14TypeScriptAudience · developerComplexity · 3/5LicenseSetup · easy

TLDR

Pebble is a lightweight browser-based chat app for talking to AI agents, built as a Progressive Web App with no accounts or backend required.

Mindmap

mindmap
  root((pebble))
    What it does
      Chat with AI agents
      PWA install
      Push interactive blocks
    Tech Stack
      React
      Tailwind CSS
      Zustand
      Server-sent events
    Use Cases
      Personal AI agent chat
      Mobile home screen app
      Hermes agent frontend
    Audience
      Developers
      Vibe coders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a chat UI to your Hermes AI agent without building a frontend from scratch.

USE CASE 2

Install the PWA on your phone to chat with your AI agent from a mobile home screen icon.

USE CASE 3

Render interactive buttons, forms, and charts directly inside the AI conversation thread.

USE CASE 4

Self-host a private chat client where all conversation history stays in the browser.

Tech stack

TypeScriptReactTailwind CSSZustand

Getting it running

Difficulty · easy Time to first run · 5min

Requires a running Hermes agent endpoint, no other infra needed.

MIT license, use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

Pebble is a chat interface for talking to AI agents through your web browser. It is a Progressive Web App, meaning you can add it to your phone or desktop home screen and use it like a native app, though it is really just a web page. The interface is minimal and intentionally lightweight: no accounts to create, no backend server to run, no special software to install. You open a URL and start chatting. The conversation layout follows patterns familiar from apps like WhatsApp: your sessions are listed in order of recency, each one shows a status icon, and unread message counts appear automatically. One distinctive feature is that the AI agent on the other end can push interactive blocks into the chat, including buttons, forms, and charts. These are not just text replies but active interface elements the agent can render directly in the thread. Under the hood, Pebble is built with React, styled with Tailwind CSS, and uses a library called Zustand for managing application state. Conversations are saved locally in your browser using standard browser storage, so nothing leaves your device beyond what the agent itself receives. The connection to the agent uses server-sent events for streaming replies in real time. Currently, Pebble only works with Hermes agents, a specific open-source AI agent framework. Support for other agent hosts is planned but not yet available. The project ships as a single self-contained binary that bundles the web app and a Hermes plugin together. The repository is MIT licensed.

Copy-paste prompts

Prompt 1
I have a Hermes AI agent running locally. Show me how to configure Pebble to connect to it and start a chat session.
Prompt 2
Using the Pebble project as a reference, write a React component that streams server-sent events from an AI agent and displays each token as it arrives.
Prompt 3
I want the AI agent in Pebble to push an interactive form into the chat. Write the agent code that renders a form block the user can fill out.
Prompt 4
Explain how Pebble uses Zustand to manage conversation state across multiple sessions, and show me how to add a new session type.
Open on GitHub → Explain another repo

← skyf0xx on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.