### Example npx Paths

Source: https://github.com/plasmicapp/plasmic/blob/master/ai/skills/plasmic-designer/README.md

Illustrates potential output from the 'which npx' command, showing different installation methods for Node.js.

```shell
/Users/you/.asdf/installs/nodejs/22.18.0/bin/npx
```

```shell
/Users/you/.nvm/versions/node/v22.11.0/bin/npx
```

```shell
/opt/homebrew/bin/npx
```

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

### Install and Run Verdaccio

Source: https://github.com/plasmicapp/plasmic/blob/master/CONTRIBUTING.md

Install Verdaccio globally and start the local npm registry server. This is used for locally testing packages.

```bash
yarn global add verdaccio
verdaccio &  # Runs the verdaccio server at http://localhost:4873
```

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

### Full Development Environment Setup

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Execute this command for a comprehensive setup if `yarn setup` does not resolve the problem.

```bash
yarn setup-all
```

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

### Start Development Server

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/cloudinary-custom-control/README.md

Run this command to start the Next.js development server.

```bash
yarn dev
```

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

### Setup Development Environment

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Use this command if the standard setup doesn't resolve issues. It ensures all development dependencies and configurations are correctly set up.

```bash
yarn setup
```

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

### Install Dependencies

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/cloudinary-custom-control/README.md

Run this command to install project dependencies.

```bash
yarn
```

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

### Install Dependencies and Build

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Run this command after fetching the latest changes to install dependencies and build the project.

```bash
yarn
make
```

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

### Run Plasmic Host Server Manually

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Start the host client, which acts as a proxy to the frontend server on port 3005, within the `wab` folder. This is part of manual server setup.

```bash
yarn host-server
```

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

### Start Plasmic Servers with PM2

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Start all Plasmic Studio development server processes using pm2 by running the `pm2 start` command with the `pm2-dev.config.js` configuration file in the `wab` directory.

```bash
cd wab
pm2 start pm2-dev.config.js
```

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

### Run Plasmic Frontend Dev Server Manually

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Start the frontend client development server for Plasmic Studio within the `wab` folder. This is part of manual server setup.

```bash
yarn start
```

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

### Run Plasmic Backend Manually

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Start the backend server for Plasmic Studio development within the `wab` folder. This is part of manual server setup and may require running other processes outside of `wab`.

```bash
yarn backend
```

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

### Install Dependencies for Plasmic Studio

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/00-getting-started.md

Installs project dependencies by running 'yarn install' in both the root directory and the './platform/wab' subdirectory.

```bash
yarn install
```

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

### Setup Plasmic WAB Repository

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/wab/CLAUDE.md

Run this command in the root directory to set up the repository and its dependencies.

```bash
cd ../.. && yarn setup-all
```

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

### Install and Run React DevTools

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Install the React DevTools globally and run it to debug Studio applications. This is necessary because the React Devtools Chrome extension does not work with cross-origin iframes.

```bash
yarn global add react-devtools
react-devtool
```

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

### Start and Sync Email Host

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/server/emails/README.md

Commands to start the email host and sync Plasmic codegen for email templates.

```shell
yarn email:host
```

```shell
yarn email:sync
```

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

### Verify Installed Tool Versions

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/00-getting-started.md

Checks the versions of Node.js and Python installed via asdf to ensure they are correctly set up.

```bash
node --version
python --version
```

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

### Existing Claude Desktop Config File

Source: https://github.com/plasmicapp/plasmic/blob/master/ai/skills/plasmic-designer/README.md

An example of a Claude Desktop configuration file that already contains preferences.

```json
{
  "preferences": {
    "quickEntryDictationShortcut": "capslock",
    "sidebarMode": "chat"
  }
}
```

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

### Set up Plasmic Application and Bootstrap

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/00-getting-started.md

Performs the initial application setup and bootstrapping process for Plasmic Studio by running 'yarn setup-all' and 'yarn bootstrap' in the project root.

```bash
yarn setup-all && yarn bootstrap
```

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

### Install PM2 Globally

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Install the pm2 process manager globally using yarn. This allows you to use `pm2` commands directly instead of `yarn pm2`.

```bash
yarn global add pm2
```

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

### Run Development Server

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/loader-tests/src/nextjs/split/README.md

