Skip to main content

Build and Deploy a Web Game with Claude — A No-Code Step-by-Step Guide

A no-code guide to building a web game with Claude Artifacts and publishing it as a free public link, plus how to extend it further with Claude Code.

By
🌐 This article was machine-translated and may contain inaccuracies. Read the Korean original if in doubt.

You don't need to know a single line of code to build your own web game with Claude and share it with a public link. Building your first game and getting a shareable link typically takes about 30 minutes. This guide walks through creating a game with Artifacts — self-contained, runnable pieces of content Claude creates during a conversation, publishing it, and, if you want to go further, extending it with Claude Code — Claude's developer tool for working with code directly from a terminal (a text-based command screen).

🟢 Model references match the current lineup · model notice · Fable subscription
🟢 Model references match the current lineup · Claude Opus 5.5 / Claude Sonnet 5 / Claude Haiku 4.5 (higher tier: Claude Fable 5.1). This notice changes only when Anthropic ships a new model.

Fable 5 and 5.1 subscription (updated September 7, 2026): Claude Fable 5.1, released September 1, 2026, is the current Fable model and Fable 5 is now legacy. Plan terms are the same for both — Max and Team Premium plans include Fable at up to 50% of the weekly usage limit; Pro and Team Standard use usage credits (

🟢 Model references match the current lineup · Claude Opus 5.5 / Claude Sonnet 5 / Claude Haiku 4.5 (higher tier: Claude Fable 5.1). This notice changes only when Anthropic ships a new model.
0/M input, $50/M output tokens). The one-time
🟢 Model references match the current lineup · Claude Opus 5.5 / Claude Sonnet 5 / Claude Haiku 4.5 (higher tier: Claude Fable 5.1). This notice changes only when Anthropic ships a new model.
00 credit applied only to the Fable 5 transition and is not offered for 5.1. Some coding and debugging requests may be answered by an Opus model due to a security classifier (both models). See the Fable 5.1 guide and the Fable 5 availability guide for details.

1. Describe it "Build me this game" 2. Artifact created Game runs in side panel 3. Publish Share a free public link

What is a Claude artifact?

An artifact is a self-contained piece of content — code, a document, or an app — that Claude creates during a conversation and opens in a separate panel next to the chat, where you can see it run right away. When Claude produces something substantial that you'd want to view and interact with directly, like a game, it opens automatically in this panel. For a web game, that means a single web page built from HTML, CSS, and JavaScript, with working buttons, sliders, and keyboard input.

Keep in mind that an artifact runs entirely in the browser with no backend — a server that stores data and handles requests from multiple users. That's a great fit for single-player content like quizzes, puzzles, or sliding-tile games, but it rules out real-time multiplayer or a leaderboard saved on a server.

Before you start

  • A Claude account — the Artifacts screen is available on the Free, Pro, and Max plans (not yet on the mobile app).
  • A web browser, signed in at claude.ai
  • The code-execution-related capability toggled on in Settings — click your name or initials in the lower-left corner, open Settings, and if you see an option related to code execution or file creation that's turned off, turn it on. The exact wording can change over time, so look for whichever label matches on your screen.

Terms in plain language

  • Artifact — a self-contained, runnable piece of code, document, or app that Claude produces during a conversation
  • Publish — the feature that turns an artifact into a web link others can open
  • Claude Code — Claude's developer tool that creates and edits actual code files from a terminal (a text-based command screen)
  • CLI — short for Command Line Interface, a screen where you control a program by typing commands instead of clicking

Step 1 — Describe your game in conversation

Start by telling Claude, in plain language, what game you want. You can go through the Artifacts section in the left sidebar, or simply start a new conversation as usual. Claude often asks a few clarifying questions about rules or layout before writing code — answering those helps the result match what you actually pictured.

For example, you could ask:

Build a number-guessing game.
- The computer picks a random number between 1 and 100
- When I enter a guess, tell me "higher" or "lower"
- When I guess correctly, show how many tries it took
- Use a warm color palette for the background

A new panel opens to the right of the chat and the game runs immediately. If the game responds correctly to your clicks and input in that panel, step 1 is done. Treat the first version as a draft — you'll refine it through follow-up messages.

Step 2 — Polish it: add features and fix issues

Refining the game just means continuing the conversation. Ask for what you want in plain language — "change the background color," "add a score display," "make it look good on mobile" — and Claude updates the same artifact. If something breaks or doesn't behave as expected, use an option like Fix with Claude if it appears on screen, or describe the symptom as specifically as possible, such as "the button doesn't respond when I click it," so Claude can track down the cause.

Watch out: an artifact can't make outside network requests or load external image or font files. So instead of asking to "add this image file," ask for something Claude can draw with code directly, like shapes and colors for a character — that tends to work far more reliably.

