NoiceSS

KO | EN

gitlite — search

#openai #graphql #generative-ai #mysql #privacy #chatgpt #c #agent #artificial-intelligence #cpp

(★ 9)

Make your screenshots look absolutely stunning.

File Explorer

ZIP Download

- noicess-mcp.mjs
- - abstract-waves.webp
  - apple-retina.webp
  - blue-abstract.webp
  - chosen-nature-1.webp
  - chosen-nature-10.webp
  - chosen-nature-11.webp
  - chosen-nature-12.webp
  - chosen-nature-2.webp
  - chosen-nature-3.webp
  - chosen-nature-4.webp
  - chosen-nature-5.webp
  - chosen-nature-6.webp
  - chosen-nature-7.webp
  - chosen-nature-8.webp
  - chosen-nature-9.webp
  - dark-green-8k.webp
  - emerald-dark.webp
  - iridescent-spheres.webp
  - macbook-abstract.webp
  - macos-big-sur-dark.webp
  - macos-big-sur-light.webp
  - macos-dark-4k.webp
  - macos-golden.webp
  - macos-monterey-dark.webp
  - macos-monterey-wwdc.webp
  - macos-sequoia-alt-1.webp
  - macos-sequoia-alt-2.webp
  - macos-sequoia-alt-3.webp
  - macos-sequoia-alt-4.webp
  - macos-sequoia-alt-5.webp
  - macos-sequoia.webp
  - macos-tahoe-dark.webp
  - macos-tahoe-light.webp
  - raycast-blob-red.webp
  - raycast-blob.webp
  - raycast-blue-distortion-1.webp
  - raycast-blue-distortion-2.webp
  - raycast-chromatic-dark-1.webp
  - raycast-chromatic-dark-2.webp
  - raycast-cube-prod.webp
  - raycast-glaze-1.webp
  - raycast-glaze-2.webp
  - raycast-loupe-mono-dark.webp
  - raycast-loupe.webp
  - raycast-mono-dark-distortion-1.webp
  - raycast-mono-dark-distortion-2.webp
  - raycast-red-distortion-1.webp
  - raycast-red-distortion-2.webp
  - raycast-red-distortion-3.webp
  - raycast-red-distortion-4.webp
  - surface-abstract.webp
- ai.txt
- anime-city-sunset.jpg
- anime-cyberpunk-neon.jpg
- anime-ghibli-valley.jpg
- apple-icon.png
- favicon.png
- feed.xml
- humans.txt
- icon-192x192.png
- icon-512x512.png
- llms.txt
- noice-og-old.webp
- noice-og.webp
- test-mockup.ts
- - globals.css
  - layout.tsx
  - manifest.ts
  - page.module.css
  - page.tsx
  - robots.ts
  - sitemap.ts
  - sw.ts
- - constants.ts
  - utils.ts
- - compositor.ts
  - embed.ts
  - index.ts
  - presets.ts
  - server.ts
  - types.ts
  - url.ts
- - useStudioStore.ts
.env.example
.gitignore
AGENTS.md
CLAUDE.md
components.json
CONTRIBUTING.md
eslint.config.mjs
LICENSE
MCP.md
next.config.ts
package-lock.json
package.json
postcss.config.mjs
README.md
tsconfig.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**Turn raw screenshots into beautiful mockups in your browser or directly from your AI agent.**

