• Students can submit software in addition to spreadsheets.
• Artifacts: single-page HTML apps. Claude can create and deploy.
• More complex software (with backend server). They can run locally or deploy in the cloud.

• If an app gets its data from browser input and does not need to reach outside, then the code can usually run in the browser.
• Double-click the file in your file explorer and it opens in your browser.

• Python compiled to WebAssembly to run inside a browser.
• A browser runs a JavaScript wrapper for WebAssembly. No Python installation and no server are needed.
• Many but not all Python libraries are accessible via pyodide.
• The first load downloads the Python runtime, so the page takes a few seconds to start.

• Read or write files on your computer, except a file you upload or download
• Keep a secret: anyone can view the source, so an API key or a password in the page is public
• Connect to an external database
• Run when the page is closed, for example a job scheduled for every Monday
• Share data between users: each browser keeps its own copy

• Claude calls a single-page HTML app an artifact. Anthropic provides free online deployment.
• GitHub Pages is another easy free deployment option (more later)

Ask AI to build a single-page HTML bond calculator app. Inputs are face value, annual coupon rate, payments per year, years to maturity, and yield to maturity, an annual rate compounded at the payment frequency. Show the price, Macaulay duration, modified duration, and convexity (in years squared), and a chart of price against yield with the input yield marked.

• You hand a host your app. It runs the app and puts it behind a public URL.
• There is no server for you to administer.
• Railway, Render, Fly, and Heroku all do this.

1. Create GitHub and Railway accounts.
2. Ask AI to install the GitHub and Railway CLIs.
3. In a terminal, run gh auth login and railway login. Each opens your browser to sign in.
4. Ask AI to rewrite the bond pricing app as a FastAPI app in a new Git repo.
5. Ask AI to push the repo to GitHub.
6. Ask AI to create and deploy a new Railway service connected to the GitHub repo.

• Instead of using GitHub, you can ask AI to install Docker.
• Then ask AI to build a Dockerfile and Docker image for the app.
• Then ask AI to create a new Railway service using the Docker image.

• Another alternative is to deploy the single-page HTML app using GitHub Pages.
• Ask AI to use the GitHub API to set up GitHub pages and to deploy the app.

• The harness is the program that sends your messages to the model and runs the tools it asks for: Claude Code, ChatGPT.
• The server gives the harness a text description of each tool: name, purpose, and inputs.
• The harness sends the descriptions to the model with each request.
• The model returns a tool call. The harness sends it to the server, and the server runs the tool.

• AI can write MCP servers for us.
• Ask AI to create an MCP server with tools to return all datasets in French’s data library.
• Ask AI how to launch it and connect it as a local server.
• Or, ask AI to deploy it on Railway and connect it to Claude via the URL supplied by Railway.

• Work with AI until you get what you want.
• Tell AI to create a skill so you can get the same thing the next time.
• Give the skill a meaningful name.
• As you use it and find things to add or modify, tell AI to edit the skill.

• Tell AI you want a skill for deploying FastAPI apps at Railway.
  
• And another skill for deploying single-page HTML apps at GitHub pages.
• After the skill is created, start a new conversation to make it available.

• Mechanism for distributing skills.
• Anthropic’s plugin marketplace: github.com/anthropics/claude-plugins-official

• A marketplace is a GitHub repo.
• Create the repo. Students add it with /plugin marketplace add you/repo.
• To contribute plugins, add students as collaborators or have them open pull requests.

1. Open Customize and go to the Plugins tab.
2. Click Add, then Add marketplace.
3. Choose Add from a repository.
4. Enter kerryback/kerryback-public.

• Tell AI to create a skill for computing monthly returns using the yfinance Python library and adjusted closing prices from Yahoo Finance.
• Tell AI to publish a plugin marketplace containing the skill.

• Ask AI to install the research plugin from kerryback/kerryback-public, and ask AI what it does and how to work with it.
• Ask AI about the skills and plugins in Lu Han’s GitHub repos: github.com/hanlulong.

@tool(
    "add_two_numbers",
    "Add two numbers and return the sum.",
    {"a": Annotated[float, "The first number"],
     "b": Annotated[float, "The second number"]},
)
async def add_two_numbers(args):
    total = args["a"] + args["b"]
    return {"content": [{"type": "text", "text": str(total)}]}

Pick some topic you teach. Create a skill and an app for it. Should they be tools you provide or class assignments?

• Add the marketplace and install the plugin in Claude Code.
• Start a new session. Type “make a tutor for …” and point at your slides, notebooks, or code.

Take the topic you selected earlier. Build a tutor for it.

An app run by a skill

• The skill needs one key: ELEVENLABS_API_KEY, and only to generate audio.
• The author pastes it into a banner in the app. The app checks it with ElevenLabs and stores it in ~/.voiceover/.env.
• The key sits outside the skill’s folder, so a plugin update does not delete it.
• ElevenLabs’ free tier covers some minutes of audio each month, not a full deck.
• The free tier allows 2 requests at once. The app sends 2 by default, and the author can raise that in Audio settings.

• The Send button calls POST /api/email/send. The agent’s shell can reach that route too, and so can the routes that edit, delete, and apply.
• SKILL.md lists those routes and tells the agent never to call them. That is an instruction, not a permission.
• A hook in the plugin checks each tool call and blocks any call that names those routes. It matches text, so a disguised request can get past it.
• The app rejects those routes unless the request carries a token that it makes at launch and puts in the browser’s page. That stops a stray curl, not an agent that reads the page first.