Build Custom AI Web Apps with Claude Artifacts & Templates

Customizing the AI Tutor Template

How to Use the Claude Artifacts Gallery

1. Open your web browser and log in to your Claude.ai account.
2. Locate and access the 'Claude Artifacts Gallery' section to browse the collection of ready-made app templates.
3. Scroll through the gallery to explore different types of apps like 'Office Simulator', 'Tutor', or other productivity tools.
4. Select a template you want to use as a base by clicking on the app card.
5. The app will open in the Artifact panel on the right side of the screen, allowing you to view its functionality 'live'.

Customize Templates Using Prompts

1. Go to the Claude chat box on the left side of the Artifact panel.
2. Type a specific prompt instructing Claude to modify the template according to your needs (refer to the Prompt Card).
3. Press 'Enter' and wait for Claude to regenerate the app code based on your new instructions.
4. Once the new Artifact appears, try interacting with the app elements (such as buttons or inputs) to ensure it functions as intended.

Publish and Share Your Web App

1. Click the 'Publish' button located at the top right corner of the Artifact panel.
2. A pop-up will appear; click the 'Publish & Copy Link' button to automatically host the app on the web.
3. Open a new browser tab (Incognito mode is recommended) and 'Paste' the link to see how your app looks to external users.
4. Send the link to anyone you want to share it with; they can use the app directly from their web browser.

How to Fix Errors Automatically

1. If your app isn't working or displays an error message, don't panic.
2. Highlight and 'Copy' the entire error message that appears on the screen.
3. Paste the error message into the Claude chat and instruct Claude to fix it.
4. Wait for Claude to provide the updated version of the code.
5. Test the app again, and once it's working, click 'Publish' once more to update the existing link.