# SnipRender

> A playground for small web projects. A project is a React app, a plain
> HTML/CSS/JS page or a Markdown document, held as files and run in a sandboxed
> preview in the browser. Projects belong to an account (sign-in with Google).
> Agents work on the same projects through an MCP server authenticated with an
> access token.

The unit is a snip — a demo, a single page, one component — not an application.
The web interface is built for people; the MCP server is the supported way for
an agent to read and change someone's projects.

## Connect an agent

- [Access tokens](https://sniprender.com/account/tokens): where the account
  owner creates a token. Sign in with Google, open Account → Access tokens, name
  the token and pick an expiry (30 days, 90 days, 1 year or never). The value
  starts with `snp_` and is shown once — only a hash is stored. The same page
  copies a ready-made client config, lists existing tokens and revokes them.
- [MCP endpoint](https://sniprender.com/mcp): Streamable HTTP transport, POST
  only, JSON responses. The server keeps no session and pushes nothing, so GET
  (SSE stream) and DELETE (end session) answer 405. Protocol versions
  2025-06-18, 2025-03-26 and 2024-11-05. Authenticate with
  `Authorization: Bearer <token>`; a browser session is not accepted.

Claude Code:

```
claude mcp add --transport http sniprender https://sniprender.com/mcp \
  --header "Authorization: Bearer snp_..."
```

Clients configured with an `mcpServers` JSON file (the config the tokens page
copies):

```json
{
  "mcpServers": {
    "sniprender": {
      "type": "http",
      "url": "https://sniprender.com/mcp",
      "headers": { "Authorization": "Bearer snp_..." }
    }
  }
}
```

## MCP tools

Twelve tools. Every tool acts as the user who owns the token. `tools/list` on a
connected client is the authoritative list.

- `list_projects`: the caller's projects, newest first.
- `create_project`: a new project seeded with the starter files for its type —
  `html`, `react` or `markdown`. The type is fixed at creation.
- `get_project`: one project by id.
- `update_project`: renames a project; it changes nothing else.
- `delete_project`: deletes a project and every file in it. Irreversible.
- `list_files`: every file in a project, without content.
- `read_file`: one file's content.
- `create_file`: adds a file.
- `update_file`: replaces a file's content, its path, or both.
- `delete_file`: removes a file.
- `check_project`: checks a project's files without running them — syntax
  errors, imports and references that resolve to no file, unpinned packages,
  missing anchors, duplicate ids, a missing charset, invalid JSON.
- `get_preview_console`: what the browser console showed on the project's
  preview and shared page — errors, warnings, logs, failed resources. Kept for
  24 hours; collected only while a page of the project is open.

Package search is part of the editor; the MCP server has no tool for it.

## Projects

- React: a React application, starting at `index.tsx`, seeded with a
  `package.json`.
- HTML/CSS/JS: plain web development with no build step, starting at
  `index.html`.
- Markdown: a document rather than a program, starting at `README.md`.
- Files and folders are addressed by project-relative paths with forward
  slashes (`src/App.tsx`). There is no shell and no build step to run.
- Images can be uploaded and referenced from the code. How large an upload
  can be depends on the plan: on Free, 2 MB per file and 10 MB per batch.
- Any project that declares dependencies can import npm packages. They resolve
  through a mirror on this site with immutable caching, so a preview does not
  fetch from the public internet while it runs.

## Previews

- A preview runs the project — or renders it, for Markdown — on an origin
  separate from the application (`<code>.sniprender.net`), so page code cannot
  reach the session or the API of the site.
- A preview is opened by the signed-in owner with a short-lived token. Project
  files reach it from the owner's own tab, not over the network.
- The editor's console panel shows `console.log` output, runtime errors and
  unhandled promise rejections from the preview.

## Plans

- Every account is on the Free plan: up to 10 projects, 50 MB of storage, 3
  shared projects at a time and 2 active access tokens. React Sandbox projects,
  custom share addresses, registry components and tokens that never expire are
  not included.
- A Pro plan with higher limits is planned but not on sale yet.
- A request over a limit is refused with HTTP 403 and `errorCode: "plan_limit"`;
  an MCP tool returns the same message as a tool error. Reaching a limit never
  removes anything that already exists.
- [Plan](https://sniprender.com/account/plan): the signed-in user's plan, usage
  and a comparison of plans.

## What SnipRender is not

- Not a host. A preview is for the person building the project: it opens only
  with a short-lived token issued to the signed-in owner.
- Not a way to run arbitrary code. Code runs in the viewer's own browser, inside
  the preview sandbox, as part of a project someone is building here.
- Not a proxy. The package mirror fetches only from an allowlist of package
  upstreams.
- Not sized for large codebases. Plans cap projects and storage, but the
  editor and the preview both run in the viewer's browser, so a project with
  hundreds of modules gets slow long before it meets a limit.

## Optional

- [SnipRender](https://sniprender.com/): the editor itself. Requires sign-in.
- [Terms of Service](https://sniprender.com/terms),
  [Privacy Policy](https://sniprender.com/privacy),
  [Acceptable Use Policy](https://sniprender.com/acceptable-use) and
  [Cookie Policy](https://sniprender.com/cookies): public, no sign-in.