Execute these commands to start the local development server for your Next.js application. Open http://localhost:3000 in your browser to view the running application.

```bash
npm run dev
# or
yarn dev
```

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

### Run Gatsby Development Server

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/plasmic-cms-gatsby/README.md

Execute this command to start the development server for your Gatsby project. The application will be accessible in your browser.

```bash
yarn develop
```

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

### Install OS Packages on Ubuntu

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/00-getting-started.md

Installs essential packages for development on Ubuntu 18.04+ including build tools, Python, pip, virtualenvwrapper, PostgreSQL, and screen.

```bash
apt update
apt install build-essential python3 python3-pip virtualenvwrapper postgresql postgresql-contrib wget screen
```

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

### Run Development Server

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/nextjs-rive/README.md

Use this command to start the Next.js development server. The project will auto-update as you edit in Plasmic Studio.

```bash
npm run dev
```

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

### Launch Plasmic Studio with Docker

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/00-getting-started.md

Starts the Plasmic Studio application, including the database, seeding, migrations, and building necessary source code, using a single Docker Compose command.

```bash
docker-compose up -d
```

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

### Install Plasmic CLI

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/cli/README.md

Install the Plasmic CLI globally using npm or yarn. This command is required before you can use any Plasmic CLI functionalities.

```bash
# Install the CLI globally:
npm install -g @plasmic/cli # Or: yarn global add @plasmic/cli
```

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

### Install PostgreSQL and Dependencies on Mac OS X

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/00-getting-started.md

Installs PostgreSQL and other necessary tools using MacPorts. Ensure you update version numbers to the latest available. This method is recommended over Homebrew for PostgreSQL.

```bash
{ sed 's/#.*//' | while read line; do sudo port install -b $line; done ; } << "EOF"
curl-ca-bundle
postgresql15
postgresql15-server
hadolint # for Dockerfile checking
EOF

# Follow the instructions printed during the postgresql-server installation:
sudo port select postgresql postgresql15
sudo mkdir -p /opt/local/var/db/postgresql15/defaultdb
sudo chown postgres:postgres /opt/local/var/db/postgresql15/defaultdb
sudo su postgres -c 'cd /opt/local/var/db/postgresql15 && /opt/local/lib/postgresql15/bin/initdb -D /opt/local/var/db/postgresql15/defaultdb
sudo port load postgresql15-server
```

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

### Bundle Migration Example

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

This TypeScript snippet demonstrates how to create a new migration file for bundle schema changes. It defines a `migrate` function to update bundle values.

```typescript
// wab/src/wab/server/bundle-migrations/XX-my-migration.ts

import { UnsafeBundle } from "../../shared/bundles";

export function migrate(bundle: UnsafeBundle) {
    for (const [k, v] of Object.entries(bundle.map)) {
        if (v.__type === "Rule") {
            v.values = v.values;
        }
    }
}
```

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

### Build Plasmic Packages

Source: https://github.com/plasmicapp/plasmic/blob/master/plasmicpkgs-dev/README.md

Run this command to build all packages within the `@plasmicpkgs/*` scope. Ensure you have Lerna installed and configured.

```bash
yarn lerna run build --scope="@plasmicpkgs/*"
```

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

### Build and Test Production Artifact

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Build the client app for production using `yarn build`. Then, install `local-web-server` globally and serve the `build/` directory with SPA and API rewrite rules to test the artifact locally.

```bash
yarn global add local-web-server
cd build/
ws --spa index.html --rewrite '/api/(.*) -> http://localhost:3004/api/$1'
```

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

### Install asdf Plugins

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/00-getting-started.md

Adds necessary plugins for Node.js, Python, and direnv to the asdf version manager. This allows managing different language versions.

```bash
asdf plugin add nodejs
asdf plugin add python
asdf plugin add direnv
```

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

### Install Plasmic Packages from Local Registry

Source: https://github.com/plasmicapp/plasmic/blob/master/CONTRIBUTING.md

Installs Plasmic packages from a local registry, ensuring local changes are picked up. This is useful for testing local package builds.

```bash
npm i @plasmicapp/loader-nextjs @plasmicpkgs/plasmic-rich-components --registry=http://localhost:4873
```

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

### Add pnpm-workspace.yaml to Template

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/loader-tests/README.md

