AI Usage

Create self-contained, editable websites — each running a single chunk of JavaScript — using AI. Generate them from a chat interface, directly from your terminal coding agent, or via an LLM API.

framejs.io/#?js=< will always run this javascript, forever>

The framejs Agent Skill (recommended)

framejs.io ships an Agent Skill — a portable SKILL.md folder that works across ~40 agent harnesses (Claude Code, Gemini CLI, Cursor, opencode, Goose, OpenAI Codex, pi, and more). It auto-routes by capability:

• Terminal / coding agents (can run a shell): generates the JavaScript, creates a short URL, prints it, and opens it in your browser.
• Chat / API agents (no shell): returns just the JavaScript to paste into the editor.

One skill covers creating from a prompt, modifying an existing short URL, and visualizing local data files.

• Skill: /skill/framejs/SKILL.md
• Bundle: /skill/framejs.tar.gz

Install

A skill is just a framejs/ folder containing SKILL.md. Drop it into your harness's skills directory.

One-liner (installs into ~/.claude/skills by default; pass any other harness's skills directory as an argument):

curl -fsSL https://framejs.io/skill/install.sh | sh
# or target another harness — pass its skills directory (see the table below):
curl -fsSL https://framejs.io/skill/install.sh | sh -s -- <SKILLS_DIR>

Re-run any time to update. Prefer to do it by hand? Unpack the bundle yourself:

mkdir -p <SKILLS_DIR> && curl -fsSL https://framejs.io/skill/framejs.tar.gz | tar xz -C <SKILLS_DIR>

Harness	Skills directory	Notes
Claude Code	~/.claude/skills/ (personal) or <project>/.claude/skills/	docs
Cursor	~/.cursor/skills/ or <project>/.cursor/skills/	docs
Gemini CLI	per Gemini CLI config	docs
opencode	per opencode config	docs
Goose	per Goose config	docs
OpenAI Codex	per Codex config	docs
pi	prompt-template / skills config	docs

Other harnesses: see the Agent Skills client list for each tool's skills directory, then point the one-liner at it.

Use it

Once installed, just describe what you want — the agent activates the skill when the task matches (a chart, plot, dashboard, animation, simulation, or visualizing a data file):

make a bouncing ball animation

visualize ./data.csv as a bar chart

Modify an existing app by pasting its short URL (top right Edit -> Short URL):

https://framejs.io/j/<sha256> make the background white

Legacy: the /js Claude Code command

The earlier Claude-Code-specific slash command still works and is generated from the same skill source:

mkdir -p ~/.claude/commands
curl -sL https://framejs.io/command-js.md -o ~/.claude/commands/js.md

Then /js make a bouncing ball animation, /js visualize ./data.csv, or /js https://framejs.io/j/<sha256> update the visualization.

New setups should prefer the Agent Skill above — it is portable across harnesses and avoids the Claude-Code-only install path.

Using an AI chat interface

From the component page:

1. Edit (top right) -> Copy button to copy the AI prompt
2. Paste into Claude, ChatGPT, or any LLM chat interface
3. Describe what you want
4. Copy the generated JavaScript back into the editor

From an AI API

Give the LLM the URL https://framejs.io/llms-prompt.md along with your request. The LLM responds with a JavaScript code block that you paste into the editor at framejs.io.

URL encoding format

The JavaScript is encoded into the URL hash using this scheme:

encodeURIComponent(code) → base64 → URL hash parameter

In JavaScript:

const encoded = btoa(encodeURIComponent(code));
const url = `https://framejs.io/#?js=${encoded}`;

For shareable links, prefer the short-URL API (POST https://framejs.io/api/shorten/json) over long hash URLs — see the skill's short-URL reference.

How it works

A shell-capable agent will:

1. Generate the browser JavaScript.
2. Create a short URL via POST https://framejs.io/api/shorten/json (the server handles encoding) and print the resulting https://framejs.io/j/<sha256>.
3. Open it in your browser.

No local files are written — the short URL is standalone and shareable. Every update creates a new short URL.

LLM integration files

All of these are generated from the single source of truth, the framejs skill at worker/static/skill/framejs/, so they never drift:

File	Purpose
/skill/framejs/SKILL.md	Portable Agent Skill — combines all use cases, auto-routes by capability
/command-js.md	Claude Code slash command — generates + opens a short URL
/llms-prompt.md	AI chat / API — outputs a JavaScript code block
/llms-claude-code.txt	CLI integration guide (short URLs, file uploads, coding guide)