PetMySite for Codex and Claude Code

Install the PetMySite plugin in your coding agent, then ask it to add your pet, show messages at the right moment or respond to clicks. It writes code against the real API, not a guess at one.

What the plugin does

The plugin adds one skill that your agent loads when you ask it to work with PetMySite. It covers:

  • Installing the pet with the script tag or @petmysite/react, in the right layout file for HTML sites, React, Next.js, Vue, Svelte, Astro and server templates, or with the steps for Shopify, Webflow, Squarespace, Wix, Framer, WordPress and Google Tag Manager.
  • Every method and event in the JavaScript API and the React and Next.js API, with their limits.
  • Fixing a pet that doesn't appear: the domain, your Content Security Policy, your chat provider and plugins that delay JavaScript.

The same plugin works in both agents. Its source is on GitHub.

Before you start

  • Claude Code or the Codex CLI, opened in your website's project folder. The CLI and skills.sh options also need Node.js 18 or later.
  • A PetMySite website whose domain matches the site you're building. In PetMySite, open its Installation page and copy the data-site value. It starts with pms_ and is safe to use in browser code.
  • Your chat provider installed on the same pages if your pet opens chat. PetMySite opens it rather than replacing it.

Install

Pick one. Each installs the same skill, and you only need one.

Install via
npx website-pet-skill install

Installs the skill for Claude Code and Codex in one step. Add --project to install it into the current project only, or --agent claude or --agent codex for one agent.

Then start a new session in your coding agent so it loads the skill.

Ask your agent

Describe what you want in your own words. Mentioning PetMySite helps the agent pick the skill:

Add the PetMySite pet to this Next.js app.
Make the pet celebrate when someone adds an item to the cart.
Hide the pet on the checkout and account pages.
When visitors click the pet, open our help panel instead of chat.

Give the agent your public key, or let it read the key from an environment variable that reaches the browser. It won't make one up:

# .env.local (Next.js)
NEXT_PUBLIC_PETMYSITE_KEY=pms_your_public_key

# .env (Vite)
VITE_PETMYSITE_KEY=pms_your_public_key

Your pet, its chat, Smart Bubbles and click actions are set in your PetMySite dashboard. The agent only writes the code that loads the pet and talks to it.

Review what the agent changes before you publish. Then deploy, open your live site and select Verify installation on the Installation page. The pet also loads on localhost while you test, but local visits don't verify the installation.

Update or remove

Use the same method you installed with.

Installed via
npx website-pet-skill@latest install

Replaces the skill with the latest version. To remove it, run npx website-pet-skill uninstall.

Troubleshooting

The agent doesn't use the skill

  • Start a new session after installing. Skills load when a session starts.
  • Name PetMySite in your request, or ask it to use the integrating-petmysite skill.

The agent added the code but no pet appears

  • Test on your registered domain or on localhost. Preview and staging addresses are different websites.
  • Check the key in your environment variable is set where you deploy, not only on your computer.
  • See the troubleshooting in the manual install and React and Next.js guides.

Questions about the plugin? Email support@petmysite.com.