Paper

https://paper.design/docs
Admin
Paper is a design and vector editing tool built on web standards that integrates design files...
Tokens:4,724
Snippets:82
Trust Score:9.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Connect to Cursor via Plugin

Source: https://paper.design/docs/mcp

Install the Paper Desktop plugin directly within the Cursor agent panel.

```text
/add-plugin paper-desktop
```

--------------------------------

### Connect to Claude Code via CLI Plugin

Source: https://paper.design/docs/mcp

Add the custom marketplace and install the Paper Desktop plugin using terminal commands.

```text
/plugin marketplace add paper-design/agent-plugins
```

```text
/plugin install paper-desktop@paper
```

--------------------------------

### Configure CORS in Django

Source: https://paper.design/docs/support/snapshot-local-images

Requires the django-cors-headers package to be installed and configured in settings.

```python
INSTALLED_APPS = [..., "corsheaders"]
MIDDLEWARE = ["corsheaders.middleware.CorsMiddleware", ...]
CORS_ALLOWED_ORIGINS = ["https://app.paper.design"]
```

--------------------------------

### Initializing Git Repository

Source: https://paper.design/docs/mcp

Instruct the agent to initialize a Git repository and commit the current project state.

```text
Can you add git to this folder and commit the changes we've made so far?
```

--------------------------------

### Connect to Copilot via mcp.json

Source: https://paper.design/docs/mcp

Configure the MCP server for Copilot by creating a configuration file in the .vscode directory.

```json
{
  "servers": {
    "paper": {
      "type": "http",
      "url": "http://127.0.0.1:29979/mcp"
    }
  }
}
```

--------------------------------

### Implementing Responsive Breakpoints

Source: https://paper.design/docs/mcp

Ask the agent to apply responsive design breakpoints based on selected frames in Paper.

```text
Can you add some responsive breakpoints to the website based on the frames I have selected in Paper? Each frame is a different breakpoint.
```

--------------------------------

### Requesting Website Generation from Design

Source: https://paper.design/docs/mcp

Prompt the agent to generate a website using a selected frame in Paper with React and Tailwind.

```text
I'd like you to build a website in this folder using the hero section I have selected in Paper. Use React and Tailwind for the styling.
```

--------------------------------

### Connect to Claude Desktop Manually

Source: https://paper.design/docs/mcp

Add the Paper MCP server configuration to the Claude Desktop config file.

```json
"mcpServers": {
    "paper": {
      "command": "npx",
      "args": ["mcp-remote", "http://127.0.0.1:29979/mcp"]
  }
}
```

--------------------------------

### Connect to Antigravity via mcp_config.json

Source: https://paper.design/docs/mcp

Update the Antigravity MCP configuration file with the Paper server URL.

```json
{
  "mcpServers": {
    "paper": {
      "serverUrl": "http://127.0.0.1:29979/mcp"
    }
  }
}
```

--------------------------------

### Configure OpenCode MCP connection

Source: https://paper.design/docs/mcp

Add this configuration to your opencode.json file to enable the Paper MCP server.

```json
{
  "mcp": {
    "paper": {
      "type": "remote",
      "url": "http://127.0.0.1:29979/mcp",
      "enabled": true
    }
  }
}
```

--------------------------------

### Connect to Claude Code via CLI Manually

Source: https://paper.design/docs/mcp

Manually register the MCP server using the Claude CLI.

```text
claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user
```

--------------------------------

### Tool Reference

Source: https://paper.design/docs/mcp

List of available tools exposed by the Paper MCP server for interacting with design files.

