The Problem
AI agents are getting powerful, but they're trapped in text. When they need to show you data, visualizations, or interactive tools — they're stuck.
Agents need a way to create UI.
The Solution
A weblet is a portable web app that agents can generate, launch with data, and communicate with.
The skill provides the brain. The weblet provides the face.
Dead Simple Structure
Every weblet is just a folder with an APP.md manifest and your code.
my-app/
├── APP.md # Describes your app
├── index.html # Entry point
└── (your code) # Whatever you needOpen index.html in a browser, and it runs. Want TypeScript? Use Bun — it transpiles on the fly. Want to share it? Zip the folder.
Why Weblets?
Agent-Native
Agents can pass data in and receive events back via a simple convention.
AI-Generatable
Simple structure that AI assistants can create correctly every time.
Portable
Self-contained folder. Zip it, git it, or deploy anywhere.
Works Standalone
Gracefully degrades when no agent is present. Always functional.
Zero Build Step
No webpack, no bundler. Just files that run.
TypeScript Ready
Use Bun runtime for native TypeScript on the fly.
How It Works
When an agent launches a weblet, it injects context via window.__AGENT_CONTEXT__. The weblet reads this data and can emit events back. Simple JavaScript — no framework required.
// Check if launched by an agent
if (window.__AGENT_CONTEXT__) {
const { data, emit } = window.__AGENT_CONTEXT__;
// Use data passed by the agent
renderChart(data.items);
// Emit events back to the agent
emit('item-selected', { id: selectedId });
}Quick Start
Open Claude Code (or your AI assistant) and say:
Build me a weblet that converts markdown to HTML.
Use browser runtime, no external dependencies.
Read the weblet spec:
https://raw.githubusercontent.com/jeffrschneider/weblet/master/specifications/Weblet-Specification-V1-0-0.mdFor Platform Builders
Building an app that generates weblets? Use the programmatic API:
import { validateWeblet, serveWeblet, captureScreenshots } from 'weblet';
// Validate, serve, and screenshot in a few lines
const server = await serveWeblet('./my-app');
const shots = await captureScreenshots('./my-app', { output: './previews' });
await server.stop();Integration Guide — full API reference, options, and use cases.
Examples
Learn by example. From minimal to full-featured: