Deploy ChatGPT Canvas, Claude Artifacts, and Gemini Canvas to a live URL
Deploy from inside ChatGPT, Claude, Gemini, v0, or AI Studio. The Chrome extension reads the code, uploads it, and gives you a permanent URL.
The VibeHost Chrome extension adds a Deploy button inside the major AI canvas environments. When you click it, the extension reads the code from the canvas, packages it, uploads it to VibeHost, and returns a URL.
You don't need the CLI or a terminal, and you don't have to save any files first.
Install
VibeHost extension on the Chrome Web Store.
After installing, click the extension icon and sign in to VibeHost with the same Google or email login you use on vibehost.com.
Supported canvases
| Platform | Where it appears | What gets deployed |
|---|---|---|
| ChatGPT Canvas | Code artifact in canvas pane | HTML / CSS / JS files |
| Claude Artifacts | Side-panel artifact | HTML / single-file React |
| Gemini Canvas | Generated HTML app | Single-file HTML |
| Google AI Studio | /apps/<uuid> + /apps/drive/<id> | Multi-file React / TSX |
| v0 | Live preview | Static preview output (not server routes) |
Use it
- Have your AI canvas open with a code artifact rendering.
- Click the Deploy to VibeHost button. It appears in the canvas toolbar of supported platforms.
- The extension extracts the source, packages it, and uploads it.
- A toast shows the URL. Click to open it, or copy it to share.
What you see in the canvas preview is what gets deployed. Interactive elements (buttons, animations, hover effects, responsive layout) work. Anything that calls an API on localhost or 127.0.0.1 won't work, because there's no server.
Per-platform notes
Works on ChatGPT Plus / Team / Enterprise (any plan that can open Canvas).
The button appears when a canvas with code is open. The extension reads the rendered code from the canvas, not from the conversation transcript, so the deploy matches what's on screen.
It doesn't work in plain chat without a canvas, or in conversations with Python code (python_user_visible tool calls).
Works in Claude.ai and the Claude Desktop browser. Supports both the artifact side-panel and inline <artifact> blocks in the chat.
The extension extracts from artifact props first and falls back to code blocks if needed. For single-file React artifacts, the extension wraps them with a minimal index.html runner.
Works on Gemini Canvas (the "build an app" feature). The button appears in the canvas toolbar.
Single-file HTML / CSS / JS only. Gemini's multi-file projects aren't currently supported. Those land on AI Studio.
Works on both /apps/<uuid> (AI-generated) and /apps/drive/<id> (Drive-shared). Drive apps can have multiple files (index.tsx, App.tsx, components/*), and the extension reads them all.
The extension finds the entry point on its own and bundles as little as it needs.
Works on the preview iframe. v0 sometimes generates full app projects with server-side code. The extension deploys only the static preview output, so API routes and server actions won't run.
Capture any web page
Beyond canvases, the extension's popup has a "Capture & deploy" button that works on any URL. It snapshots the page DOM and assets as a static HTML bundle and deploys it.
Use it to:
- Archive a reference page before it changes.
- Share a snapshot of a public page that requires a login.
- Capture a third-party demo for an internal review.
The captured site is a snapshot and won't refresh when the source changes. Run the capture again to update it.
What gets deployed (and what doesn't)
These work:
- HTML, CSS, vanilla JS
- React components compiled to a runnable bundle
- Tailwind / inline styles
- Static images bundled or referenced via CDN
- Client-only routing (
react-router, hash links) - Fonts loaded via
<link>
These don't:
- Server-side code (any kind)
- API calls to localhost / 127.0.0.1
- File-system reads at runtime
- WebSockets to local servers
- Python (the canvas might generate it, but VibeHost can't run it)
Where the deploy lands
The extension creates apps in your active VibeHost workspace. It names the app after the canvas title, and you can change that in the dashboard later.
Apps from the extension default to private. Open the dashboard to change who can see them:
- Make it public, and anyone with the URL can view it.
- Invite an email, and that person signs in with Google to view it.
- Create a share link. Anyone who has it can view the app until the link expires.
Iterate
Make a change in the canvas and click Deploy again. The extension updates the same app, matched by canvas conversation. The URL stays the same and the content changes.
If you want a new app instead, rename it in the canvas first or use the popup's "Deploy as new app" option.
Why this matters
When someone can build a page but can't ship it, the blocker is usually tooling. Deploying a static HTML file means picking a platform, signing up, configuring DNS, SSL, and a build, pushing to git, and waiting. A one-file site needs almost none of that.
With the extension, you click Deploy and get a URL. The URL is permanent, free, and shareable.
See also
- Chrome extension covers install, permissions, and troubleshooting.
- Static sites explains what's being served.
- Quickstart does the same from the CLI, for files you have locally.
- Grants and visibility controls who can see canvas deploys.