### Integrate Repository with VCC

Source: https://context7.com/vrchat/packages/llms.txt

Developers can add the package repository to the VRChat Creator Companion (VCC) using either the direct listing URL or the vcc:// protocol for one-click installation.

```bash
# The listing URL for adding to VCC
https://vrchat.github.io/packages/index.json

# VCC protocol URL for direct integration (triggered by "Add to VCC" button)
vcc://vpm/addRepo?url=https%3A%2F%2Fvrchat.github.io%2Fpackages%2Findex.json
```

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

### Automate Build and Deployment with GitHub Actions

Source: https://context7.com/vrchat/packages/llms.txt

This workflow automates the build process for the package listing website. It triggers on updates to source.json, builds the listing using a custom action, and deploys the output to GitHub Pages.

```yaml
name: Build Repo Listing

on:
  workflow_dispatch:
  push:
    branches: main
    paths: source.json

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

env:
  listPublishDirectory: Website
  pathToCi: ci

jobs:
  build-listing:
    name: build-listing
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/checkout@v4
        with:
          repository: vrchat-community/package-list-action
          path: ${{env.pathToCi}}
          clean: false

      - name: Restore Cache
        uses: actions/cache@v4
        with:
          path: |
            ${{env.pathToCi}}/.nuke/temp
            ~/.nuget/packages
          key: ${{ runner.os }}-${{ hashFiles('**/global.json', '**/*.csproj') }}

      - name: Build Package Version Listing
        run: ${{env.pathToCi}}/build.cmd BuildMultiPackageListing --root ${{env.pathToCi}} --list-publish-directory $GITHUB_WORKSPACE/${{env.listPublishDirectory}}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ${{env.listPublishDirectory}}

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
```

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

### Display Package Metadata in Web Interface

Source: https://context7.com/vrchat/packages/llms.txt

Demonstrates the structure of a VRChat package object and how to bind its properties to DOM elements for display in a modal.

```javascript
const PACKAGES = {
  "com.vrchat.example-package": {
    name: "com.vrchat.example-package",
    displayName: "Example Package",
    description: "An example VRChat SDK package",
    version: "1.0.0",
    author: {
      name: "VRChat",
      url: "https://hello.vrchat.com",
    },
    dependencies: {
      "com.vrchat.base": "3.4.0",
    },
    keywords: ["vrchat", "sdk", "example"],
    license: "MIT",
    licensesUrl: "https://github.com/vrchat/packages/blob/main/LICENSE",
  },
};

const packageInfo = PACKAGES?.["com.vrchat.example-package"];
packageInfoName.textContent = packageInfo.displayName;
packageInfoId.textContent = packageInfo.name;
packageInfoVersion.textContent = `v${packageInfo.version}`;
packageInfoDescription.textContent = packageInfo.description;
packageInfoAuthor.textContent = packageInfo.author.name;
packageInfoAuthor.href = packageInfo.author.url;
```

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

### Implement Real-time Package Search

Source: https://context7.com/vrchat/packages/llms.txt

This JavaScript snippet filters the package grid in the web interface based on user input. It matches the search query against data attributes for package name and ID, toggling visibility accordingly.

```javascript
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', ({ target: { value = '' }}) => {
  const items = packageGrid.querySelectorAll('fluent-data-grid-row[row-type="default"]');
  items.forEach(item => {
    if (value === '') {
      item.style.display = 'grid';
      return;
    }
    if (
      item.dataset?.packageName?.toLowerCase()?.includes(value.toLowerCase()) ||
      item.dataset?.packageId?.toLowerCase()?.includes(value.toLowerCase())
    ) {
      item.style.display = 'grid';
    } else {
      item.style.display = 'none';
    }
  });
});
```

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

### Integrate Repository with VCC Protocol

Source: https://context7.com/vrchat/packages/llms.txt

Shows how to trigger the VRChat Creator Companion (VCC) application to add a repository using the vcc:// custom URL protocol.

```javascript
const LISTING_URL = "https://vrchat.github.io/packages/index.json";

const vccAddRepoButton = document.getElementById('vccAddRepoButton');
vccAddRepoButton.addEventListener('click', () => {
  window.location.assign(`vcc://vpm/addRepo?url=${encodeURIComponent(LISTING_URL)}`);
});

const rowAddToVccButtons = document.querySelectorAll('.rowAddToVccButton');
rowAddToVccButtons.forEach((button) => {
  button.addEventListener('click', () => {
    window.location.assign(`vcc://vpm/addRepo?url=${encodeURIComponent(LISTING_URL)}`);
  });
});
```

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

### Define Package Repository Metadata

Source: https://context7.com/vrchat/packages/llms.txt

The source.json file serves as the primary configuration for the package repository. It contains essential metadata such as the repository name, ID, author details, and links to the package source.

```json
{
  "name": "Official",
  "id": "com.vrchat.repos.official",
  "description": "Official Packages for the VRChat SDK",
  "author": {
    "email": "developer@vrchat.com",
    "name": "VRChat",
    "url": "https://hello.vrchat.com"
  },
  "infoLink": {
    "url": "http://github.com/vrchat/packages",
    "text": "View on GitHub"
  },
  "bannerUrl": "banner.png",
  "url": "https://vrchat.github.io/packages/index.json",
  "githubRepos": ["vrchat/packages"],
  "packages": []
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.