Create a pnpm-workspace.yaml file in the template directory to ensure pnpm install modifies the template's lock file.

```bash
echo 'packages:\n  - "."' > src/nextjs/template-pages/pnpm-workspace.yaml
```

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

### Configure Build Script for Plasmic Prepass

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/nextjs-app-router/README.md

Use this script in your package.json to enable static generation with Plasmic. It starts a dev server, runs the build command, and then shuts down the server.

```json
"script": {
  "build": "with-plasmic-prepass -- next build"
}
```

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

### Setup and Reset Plasmic Database

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Initialize and reset the database state for Plasmic Studio development. Ensure your PostgreSQL server is running before executing these commands.

```bash
yarn db:setup
yarn db:reset # specify no_sudo=1 if `sudo -u postgres psql` doesn't work
```

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

### Run Plasmic Backend on Alternate Port

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Start the Plasmic Studio backend server on a custom port (e.g., 3007) by setting the `BACKEND_PORT` environment variable before running the start script.

```bash
BACKEND_PORT=3007 bash tools/start.bash
```

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

### Initialize Hydrogen Project with TypeScript Template

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/hydrogen-example/README.md

Use this command to create a new Hydrogen project using the TypeScript 'hello-world-ts' template. Ensure you have Node.js v16.14.0 or higher and Yarn installed.

```bash
npm init @shopify/hydrogen@latest --template hello-world-ts
```

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

### Install Plasmic Designer Skill for Agentic CLIs

Source: https://github.com/plasmicapp/plasmic/blob/master/ai/skills/plasmic-designer/README.md

Installs the Plasmic Designer skill globally for agentic CLIs by copying the skill folder to the user's global skills directory. Ensure the directory structure is maintained.

```sh
# User-global install (available from any project)
mkdir -p ~/.claude/skills
cp -r path/to/plasmic-designer ~/.claude/skills/
```

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

### Run All Plasmic Development Servers

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Start all necessary development servers for Plasmic Studio using a bash script. This command automatically sets up multiple viewing panes for different terminals.

```bash
bash tools/start.bash
```

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

### Check Node.js Version

Source: https://github.com/plasmicapp/plasmic/blob/master/ai/skills/plasmic-designer/README.md

Verify that you have Node.js version 20.19 LTS or newer installed. If not, update Node.js.

```sh
node --version
```

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

### Sync Plasmic Project

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/cli/README.md

Run the plasmic sync command with your project ID to synchronize your Plasmic designs. Ensure you have installed the CLI globally first.

```bash
# Run it!
plasmic sync --projects yourPlasmicProjectId
```

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

### Host Frame Rendering with Context Provider

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/frame-ctx/README.md

Sets up the host frame with memory history and the HostFrameCtxProvider. Ensure `createMemtoryHistory` is imported.

```tsx
const memoryHistory = createMemtoryHistory();
<HostFrameCtxProvider history={memoryHistory}>
  <Shell history={memoryHistory}>
    <StudioInitializer />
  </Shell>
</HostFrameCtxProvider>
```

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

### Install Plasmic Loader for Next.js

Source: https://github.com/plasmicapp/plasmic/blob/master/README.md

Install the Plasmic loader package for Next.js using npm. This is the first step to integrating Plasmic into your application.

```bash
npm install @plasmicapp/loader-nextjs
```

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

### Preview Production Build of Hydrogen App

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/hydrogen-example/README.md

After building your Hydrogen app, use this command to run a local preview. This simulates the production environment provided by Oxygen.

```bash
yarn build
yarn preview
```

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

### Install chrome-devtools-mcp for Claude Code CLI

Source: https://github.com/plasmicapp/plasmic/blob/master/ai/skills/plasmic-designer/README.md

Use this one-liner command to add the chrome-devtools MCP tool to your Claude Code CLI. Ensure you have Claude Code installed and configured.

```sh
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --no-usage-statistics
```

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

### Run Plasmic Frontend on Alternate Port

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Start the Plasmic Studio frontend development server on a custom port (e.g., 3006) by setting the `PORT` environment variable before running the start script.

```bash
PORT=3006 bash tools/start.bash
```

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

### Initialize Plasmic Loader for Blog Project

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/optimized-multi-project-setup/README.md

Set up a dedicated Plasmic loader for the blog project. This ensures that only blog-related components and data are loaded, optimizing performance for blog pages.

