Make your first app with AI — Codex and Claude Code

You can ask it to do the work, too

An AI agent can create files and run programs in a folder you allow it to use. You describe what you want, then try what it makes.

Start with one screen that does one useful thing. Accounts and payments can wait.

1. Set up on your computer

Pick one tool—you do not need both. You will need an account and an eligible plan. Check current pricing and supported operating systems on the official sites.

Codex

Install the app from the official guide and sign in. Select Codex for development, then create a project or open your working folder.

Official download Setup guide

Claude Code

Install the Claude app and sign in. Choose Code → Local → Select folder to open your workspace. You do not need to install Node.js or the command-line version separately.

Official download Setup guide

Claude Code on Windows also needs Git for Windows. If it is missing, install it with the default options, then restart Claude.

Choose a folder and initial settings

Create an empty “blue-quiz-demo” folder in Documents and select it as the AI's workspace.
Work on this computer: use Codex's default Windows native environment on Windows, or Local in Claude Code.
Keep the initial language and model settings. Review permission requests before approving them; do not switch to full access.

Do not select a whole folder of personal photos or work documents. Check your school or workplace rules, and ask what an unfamiliar action does before approving it.

2. Tell it what to make

Try a five-question quiz. Copy this into the AI's message box and send it.

A five-question quiz

Design, implement, and test a three-choice study quiz inside the selected folder.
- Use five general-knowledge questions. Show the correct answer and a short explanation, and prevent answering the same question twice.
- Show the final score. Try again must return to question one with a score of zero.
- Use English, support keyboard operation, and make controls easy to tap on a phone.
- Use a single index.html with HTML, CSS, and JavaScript. No external libraries, login, payments, or network requests.
Ask only necessary questions. Report how to run it, what you tested, and what remains untested. Do not publish it yet.

For your own idea, add who will use it and what counts as done. For example: “This is for my own studying. It is ready when I can review the questions I got wrong.”

Prefer a checklist for work?

A work checklist

Design, implement, and test a work checklist.
It is ready when I can add an item, mark it done, and delete it.
Use sample items. Save data only in this browser; it will not be shared across devices.
Use English and make it easy to use on a phone.
Work only inside the selected folder. Explain how to open and test it. No login, payments, external APIs, or publishing.

3. Try it yourself, then fix it

Open index.html from your working folder in a browser. If it will not open, ask the AI how. A reply saying “done” is not the same as a working app.

Does choosing an answer show the result and explanation?
Do the final score and Try again button work?
Are text and buttons usable in a narrow window?

Ask for one fix at a time. Say what you did, what happened, and what you wanted to happen.

Asking for a fix

When I press Try again, the old score is still there.
Return to the first question and reset the score to zero.
Keep the other working features unchanged.
Tell me what you checked and what you have not checked. Give me a short checklist to try it myself.

Remove names, email addresses, keys, and other private information from screenshots or errors before sharing them. Back up your files before making changes.

Picking it up tomorrow, or in a new conversation

Keep a short note in the project folder instead of relying only on chat history. We use this approach when developing Blue, too.

Leave a project note

Save a short project-notes.md in the working folder: the app's purpose, decisions, how to run it, what has and has not been checked, and what to do next.
Do not include passwords or personal information.

Next time, open the same folder and ask: “Read project-notes.md and the current code, then help me continue.” Keep the note out of the files you publish.

4. When you want someone else to use it

Publish from Codex or Claude Code with a Blue API key →

So far, the app runs on your computer. Making it available at a URL is called publishing, or deployment. Blue is one place to do that.

Start by uploading files through the Blue console. You do not need an API key.

How to publish on Blue

Prepare the files for publishing

I want to publish this app on Blue. Read the deployment specification first:
https://blue-dev1.sola.inc/support/ai-ready/ai?lang=en

I will upload it manually in the console. Package only the required files into a ZIP (or provide the single HTML file), and tell me which file to choose.
Exclude project notes, secrets, and unnecessary files.
Wait for my confirmation before publishing or overwriting an existing app. Give me a checklist for the published app and label anything not yet tested.

Create a Blue account and open the new-app upload flow in the console.
Select the prepared file. Check the app name and visibility, then publish.
Open the resulting URL and test the main buttons before sharing it.

Public (noindex) still lets people with the URL view the app. It asks search engines not to index the page; it is not access control.

Publish on Blue See plans

Later, you can publish directly from your AI

Create a key in the console's API Keys section. Give the AI the deployment specification and ask how to configure the key without putting it in chat or code. Manage it yourself and check expiry or revoke it when finished. See AI Ready for details.

Keep making small improvements

Ask someone to try it and tell you what was confusing. Fix one thing at a time in the same project folder, test it, and update the existing app.

Data saved only in one browser is not shared across devices when you publish. If you need shared data later, describe how it should work and discuss the design with your AI first.

If you get stuck

I do not understand the words or actions

Try: “Explain the next action and its purpose using the item names shown on screen.” You do not need to approve an action you do not understand.

Can I use work documents?

Start with sample data. Before using real documents, check your organization's rules, what may be sent to an AI, and what may be published.

Can I continue something from AI Build?

A session export can download saved conversation and code. Review it before sharing it with your AI. If no code was saved, start from your requirements.

Next: save data and share it

Build a shared checklist — save, share across browsers, and update →