[![Try it Live](https://img.shields.io/badge/Live_Studio-noicess.fun-000000?style=for-the-badge)](https://noicess.fun)

---

## What is NoiceSS?

Raw screenshots look boring in documentation, pitch decks, and social posts. Making them look great in Figma or Photoshop takes too long.

**NoiceSS gives you two simple ways to fix this:**

1. **The Web Studio ([noicess.fun](https://noicess.fun))**: Drop an image into your browser, click presets for 3D tilt, macOS window frames, wallpapers, or frosted borders, and download 4K Retina images instantly. Works completely offline as a PWA.
2. **The MCP Server for AI Agents**: Hook NoiceSS into **Cursor, Claude, Windsurf, Cline, Antigravity, or Zed**. Just ask your AI agent in plain English to transform any image in your codebase into a polished mockup or responsive 3D website component.

```
"Make this screenshot 16:9 with a blurred background, macOS frame, and a small watermark"
                                   │
                                   ▼
          [Plain Screenshot]  ──▶  [NoiceSS MCP]  ──▶  [Polished Hero Mockup]
```

---

## Quick Comparison

---

## Model Context Protocol (MCP) Quickstart

Let your AI agent make your screenshots look great without you ever leaving your editor.

### Why use the MCP server?

- **Zero Cloud Fees**: Runs locally using Node and Sharp. No OpenAI API keys, no subscriptions, no credit cards.
- **Total Privacy**: Your proprietary product screenshots and code never get uploaded anywhere.
- **Pixel-Perfect Matches**: Uses the exact same look as the web studio with real frosted glass blur, macOS traffic lights, smooth shadows, and badges.
- **Generates Code Too**: Ask for Tailwind CSS or React components with 3D tilt ready to drop straight into your landing page.

### 1. Test it in 10 seconds

Inside this project folder:

```bash
# Start the MCP server over stdio
npm run mcp
```

### 2. Connect Your AI Agent

You can connect NoiceSS MCP directly from GitHub with zero cloning or manual downloads required:

#### Cursor (`.cursor/mcp.json`)
```json
{
  "mcpServers": {
    "noicess": {
      "command": "npx",
      "args": ["-y", "github:ishivamgaur/noiceSS"]
    }
  }
}
```

#### Claude Desktop (`claude_desktop_config.json`)
```json
{
  "mcpServers": {
    "noicess": {
      "command": "npx",
      "args": ["-y", "github:ishivamgaur/noiceSS"]
    }
  }
}
```

#### Windsurf (`~/.codeium/windsurf/mcp_config.json`)
```json
{
  "mcpServers": {
    "noicess": {
      "command": "npx",
      "args": ["-y", "github:ishivamgaur/noiceSS"]
    }
  }
}
```

#### VS Code (Cline / Roo Code)
```json
{
  "mcpServers": {
    "noicess": {
      "command": "npx",
      "args": ["-y", "github:ishivamgaur/noiceSS"]
    }
  }
}
```

#### Google Antigravity / Gemini CLI
```bash
agy mcp add noicess npx -y github:ishivamgaur/noiceSS
```

#### Zed (`~/.config/zed/settings.json`)
```json
{
  "context_servers": {
    "noicess": {
      "command": {
        "path": "npx",
        "args": ["-y", "github:ishivamgaur/noiceSS"]
      }
    }
  }
}
```

*(Note: If working locally inside this cloned repository, you can also point directly to `"args": ["bin/noicess-mcp.mjs"]`).*

---

## What Can You Ask Your Agent To Do?

Once connected, just talk to your agent naturally:

#### 1. Blurred Background + Frosted Glass Border
> *"Take `public/preview.png`, use the screenshot itself as a blurred background with 15px blur, 16:9 ratio, 4px frosted glass border, and add a small 'made with mcp' watermark on the top right. Save it to `public/hero.webp`."*

#### 2. macOS Window Frame on Curated Wallpaper
> *"Take `screenshots/app.png`, put it on the macOS Sequoia wallpaper with 10px blur, show the macOS close/minimize buttons with window title 'App Preview', and export as a 2x retina WebP."*

#### 3. Ready-To-Paste Landing Page Code
> *"Generate responsive 3D Tailwind CSS code for `public/hero.png` using the isometric-left perspective and Safari URL bar so I can paste it into my hero section."*

#### 4. Fine-Tune in the Browser
> *"Generate a NoiceSS Studio link for this screenshot with my current settings so I can play with the 3D tilt in the browser."*

> [!TIP]
> Read **[`MCP.md`](MCP.md)** for the complete list of all 9 MCP tools, background IDs, gradients, and custom options.

---

## Features

- **macOS & Safari Frames**: Realistic title bars with red, yellow, green traffic light buttons and customizable URL bars.
- **3D Tilting**: Rotate on X, Y, and Z axes with perspective depth to give your screenshot a sleek presentation angle.
- **Frosted Glass Borders**: Translucent glass framing that samples and blurs whatever is behind it.
- **Blurred Screenshot Backdrops**: Use your own screenshot as an ambient background, smoothly blurred with zero edge leakage.
- **51 Wallpaper Presets**: Includes macOS system wallpapers, Raycast backgrounds, nature landscapes, and clean gradient fills.
- **Watermark Badge**: Add a floating frosted glass badge (`@username` or custom text) in any corner, with small, medium, or large sizes.
- **Offline PWA**: Installable on desktop or mobile. Works without internet once opened.
- **100% Private**: Zero analytics on your images. All browser processing happens on client canvas, and all MCP processing happens locally in Node.

---

## Export Options

- **Formats**: WebP (recommended for small size & high quality), PNG (lossless), and JPEG.
- **Scales**: 1x (standard), 2x (Retina displays), or 4x (Ultra HD / print).
- **Transparency**: Clean transparent background support for PNG and WebP exports.

---

## Getting Started (Local Development)

### Prerequisites

- **Node.js** 18 or newer
- **npm**, pnpm, or yarn

### Installation

```bash
# Clone the repository
git clone https://github.com/ishivamgaur/noiceSS.git
cd noiceSS

# Install dependencies
npm install

# Start the web app
npm run dev

# Or run the MCP server
npm run mcp
```

Visit [http://localhost:3000](http://localhost:3000) in your browser.

---

## Tech Stack

- **Framework**: Next.js 15 (App Router)
- **UI & Components**: React 19, Tailwind CSS v4, Radix UI, Lucide Icons
- **AI / MCP**: `@modelcontextprotocol/sdk`
- **Image Compositor**: Sharp
- **State Management**: Zustand
- **Offline Engine**: Serwist PWA

---

## Contributing

Contributions are welcome! Whether it's adding new wallpaper presets, improving the compositor, or reporting bugs:

1. Check out the [Contributing Guide](CONTRIBUTING.md).
2. Create a branch: `git checkout -b feat/my-improvement`.
3. Commit your changes: `git commit -m "feat: add new gradient preset"`.
4. Open a Pull Request.

---

## License

Open-source under the **MIT License**. See [`LICENSE`](LICENSE) for details.

---

<div align="center">
  <sub>Built and maintained by <a href="https://github.com/ishivamgaur">@ishivgaur</a></sub>
</div>

NoiceSS

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

NoiceSS

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README