```typescript
import { initPlasmicLoader } from '@plasmicapp/loader-nextjs';

const PLASMIC_BLOG_PROJECT_ID = 'waHQepGxJhtu3k3FzFxJoR';

export const { plasmicLoader: blogPlasmicLoader } = initPlasmic {
  projects: [
    {
      id: PLASMIC_BLOG_PROJECT_ID,
      // Provide a token if your project is private
      // token: 'YOUR_PRIVATE_PROJECT_TOKEN',
    },
  ],
};

```

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

### Get Plasmic App User From Token

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/auth-api/api/index.api.md

Retrieves a Plasmic application user directly from an authentication token.

```APIDOC
## POST /users/get-from-token

### Description
Retrieves a Plasmic application user directly from an authentication token.

### Method
POST

### Endpoint
/users/get-from-token

### Parameters
#### Request Body
- **token** (string) - Required - The authentication token.

### Request Example
```json
{
  "token": "your_auth_token"
}
```

### Response
#### Success Response (200)
- **user** (PlasmicUser) - The Plasmic user object.

#### Response Example
```json
{
  "user": {
    "email": "user@example.com",
    "properties": null,
    "roleId": "user_role_id",
    "roleIds": ["user_role_id"],
    "roleName": "User",
    "roleNames": ["User"]
  }
}
```
```

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

### Top Frame Rendering with Context Provider

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/frame-ctx/README.md

Sets up the top frame with browser history and the TopFrameCtxProvider. Ensure `createBrowserHistory` is imported.

```tsx
const browserHistory = createBrowserHistory();
<Shell history={browserHistory}>
  <TopFrameCtxProvider>
    <StudioFrame />
  </TopFrameCtxProvider>
</Shell>
```

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

### Get Plasmic App User

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/auth-api/api/index.api.md

Retrieves a Plasmic application user using an authorization code and code verifier.

```APIDOC
## POST /users/get

### Description
Retrieves a Plasmic application user using an authorization code and code verifier.

### Method
POST

### Endpoint
/users/get

### Parameters
#### Request Body
- **appId** (string) - Required - The ID of the Plasmic application.
- **codeVerifier** (string) - Required - The code verifier used during the authorization flow.
- **code** (string) - Required - The authorization code received.

### Request Example
```json
{
  "appId": "your_app_id",
  "codeVerifier": "your_code_verifier",
  "code": "your_auth_code"
}
```

### Response
#### Success Response (200)
- **user** (PlasmicUser) - The Plasmic user object.
- **token** (string) - An authentication token for the user.

#### Response Example
```json
{
  "user": {
    "email": "user@example.com",
    "properties": null,
    "roleId": "user_role_id",
    "roleIds": ["user_role_id"],
    "roleName": "User",
    "roleNames": ["User"]
  },
  "token": "generated_auth_token"
}
```
```

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

### Build Hydrogen Project for Production

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/hydrogen-example/README.md

This command builds your Hydrogen storefront for production. It is typically run before deploying or previewing.

```bash
yarn build
```

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

### Export from @plasmicapp/loader-edge

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-nextjs/api/edge.api.md

This snippet indicates that the @plasmicapp/loader-nextjs package re-exports all members from the @plasmicapp/loader-edge package. Ensure @plasmicapp/loader-edge is installed if you encounter issues.

```typescript
export * from "@plasmicapp/loader-edge";

// (No @packageDocumentation comment for this package)
```

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

### NextJsPlasmicComponentLoader Get Active Variation

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-nextjs/api/index.api.md

Determines the active variation for a component based on request, response, known traits, and provided traits.

```typescript
getActiveVariation(opts: {
        req?: ServerRequest;
        res?: ServerResponse;
        known?: Record<string, string>;
        traits: Record<string, string | number | boolean>;
    }): Promise<Record<string, string>>;
```

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

### Create Plasmic App

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/create-plasmic-app/README.md

Run this command to create a new project with Plasmic integration. It uses create-next-app, create-gatsby, or create-react-app under the hood.

```bash
npx create-plasmic-app
```

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

### fetchServerFiles

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-gatsby/api/gatsby-ssr.api.md

Fetches server files required for Plasmic integration within a Gatsby project. This function is part of the Gatsby plugin's setup.

