Turn Claude AI Web Creations into Desktop Apps

What you’ll get

You will be able to turn web content created by Claude AI, such as HTML or React code, into a standalone desktop application that you can install on your computer. This is useful for making your AI-generated tools feel more like real applications, with their own icons and windows, rather than just browser tabs.

Tools you need

• Claude (freemium): To generate the initial web content (HTML, React code) that you want to turn into an app.
• npm (free): A package manager for Node.js, used here to install the necessary tool.
• npx (free): A tool that comes with npm, used to run the conversion command without installing it globally.
• Node.js (free): A JavaScript runtime environment that npm and npx require to run. You’ll need to install this on your computer first.

Steps

1. Install Node.js and npm: If you don’t have them already, download and install Node.js from its official website. npm is included with Node.js. You should see confirmation messages after installation.

2. Install the conversion tool: Open your computer’s terminal or command prompt and run the following command to install the @baaqar/artifact-to-pwa tool globally. This makes it available to use anywhere on your system.

   npm install -g @baaqar/artifact-to-pwa

   You should see output indicating the package has been installed successfully.

3. Convert a local file: If you have your Claude-generated HTML or React code saved as a local file (e.g., my-app.jsx), navigate to the folder containing the file in your terminal and run this command, replacing ./my-app.jsx with the actual path to your file.

   npx artifact-to-pwa ./my-app.jsx

   The tool will process your file and create a new folder containing the native desktop application.

4. Convert a published URL: If your Claude artifact is already published online at a URL (e.g., https://claude.site/artifacts/abc123), you can convert it directly by running this command, replacing the URL with your artifact’s URL.

   npx artifact-to-pwa https://claude.site/artifacts/abc123

   The tool will fetch the content from the URL and generate the desktop application.

Original source

This workflow is based on the work by Baaqar Naqi, who shared how to transform web artifacts generated by Claude AI into installable native desktop applications. The process is designed to be straightforward, requiring only a single command to convert your code.

Notes & variations

• Free tier alternative: You can use any AI chatbot that generates HTML or React code as your starting point, not just Claude. The key is the output format.
• Common mistake: Ensure your Claude artifact uses localStorage if you need persistent data. The tool automatically handles localStorage, but if your artifact doesn’t use it, there’s no data to persist.
• Tip for better results: If your Claude artifact is complex, test the generated desktop app thoroughly to ensure all features work as expected. The tool aims for zero code changes, but complex interactions might require minor adjustments in the original artifact.