Webstudio

https://github.com/webstudio-is/webstudio.git
Admin
Webstudio is an open-source visual development platform empowering developers, designers, and teams...
Tokens:218,245
Snippets:2,475
Trust Score:9.2
License:AGPL-3.0
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and Enable Nginx

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/self-hosting/vps-with-docker.md

Installs the Nginx web server and ensures it starts on system boot.

```bash
sudo apt install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx
```

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

### Install and Enable Docker

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/self-hosting/vps-with-docker.md

Installs the Docker engine and configures it to start automatically on boot.

```bash
curl -fsSL https://get.docker.com | sudo sh
sudo systemctl enable docker
sudo systemctl start docker
```

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

### components.get argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for retrieving a specific component.

```json
{
  "component": "@webstudio-is/sdk-components-react-radix:Select"
}
```

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

### meta.get-more-tools argument examples

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Examples for retrieving additional tools or updating styles.

```json
{
  "tools": [
    "insert-fragment"
  ]
}
```

```json
{
  "tools": [
    "insert-component"
  ]
}
```

```json
{
  "brief": "update-styles"
}
```

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

### Install and verify Webstudio CLI

Source: https://github.com/webstudio-is/webstudio/blob/main/packages/cli/README.md

Install the Webstudio CLI globally and confirm the installation by checking the CLI version.

```bash
npm install -g webstudio@latest
```

```bash
webstudio --version
```

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

### import argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for importing project data to a destination URL.

```json
{
  "to": "https://p-destination-project-id.wstd.dev/?authToken=destination-token"
}
```

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

### upload-assets argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for uploading multiple assets at once.

```json
{
  "assets": [
    {
      "name": "hero.png",
      "type": "image",
      "format": "png",
      "folderId": "folder-id",
      "meta": {
        "width": 1200,
        "height": 630
      }
    }
  ],
  "assetsDir": ".webstudio/assets"
}
```

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

### Install NVM

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/cli.md

Install NVM using the official install script.

```sh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
```

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

### components.list argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for listing components by source and document type.

```json
{
  "source": "all",
  "documentType": "html"
}
```

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

### meta.guide argument examples

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Examples for the meta.guide tool, used for defining task scope and workflow.

```json
{
  "brief": "Create a pricing page and style the hero",
  "taskScope": "visual-change",
  "workflow": "general"
}
```

```json
{
  "brief": "Inventory custom code without changing the project",
  "taskScope": "read-only-audit",
  "workflow": "general"
}
```

```json
{
  "brief": "Recreate a supplied design as a responsive page",
  "taskScope": "visual-change",
  "workflow": "design-input"
}
```

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

### components.find argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for finding components based on a brief description.

```json
{
  "brief": "radix tabs dialog select"
}
```

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

### components.coverage-plan argument examples

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Examples for planning component coverage with various document types and details.

```json
{
  "documentType": "html"
}
```

```json
{
  "documentType": "xml",
  "detail": "roots"
}
```

```json
{
  "detail": "full"
}
```

```json
{
  "detail": "roots",
  "offset": 0,
  "limit": 20
}
```

```json
{
  "detail": "parts",
  "namespace": "@webstudio-is/sdk-components-react-radix"
}
```

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

### create-asset-folder argument examples

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Examples for creating asset folders, optionally within a parent folder.

```json
{
  "name": "Marketing"
}
```

```json
{
  "name": "Photos",
  "parentId": "marketing-folder-id"
}
```

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

### upload-asset argument examples

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Examples for uploading different types of assets to a specified directory.

```json
{
  "asset": {
    "name": "Rajdhani-SemiBold.woff2",
    "type": "font",
    "format": "woff2",
    "meta": {
      "family": "Rajdhani",
      "style": "normal",
      "weight": 600
    }
  },
  "assetsDir": ".webstudio/assets"
}
```

```json
{
  "asset": {
    "name": "hero.png",
    "type": "image",
    "format": "png",
    "folderId": "folder-id",
    "meta": {
      "width": 1200,
      "height": 630
    }
  },
  "assetsDir": ".webstudio/assets"
}
```

```json
{
  "asset": {
    "name": "hero.png",
    "type": "image",
    "format": "png",
    "meta": {
      "width": 1200,
      "height": 630
    },
    "force": true
  },
  "assetsDir": ".webstudio/assets"
}
```

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

### components.coverage-insert-next argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for inserting the next component in a coverage plan.

```json
{
  "pagePath": "/design-system",
  "parentInstanceId": "root-instance-id"
}
```

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

### AnimateChildren fade-up on entry JSX example

Source: https://github.com/webstudio-is/webstudio/blob/main/packages/cli/src/docs/manual-llm.md

JSX example of an Animation Group (AnimateChildren) with a view timeline that fades up a section on viewport entry. Uses fill: 'backwards' with offset 0 keyframe for the starting state, and ws:style for the final visual state.

```tsx
<AnimateChildren
  action={{
    type: "view",
    axis: "block",
    animations: [
      {
        name: "Fade up on entry",
        timing: {
          fill: "backwards",
          rangeStart: ["entry", { type: "unit", value: 0, unit: "%" }],
          rangeEnd: ["entry", { type: "unit", value: 100, unit: "%" }],
        },
        keyframes: [
          {
            offset: 0,
            styles: {
              opacity: { type: "unit", value: 0, unit: "number" },
              translate: {
                type: "tuple",
                value: [
                  { type: "unit", value: 0, unit: "number" },
                  { type: "unit", value: 24, unit: "px" },
                ],
              },
            },
          },
        ],
      },
    ],
  }}
>
  <section
    ws:style={css`
      display: grid;
      gap: 16px;
      padding: 48px;
      border-radius: 24px;
      background: #111827;
      color: white;
    `}
  >
    <h2>Launch metrics</h2>
    <p>A polished card that fades up as it enters the viewport.</p>
  </section>
</AnimateChildren>
```

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