```APIDOC
## fetchServerFiles

### Description
Fetches server files necessary for Plasmic integration in a Gatsby project.

### Method
`fetchServerFiles`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { fetchServerFiles } from '@plasmicapp/loader-gatsby';

// Assuming GatsbyPluginOptions is defined elsewhere
// fetchServerFiles(yourGatsbyPluginOptions);
```

### Response
This function returns a Promise that resolves to void, indicating completion.

#### Success Response (void)

#### Response Example
```json
// No response body, indicates successful completion.
```
```

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

### Migrate Development Bundles

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Run this command to migrate local JSON bundles for development and testing. It performs necessary migrations based on version stamps and resets the file to a fresh checkout state.

```bash
yarn migrate-dev-bundles
```

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

### Utility Functions

Source: https://github.com/plasmicapp/plasmic/blob/master/plasmicpkgs/plasmic-cms/api/index.api.md

Utility functions for initializing the API client and registering components.

```APIDOC
## Utility Functions

### mkApi

- **Description**: Creates an instance of the `API` client.
- **Parameters**: `config` (DatabaseConfig | undefined) - The database configuration object.
- **Returns**: An instance of the `API` class.

### registerAll

- **Description**: Registers all available Plasmic CMS components and global contexts.
- **Parameters**: `loader` (object, optional) - An object with `registerComponent` and `registerGlobalContext` methods.
```

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

### Get Active Plasmic Variation

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-edge/api/index.api.md

Determines the active variation for a given path based on splits and traits. Supports enabling unseeded experiments.

```typescript
export const getActiveVariation: (opts: {
    splits: Split[];
    traits: Record<string, string | number | boolean>;
    path: string;
    enableUnseededExperiments?: boolean;
}) => Record<string, string>;
```

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

### Initialize Environment for PM2

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Prepare the shell environment for using pm2 to manage Plasmic Studio server processes. This involves activating a virtual environment and sourcing node environment variables.

```bash
workon wab
. ~/.node/*/bin/activate
```

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

### Set up react-intl Root Provider

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/nextjs-i18n-intl/README.md

In `_app.tsx`, establish the root provider for `react-intl`, including the localized messages.

```typescript
import { PlasmicRootProvider } from "@plasmicapp/react-web";
import { IntlProvider } from "react-intl";

// ... other imports

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <PlasmicRootProvider>
      <IntlProvider messages={pageProps.messages}>
        <Component {...pageProps} />
      </IntlProvider>
    </PlasmicRootProvider>
  );
}
```

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

### Alternative Build Command with Custom Prepass

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/nextjs-app-router/README.md

This alternative command allows you to specify a custom prepass command if needed, while still leveraging `with-plasmic-prepass` for the build process.

```bash
with-plasmic-prepass -c prepass -- next build
```

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

### Get Cached Bundle in Node.js Server

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-fetcher/api/index.api.md

Retrieves a cached Plasmic loader bundle directly on the Node.js server. This is an internal utility function for performance optimization.

```typescript
internal_getCachedBundleInNodeServer(opts: FetcherOptions): LoaderBundleOutput | undefined;

```

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

### Get Plasmic App User From Token Function

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/auth-api/api/index.api.md

Retrieves a Plasmic app user directly from an authentication token. Requires host and token. Returns a PlasmicUserResult.

```typescript
export function getPlasmicAppUserFromToken(opts: {
    host?: string;
    token: string;
}): Promise<PlasmicUserResult>;
```

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

### Get Bundle Subset

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-core/api/index.api.md

Extracts a subset of modules from a Plasmic bundle based on provided names. Useful for optimizing bundle loading by only including necessary components.

```typescript
import { Api } from '@plasmicapp/loader-fetcher';
import { AssetModule } from '@plasmicapp/loader-fetcher';
import { CodeModule } from '@plasmicapp/loader-fetcher';
import { ComponentMeta } from '@plasmicapp/loader-fetcher';
import { ExperimentSlice } from '@plasmicapp/loader-fetcher';
import { FontMeta } from '@plasmicapp/loader-fetcher';
import { GlobalGroupMeta } from '@plasmicapp/loader-fetcher';
import { LoaderBundleCache } from '@plasmicapp/loader-fetcher';
import { LoaderBundleOutput } from '@plasmicapp/loader-fetcher';
import { PageMeta } from '@plasmicapp/loader-fetcher';
import { PageMetadata } from '@plasmicapp/loader-fetcher';
import { PlasmicModulesFetcher } from '@plasmicapp/loader-fetcher';
import { ProjectMeta } from '@plasmicapp/loader-fetcher';
import { SegmentSlice } from '@plasmicapp/loader-fetcher';
import { Split } from '@plasmicapp/loader-fetcher';

export { Api }

export { AssetModule }

export { CodeModule }

export { ComponentMeta }

export { ExperimentSlice }

export { FontMeta }

// @public
export function getBundleSubset(bundle: LoaderBundleOutput, names: string[], opts?: {
    target?: "browser" | "server";
}): LoaderBundleOutput;

export { GlobalGroupMeta }

export { LoaderBundleCache }

export { LoaderBundleOutput }

export { PageMeta }

export { PageMetadata }

export { PlasmicModulesFetcher }

export { ProjectMeta }

// @public (undocumented)
export class Registry {
    constructor();
    // (undocumented)
    clear(): void;
    // (undocumented)
    getRegisteredModule(name: string): any;
    // (undocumented)
    hasModule(name: string, opts?: {
        forceOriginal?: boolean;
    }): boolean;
    // (undocumented)
    isEmpty(): boolean;
    // (undocumented)
    load(name: string, opts?: {
        forceOriginal?: boolean;
    }): any;
    // (undocumented)
    register(name: string, module: any): void;
    // (undocumented)
    updateModules(bundle: LoaderBundleOutput): void;
}

export { SegmentSlice }

export { Split }

// (No @packageDocumentation comment for this package)

```

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

### Specify Output Directories in next.config.js

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/nextjs-app-router/README.md

Configure `next.config.js` to use different output directories for the dev server and the build process when `PLASMIC_PREPASS_SERVER` is set. This prevents conflicts between the two processes.

```javascript
module.exports = {
  distDir: process.env.PLASMIC_PREPASS_SERVER ? ".next-prepass" : ".next"
}
```

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

### Smooth Scrolling for Anchor Links

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/client/web-importer/testonly/data/landing-page.html

Implements smooth scrolling for navigation links that point to sections on the same page (href starting with '#'). Ensures that the target element is visible when clicked.

```javascript
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
});
```

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

### Check Outdated Dependencies

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Run this command to see which project dependencies have newer versions available.

```bash
yarn outdated
```

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

### Get Chunks URL for Loader Bundle

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-fetcher/api/index.api.md

Generates the URL for fetching code chunks associated with a loader bundle and specified modules. This is typically used internally by the fetcher.

```typescript
getChunksUrl(bundle: LoaderBundleOutput, modules: CodeModule[]): string;

```

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

### Test Email Generation (Local)

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/wab/src/wab/server/emails/README.md

Execute the email generation script from the /wab folder. Customize the template and props by editing constants within the script.

```bash
# From anywhere within the /wab folder
yarn email:generate
```

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

### Get Middleware Response for Plasmic

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-edge/api/index.api.md

Generates a middleware response, including the next pathname and cookies, based on traits and cookies. Includes optional seed range for experiments.

```typescript
export const getMiddlewareResponse: (opts: {
    path: string;
    traits: Traits;
    cookies: Record<string, string>;
    seedRange?: number;
}) => {
    pathname: string;
    cookies: {
        key: string;
        value: string;
    }[];
};
```

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

### WordpressProvider

Source: https://github.com/plasmicapp/plasmic/blob/master/plasmicpkgs/plasmic-wordpress/api/index.api.md

Provides the WordPress URL context to child components. This is a global context provider.

```APIDOC
## WordpressProvider

### Description
Provides the WordPress URL context to child components. This is a global context provider.

### Method
React Component

### Endpoint
N/A (Component)

### Parameters
#### Props
- **wordpressUrl** (string) - Required - The base URL of the WordPress instance.
- **children** (ReactNode) - Required - The child elements to be rendered within the provider.

### Request Example
```jsx
<WordpressProvider wordpressUrl="https://your-wordpress.com">
  {/* Your application content */}