Once you're happy with the game, click Publish near the top of the artifact panel to generate a public link anyone can open. After confirming, copy the public address with the copy-link button and paste it into a chat or text message — that's the whole sharing step. Button names and placement may shift with updates, so look for a publish/share control around the panel. Visitors who aren't signed in can play the game immediately without logging in, and anyone signed in to a Claude account can go a step further and copy it into their own account to modify.

Private (only you) Shared within org (Team/Enterprise) Public link (anyone, no sign-in)

A new artifact is private to you by default. On Team and Enterprise plans, you can share it with just your organization; on Free, Pro, and Max plans alike, anyone can generate a public link that makes it viewable to the entire internet with no sign-in required.

Watch out: once you unpublish an artifact, you can't publish that same artifact again. Keep that in mind if you're only taking it down temporarily.

Want to go further? Extend it with Claude Code

Artifacts alone can produce a polished mini-game, but if you want to split the project into multiple files or manage versions with a GitHub repository, Claude Code is the next step. It's Claude's developer tool for creating and editing actual code files from a terminal, capable of handling larger projects than an artifact can.

Watch out: Claude Code isn't available on the Free plan — it requires a Pro plan or higher, or a separate pay-as-you-go API account.

If installing a terminal tool feels intimidating, there's also a browser-based version at claude.ai/code, currently in research preview (an early testing stage). Note that this web version requires connecting a GitHub repository, so you'll need a GitHub account as well. To install the terminal version directly, use the following command on macOS, Linux, or WSL.

curl -fsSL https://claude.ai/install.sh | bash

On Windows PowerShell, use this command instead.

irm https://claude.ai/install.ps1 | iex

After installing, run claude --version in your terminal — if it prints a version number followed by "(Claude Code)," the install worked. Then run claude to go through login, and once you're inside a project folder, you can ask for a game built from multiple files for something more ambitious than a single artifact.

Free ways to deploy your game

There are roughly three ways to deploy a web game for free, depending on your situation.

MethodWhat you needCostBest for
Publish from Claude chat ArtifactsA Claude account (Free plan works)Completely freeSharing a game fast without touching code
Publishing an artifact from Claude CodePro plan or higher, Claude Code installed and signed inIncluded in your subscriptionManaging code across multiple files and still publishing directly
A separate static web hosting serviceDownloaded code, an account with that serviceMost offer a free tierWanting your own custom domain or more customization

The third option isn't an official Claude feature — it's a widely used general approach, and since the interface and steps vary by service and change often, it's safest to follow that service's own current instructions when you actually use it.

Common snags & fixes

  • Symptom: You sent a friend the link but they can't see the game → Cause: You likely copied the conversation URL from your address bar instead of the public link created by Publish — conversation URLs only open for you → Fix: Press Publish in the artifact panel and share the public link it produces.
  • Symptom: no Publish button appears in the artifact panel → Cause: the code-execution-related capability is likely turned off → Fix: click your name or initials in the lower-left corner, open Settings, and turn on the option related to code execution or file creation.
  • Symptom: the game opens but buttons don't respond → Cause: part of the generated code likely doesn't match what you intended → Fix: describe exactly which button does nothing and what you expected, and ask Claude to fix it.
  • Symptom: Claude Code says it can't publish → Cause: you may be on the Free plan, not signed in, or on an outdated Claude Code version → Fix: check your plan, and run /login inside a session to confirm you're signed in.

Where to go from here

Once your basic game works, add features one at a time — difficulty levels, on-screen animation instead of sound effects, or a score record saved only in the browser. If you want to add real AI behavior, like a character you can talk to, artifacts also support calling the Claude API directly from inside them. That works without setting up an API key yourself, but it's worth knowing that when someone else plays your game and uses that feature, it draws on their own Claude usage, not yours.

Frequently asked questions

Q. Where can I find my game again later?
Reopen the conversation where you built it — the artifact panel reappears with your game, and you can keep refining it with follow-up requests.

Q. Can I really build a web game without knowing how to code?
Yes. Claude Artifacts writes the code automatically from your description, so you never need to write code yourself.

Q. Can I build and share a game on the Free plan?
Yes. The Artifacts screen itself is available on the Free, Pro, and Max plans, and the public link you create with Publish works on the Free plan too. Claude Code, however, is not available on the Free plan.

Q. Do I have to use Claude Code?
No. Artifacts alone are enough to build and publish a simple game — move to Claude Code only if you want to split the project into multiple files or manage the code more precisely yourself.

Q. Can I add a leaderboard or login feature that needs a server?
Not really. An artifact is a static page that runs entirely in the browser with no backend, so it can't store data on a server or support features that need multiple users interacting in real time.

Was this helpful?

Keep reading