Code Artifacts

Code Artifacts are complete code files presented in the Artifact panel with syntax highlighting, a copy button, and (for some languages) an in-browser run environment. They are the primary output format when Claude writes code you intend to use.

When Claude Creates a Code Artifact vs Inline Code

Claude uses judgment to decide where to put code output:

If Claude puts code inline and you want an Artifact instead: "Put that code in an Artifact." If Claude creates an Artifact and you wanted inline output: "Keep the code in the response, not in a separate Artifact."

Prompting for Code Artifacts

To get a well-formed code Artifact, give Claude enough context to write production-quality code:

• Specify the language and framework: "Write a Python 3.11 script using the requests library..." or "Write a TypeScript module for a Next.js 14 App Router project..."
• State the function signature or interface: "The function should take a list of URLs and return a dict mapping each URL to its status code."
• Specify edge case handling: "Handle network errors gracefully — return None for failed requests rather than raising."
• Ask for comments if needed: "Include inline comments explaining the non-obvious parts."

Running Code in the Browser

For JavaScript, TypeScript, HTML, and React Artifacts, Claude.ai provides an in-browser run environment:

• Click the "Preview" or "Run" button in the Artifact panel to execute the code
• The output appears in the same panel — for HTML/React you see the rendered UI; for JavaScript you see console output
• The sandbox is isolated — it cannot access your local files, make external network requests, or run arbitrary system commands
• Python, Go, Rust, and other server-side languages cannot be run in the browser sandbox — copy and run these locally

The run environment is useful for quickly testing JavaScript logic, demoing interactive UIs, and validating small utilities without setting up a local environment. For anything production-bound, always test locally with your actual data and environment.

Copying and Using Code Artifacts

• Copy to clipboard: The copy button copies the entire Artifact content in one click
• Download as file: Download the code as a file with the appropriate extension (e.g. script.py, utils.ts)
• Paste into your editor: Copy into VS Code, Cursor, or your preferred IDE. If you're using Claude Code, you can reference the Artifact content directly in your workflow.

Iterating on a Code Artifact

After Claude creates a code Artifact, you can ask it to modify, extend, or refactor it in subsequent messages. Claude updates the same Artifact (creating a new version) rather than generating a new one:

• "Add error handling for the case where the API returns a 429 status."
• "Refactor the fetch logic into a separate helper function."
• "Add a test function at the bottom that demonstrates usage."
• "Rewrite the main loop to use async/await instead of callbacks."

For targeted modifications, be specific about which part to change — Claude updates the whole Artifact but targeted instructions produce fewer unintended side changes.

Checklist: Do You Understand This?

• Code Artifacts appear for complete, standalone files — inline code is for short illustrative snippets
• Specify language, framework, function signature, and edge case handling for production-quality output
• JavaScript/TypeScript/HTML/React Artifacts can be run in the browser sandbox; Python and server-side languages must be run locally
• Copy or download Artifacts with one click; paste into your editor or save to your project
• Subsequent modification requests update the existing Artifact with a new version — previous versions remain accessible