</WordpressProvider>
```

### Response
#### Success Response (200)
N/A (Component renders children)

#### Response Example
N/A
```

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

### Initialize Plasmic API Client

Source: https://github.com/plasmicapp/plasmic/blob/master/plasmicpkgs/cms/api/index.api.md

Creates an instance of the Plasmic API client with the provided configuration. This is the entry point for interacting with the Plasmic API.

```typescript
export function _mkApi(config: _DatabaseConfig | undefined): _API;

```

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

### Migrate Bundles Offline

Source: https://github.com/plasmicapp/plasmic/blob/master/docs/contributing/platform/01-config-tooling.md

Run this command to apply bundle migrations to your local database when working offline.

```bash
yarn db:migrate-bundles
```

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

### Initialize Plasmic Popup Communication

Source: https://github.com/plasmicapp/plasmic/blob/master/platform/sub/public/static/popup.html

Sets up the iframe source based on the URL hash and establishes message listeners for communication with the opener. This script should be included in the popup's HTML.

```javascript
body { margin: 0; }
iframe { border: 0; bottom: 0; height: 100vh; left: 0; position: absolute; right: 0; top: 0; width: 100%; }
```

```javascript
const iframe = document.getElementsByTagName("iframe")[0]
const url = location.hash.replace(/^#/, "");
iframe.setAttribute("src", url);
```