### preview.start

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Starts a preview session.

```json
{
  "source": "session"
}
```

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

### Pass Playwright arguments to Builder E2E

Source: https://github.com/webstudio-is/webstudio/blob/main/apps/builder/e2e/README.md

Pass normal Playwright Test arguments after `--`. A lightweight Playwright discovery pass validates the selection before Docker, database migrations, browser installation, or the Builder build starts. A filter that matches no tests fails without starting the test environment.

```sh
pnpm e2e:builder -- --grep "Builder can copy, duplicate, and delete a page"
```

```sh
pnpm e2e:builder -- 'apps/builder/e2e/tests/pages-actions.[shard-5].e2e.ts'
```

```sh
pnpm e2e:builder -- --debug --grep "Builder can copy"
```

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

### Initialize project for automation

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/cli.md

Use the init command with a share link and JSON output for automated workflows.

```bash
npx webstudio init --link "<share-link>" --json
```

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

### download-asset argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for downloading an asset by its ID.

```json
{
  "assetId": "asset-id"
}
```

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

### Complete CLI deployment workflow

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/self-hosting/netlify.md

A step-by-step process for creating, building, and deploying a Webstudio project to Netlify.

```bash
# 1. Create a Webstudio project folder
npx webstudio

# Follow prompts: enter folder name, paste your Share Link

# 2. Navigate to your project
cd your-project-folder

# 3. Install dependencies
npm install

# 4. Login to Netlify
npx netlify-cli login

# 5. Create a new Netlify site
npx netlify-cli sites:create

# 6. Build your project
npm run build

# 7. Deploy to preview URL (for testing)
npx netlify-cli deploy

# 8. Deploy to production (when ready)
npx netlify-cli deploy --prod
```

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

### refresh argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for refreshing specific namespaces.

```json
{
  "namespaces": [
    "pages",
    "instances",
    "styles"
  ]
}
```

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

### Check for NVM installation

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/cli.md

Verify if NVM is already installed on your system.

```sh
command -v nvm
```

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

### update-asset-folder argument examples

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Examples for updating asset folder properties.

```json
{
  "folderId": "folder-id",
  "values": {
    "name": "Brand"
  }
}
```

```json
{
  "folderId": "folder-id",
  "values": {
    "parentId": null
  }
}
```

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

### templates.list argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for listing templates by document type.

```json
{
  "documentType": "html"
}
```

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

### Set up and run SQL tests with pgtap

Source: https://github.com/webstudio-is/webstudio/blob/main/packages/postgrest/README.md

Sets up the pgtap extension for SQL testing, creates a new test file, and runs the tests. The first SQL block initializes the pgtap schema and extension. The second command creates a new test file named 'latest-builds'. The third runs the tests via Docker or the package's db-test script.

```sql
CREATE SCHEMA IF NOT EXISTS pgtap;
DROP EXTENSION pgtap;
CREATE EXTENSION IF NOT EXISTS pgtap WITH SCHEMA pgtap;
```

```bash
pnpx supabase test new latest-builds
```

```shell
docker run --rm --network host -v ./supabase/tests:/tests -e PGOPTIONS='--search_path=pgtap,public' supabase/pg_prove:3.36 pg_prove -d "postgresql://postgres:pass@localhost/webstudio" --ext .sql /tests
# OR
pnpm run db-test
```

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

### verify-font-assets argument example

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/mcp.md

Example for verifying font assets by their IDs.

```json
{
  "assetIds": [
    "asset-regular",
    "asset-bold"
  ]
}
```

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

### Install Certbot

Source: https://github.com/webstudio-is/webstudio/blob/main/docs/university/self-hosting/vps-with-docker.md

Installs Certbot and the Nginx plugin for SSL certificate management.

```bash
sudo apt install -y certbot python3-certbot-nginx
```

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

### Build and start with Wrangler

Source: https://github.com/webstudio-is/webstudio/blob/main/fixtures/webstudio-cloudflare-template/WS_CF_README.md

Build the app for production and then start it using Wrangler. These commands are run sequentially.

```sh
npm run build
```

```sh
npm run start
```

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

### Minimal Stdio Client Implementation

Source: https://github.com/webstudio-is/webstudio/blob/main/packages/cli/src/docs/manual-mcp.md

A minimal client setup that connects via stdio to the Webstudio CLI, handles logging notifications, and calls the meta.index tool.

```js
const client = new Client({ name: "webstudio-agent", version: "1.0.0" });

client.setNotificationHandler(
  LoggingMessageNotificationSchema,
  (notification) => {
    console.error(`[mcp] ${notification.params.data}`);
  }
);

const transport = new StdioClientTransport({
  command: "node",
  args: ["packages/cli/local.js", "mcp"],
  cwd: process.cwd(),
  stderr: "inherit",
});

await client.connect(transport);

const index = await client.callTool({
  name: "meta.index",
  arguments: {},
});
console.log(JSON.stringify(index.structuredContent, null, 2));

await client.close();
```
Tokens:
Raw