```APIDOC
## Tool Reference

- **get_basic_info**: Retrieves file name, page name, node count, and list of artboards with dimensions.
- **get_selection**: Returns details about currently selected nodes (IDs, names, types, size, artboard).
- **get_node_info**: Retrieves details for a node by ID (size, visibility, lock, parent, children, text content).
- **get_children**: Returns direct children of a node (IDs, names, types, child counts).
- **get_tree_summary**: Provides a compact text summary of a node’s subtree hierarchy with an optional depth limit.
- **get_screenshot**: Returns a screenshot of a node by ID as a base64 image (optional scale 1x or 2x).
- **get_jsx**: Generates JSX for a node and its descendants in Tailwind or inline-styles format.
- **get_computed_styles**: Retrieves computed CSS styles for one or more nodes (batch).
- **get_fill_image**: Returns image data from a node that has an image fill (base64 JPEG).
- **get_font_family_info**: Checks font family availability (user’s machine or Google Fonts) and inspects weights and styles.
- **get_guide**: Retrieves guided workflows for specific topics (e.g., figma-import).
- **export**: Exports nodes as image or video files (PNG, JPG, SVG, MP4, etc.) with support for format and scale overrides.
- **create_artboard**: Creates a new artboard with optional name and styles (width, height).
- **write_html**: Parses HTML to add or replace nodes (insert-children or replace mode).
- **set_text_content**: Sets text content of one or more Text nodes (batch).
- **rename_nodes**: Renames one or more layers (batch).
- **duplicate_nodes**: Deep-clones nodes and returns new IDs and a descendant ID map.
- **move_nodes**: Repositions or reparents existing nodes while preserving IDs, supporting sibling-relative or parent-absolute placement.
- **update_styles**: Updates CSS styles on one or more nodes.
- **delete_nodes**: Deletes one or more nodes and all their descendants.
- **finish_working_on_nodes**: Clears the working indicator from artboards.
```

--------------------------------

### Configure CORS in Vite, Remix, or SvelteKit

Source: https://paper.design/docs/support/snapshot-local-images

Configures the development server CORS settings in the vite.config file.

```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    cors: {
      origin: 'https://app.paper.design',
    },
  },
});
```

--------------------------------

### Configure CORS in Astro

Source: https://paper.design/docs/support/snapshot-local-images

Requires both security settings in Astro and CORS configuration in Vite.

```javascript
import { defineConfig } from 'astro/config';

export default defineConfig({
  security: {
    allowedDomains: [{ hostname: 'app.paper.design' }],
  },
  vite: {
    server: {
      cors: { origin: 'https://app.paper.design' },
    },
  },
});
```

--------------------------------

### Configure CORS in Fastify

Source: https://paper.design/docs/support/snapshot-local-images

Uses the @fastify/cors plugin to register CORS support.

```javascript
import Fastify from 'fastify';
import cors from '@fastify/cors';

const app = Fastify();
await app.register(cors, { origin: 'https://app.paper.design' });
```

--------------------------------

### Clone an existing node with x-paper-clone

Source: https://paper.design/docs/paste/html

Use this custom element to duplicate an existing node in the file by its ID.

```html
<x-paper-clone node-id="…">
```

--------------------------------

### Configure CORS in Rails

Source: https://paper.design/docs/support/snapshot-local-images

Requires the rack-cors gem and middleware configuration.

```ruby
gem "rack-cors"
```

```ruby
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "https://app.paper.design"
    resource "*", headers: :any, methods: [:get, :options]
  end
end
```

--------------------------------

### Configure CORS in Next.js

Source: https://paper.design/docs/support/snapshot-local-images

Sets headers per route via the next.config.js file.

```javascript
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: 'https://app.paper.design',
          },
          { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS' },
          { key: 'Vary', value: 'Origin' },
        ],
      },
    ];
  },
};
```

--------------------------------

### Set layer properties with custom attributes

Source: https://paper.design/docs/paste/html

Apply these attributes to elements to control layer naming, locking, and visibility upon import.

```html
layer-name="…"
```

```html
data-paper-locked
```

```html
hidden
```

--------------------------------

### Configure CORS in Nuxt

Source: https://paper.design/docs/support/snapshot-local-images

Configures both Vite server settings and route rules for headers.

```typescript
export default defineNuxtConfig({
  vite: {
    server: {
      cors: { origin: 'https://app.paper.design' },
    },
  },
  routeRules: {
    '/**': {
      headers: {
        'Access-Control-Allow-Origin': 'https://app.paper.design',
      },
    },
  },
});
```

--------------------------------

### Configure CORS in Flask

Source: https://paper.design/docs/support/snapshot-local-images

Uses the flask-cors extension to enable cross-origin requests.

```python
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["https://app.paper.design"])
```

--------------------------------

### Configure CORS in Webpack

Source: https://paper.design/docs/support/snapshot-local-images

Sets the Access-Control-Allow-Origin header in the devServer configuration.

```javascript
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': 'https://app.paper.design',
    },
  },
};
```

--------------------------------

### Configure CORS in Express

Source: https://paper.design/docs/support/snapshot-local-images

Uses the cors middleware to allow requests from the specified origin.

```javascript
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors({ origin: 'https://app.paper.design' }));
```
Tokens:
Raw