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.
  • 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 in Claude Code

  1. Start Claude Code in your project and run these two commands in its prompt:
    /plugin marketplace add josephvengooran/website-pet-skill
/plugin install petmysite@website-pet-skill
  2. Restart Claude Code so the skill loads. Run /plugin and open Installed to check that petmysite is there.

Install in Codex

  1. Run these commands in your terminal:
    codex plugin marketplace add josephvengooran/website-pet-skill
codex plugin add petmysite@website-pet-skill
  2. Start a new Codex session in your project. Run codex plugin list to check that petmysite@website-pet-skill is installed.

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

Claude Code

Refresh the marketplace, then update the plugin. The last command removes it.

/plugin marketplace update website-pet-skill
/plugin update petmysite@website-pet-skill

/plugin uninstall petmysite@website-pet-skill

Codex

Upgrading the marketplace fetches the latest plugin. The last command removes it.

codex plugin marketplace upgrade website-pet-skill

codex plugin remove petmysite@website-pet-skill

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.