```javascript
function post(type, params = {}) {
  window.opener.postMessage({ source: "plasmic-popup", type: type, ...params, }, "*");
}
```

```javascript
window.addEventListener("message", (event) => {
  switch (event.data.type) {
    case "pushHistory":
      window.history.pushState({}, "", event.data.url);
      post("popstate");
      break;
    case "replaceHistory":
      window.history.replaceState({}, "", event.data.url);
      post("popstate");
      break;
    case "getLocation":
      post("location", {url: location.href});
      break;
  }
});
```

```javascript
window.addEventListener("load", () => {
  post("load");
});
```

```javascript
window.addEventListener("beforeunload", () => {
  post("unload");
});
```

```javascript
window.addEventListener("popstate", () => {
  post("popstate");
});
```

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

### Initialize Plasmic Fetcher API

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/loader-fetcher/api/index.api.md

Constructs an instance of the Api class with project configurations and optional host settings. Use this to interact with the Plasmic API.

```typescript
new Api({
        projects: {
            id: string;
            token: string;
        }[];
        host?: string;
        apiHost?: string;
        cdnHost?: string;
        nativeFetch?: boolean;
        manualRedirect?: boolean;
    });

```

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

### Configure next-i18next

Source: https://github.com/plasmicapp/plasmic/blob/master/examples/nextjs-i18n-i18next/README.md

This is the configuration file for next-i18next, following the boilerplate for integration with Plasmic.

```javascript
next-i18next.config.js
```

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

### Get Plasmic App User Function

Source: https://github.com/plasmicapp/plasmic/blob/master/packages/auth-api/api/index.api.md

Retrieves a Plasmic app user using authentication codes. Requires host, app ID, code verifier, and code. Returns a PlasmicUserResult.

```typescript
export function getPlasmicAppUser(opts: {
    host?: string;
    appId: string;
    codeVerifier: string;
    code: string;
}): Promise<PlasmicUserResult>;
```

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

### Empty Claude Desktop Config File

Source: https://github.com/plasmicapp/plasmic/blob/master/ai/skills/plasmic-designer/README.md

Represents an empty JSON configuration file for Claude Desktop.

```json
{}
```

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

### Plasmic Package JSON Configuration

Source: https://github.com/plasmicapp/plasmic/blob/master/CONTRIBUTING.md

Example package.json for a Plasmic code component package. It specifies devDependencies, peerDependencies, and regular dependencies, ensuring compatibility with Plasmic Studio and user projects.

```json
{
  "devDependencies": {
    "@plasmicapp/data-sources": "0.1.53",
    "@plasmicapp/host": "1.0.119",
    "@size-limit/preset-small-lib": "^4.11.0",
    "@types/node": "^14.0.26",
    "size-limit": "^4.11.0",
    "tsdx": "^0.14.1",
    "tslib": "^2.2.0",
    "typescript": "^3.9.7"
  },
  "peerDependencies": {
    "@plasmicapp/data-sources": ">=0.1.52",
    "@plasmicapp/host": ">=1.0.0",
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "dependencies": {
    "memoize-one": "^6.0.0"
  }
}
```