Connect Claude, ChatGPT and coding agents

See your walkthroughs and their feedback in Claude or ChatGPT, and let a coding agent fix the comments on your prototype

Glitterball has an app for AI assistants. In Claude or ChatGPT it shows your walkthroughs, who watched them and what people said. In a coding agent it pulls the open comments on a prototype, so the agent can fix them and mark each one resolved.

Every app connects to the same address:

https://www.glitterball.dev/mcp

The first time, it opens Glitterball. Sign in and press Allow. The app gets a key for your workspace, which you can see and revoke under Integrations in the sidebar, in Agent keys.

Claude

In Claude, open Settings, then Connectors.
Choose Add custom connector and paste the address above.
Sign in to Glitterball and press Allow.

ChatGPT

In ChatGPT, open Settings, then Apps, then Advanced, and turn on Developer mode.
Choose Create app, paste the address above and pick OAuth.
Sign in to Glitterball and press Allow.

What to ask

"Show my latest Glitterball walkthroughs." Your walkthroughs as cards, each with a Watch button
"Who watched my walkthroughs this week?"
"Summarise the feedback on the checkout prototype and list what to change."
"Which prototypes do I have in Glitterball?"
"Add Glitterball to my site at northwind.example." The steps for your coding agent, or a tag to paste into the page
"Make an AI walkthrough of northwind.example showing how to book a table." Glitterball walks through it and narrates it (Maker)

The app reads your workspace, adds prototypes, makes AI walkthroughs (shared by link) and marks comments resolved. It can't record you, delete anything or change who sees what.

Coding agents

Two things help a coding agent: Glitterball on the prototype it builds, and the feedback on it.

To add Glitterball to a prototype, paste this into the agent:

Add the glitterball npm package to this prototype

To give the agent the Glitterball skill, which knows how to add Glitterball, read the feedback and fix it, run this in the project:

npx skills add https://github.com/glitterball-app/claude-plugin --skill glitterball

To give the agent the feedback, connect it to the address above:

Agent	How
Cursor	Add to Cursor, or Settings, MCP, Add
VS Code	Install in VS Code
Claude Code	`claude mcp add --transport http glitterball https://www.glitterball.dev/mcp`, then `/mcp` to sign in
Replit	Add to Replit, then Test & save
Lovable	A workspace admin adds a custom MCP server with the address above and OAuth
Bolt	Settings, Connectors, custom MCP, transport HTTP, auth MCP OAuth
Windsurf	Add `{"mcpServers":{"glitterball":{"serverUrl":"https://www.glitterball.dev/mcp"}}}` to its MCP config

Then ask: "Pull the Glitterball feedback on this prototype and fix it." The agent reads the open comments by screen, changes the code, and marks each comment it dealt with as resolved, so the person who left it sees it was handled.

App builders

In Lovable, Replit, Bolt, v0 or Figma Make, paste the same line into the builder's chat:

Add the glitterball npm package to this prototype

There's no key to copy, so it works even where the builder can't reach Glitterball while it builds, as in Figma Make. Some builders refuse packages they think are too new; then copy the prompt from Create walkthrough, In an app builder, which adds Glitterball with a script tag instead.

Record on the published or preview address in its own tab, not inside the builder's editor.

Disconnect

Remove Glitterball in the app's own settings, and revoke its key in Glitterball under Integrations, Agent keys. Revoking the key disconnects it straight away.