How to Add an AI Chatbot to Your Mobile App Using the OpenAI or Claude API

Adding an AI chatbot to an app used to mean weeks of work: a language model, a backend, a chat interface, and a lot of glue code. Today you can have a working chatbot in minutes, and you can even let AI write most of the interface for you. This guide pulls together four practical approaches: calling the Claude API from Python, getting AI to generate a complete chat interface, adding free AI to a web app with Puter.js, and building a native iPhone app by talking to Claude inside Xcode. By the end you’ll know which route fits your project and how to avoid the biggest security mistake beginners make.

Four ways to add a chatbot to your app

There is no single “right” way. The best route depends on whether you want to learn the API, generate an interface quickly, avoid paying for usage, or build a native iOS app.

The one rule: never ship your API key inside the app

Before any code, understand the problem that trips up almost every first-time builder. A traditional AI API needs a secret key, and there are no free credits to start with, so you pay upfront. Worse, every person using your app burns your credits. If your app goes viral, your bill goes with it.

And if you put that key directly into app code, anyone can extract it. That is a security nightmare.

Creating an Anthropic API key

You need a key before the Python code will work.

1. Search for Anthropic API in your browser, open the official link and click Start building.
2. Sign up or log in.
3. Go to Settings and open API Keys.
4. Click Create new API key, choose a workspace and give the key a name.
5. Copy the key and store it somewhere safe. You will not be able to view it again.

A useful tip for managing several keys: create separate workspaces from the Workspaces section so each project’s keys stay organized.

Building a chatbot with the Claude API in Python

Install the official package:

pip install anthropic

(Use pip3 if that is how Python is set up on your machine.) The chatbot is an infinite loop: read what the user types, stop if they type exit, otherwise send the message to Claude and print the reply.

import os
import anthropic

# Read the key from an environment variable instead of pasting it into the code
client = anthropic.Anthropic(api_key=os.environ["ANTHROPIC_API_KEY"])

while True:
    user_message = input("You: ")

    if user_message.lower() == "exit":
        break

    response = client.messages.create(
        model="claude-sonnet-5-5",   # use a model that is currently available
        max_tokens=1000,             # limit on the length of the reply
        messages=[
            {"role": "user", "content": user_message}
        ],
    )

    print("Claude:", response.content[0].text)

Run it, say hello and it greets you back. Ask about black holes and you get an elaborate answer. But there is a catch.

Making the chatbot remember the conversation

Ask the chatbot to “summarize what you just said” and it has no idea what you mean. The API does not remember anything between requests. Every call is independent, so you must send the whole conversation each time.

The fix is a list that stores every message. Add the user’s message to the list before the request, then add the chatbot’s reply after it.

import os
import anthropic

client = anthropic.Anthropic(api_key=os.environ["ANTHROPIC_API_KEY"])
conversation = []   # holds the full chat history

while True:
    user_message = input("You: ")

    if user_message.lower() == "exit":
        break

    conversation.append({"role": "user", "content": user_message})

    response = client.messages.create(
        model="claude-sonnet-5-5",
        max_tokens=1000,
        messages=conversation,       # send the whole history, not just the last message
    )

    reply = response.content[0].text
    conversation.append({"role": "assistant", "content": reply})

    print("Claude:", reply)

Now ask about black holes, then ask for a summary, and it summarizes its own previous answer correctly.

Letting AI build the chat interface

A terminal chatbot works, but users expect a real interface. You can have Claude generate a complete, modern chat interface in about ten minutes with no coding knowledge. The secret is a detailed prompt: the better the prompt, the better the output. It’s like giving a chef a detailed recipe versus just saying “make me food.”

Step 1: Write a detailed prompt

Structure your prompt with clear headings and bullet points covering a project overview, the file structure and specific requirements for each file. Here is a sample prompt in that style:

Create a modern AI chatbot interface with three files:
index.html, style.css and script.js.

HTML requirements:
- Clean structure with proper meta tags

CSS requirements:
- Modern, minimalist design
- Responsive layout that works on phone and laptop
- Good color schemes for both light and dark themes

JavaScript requirements:
- Message sending system
- Automatic replies from the bot
- Typing indicator animation (three bouncing dots)
- Theme switching that remembers the user's choice

Step 2: Generate and copy the code

Log in to Claude (sign up takes about 30 seconds; a Google account works), paste the whole prompt into the chat box and let it generate. You should get three separate files: index.html for structure, style.css for styling and script.js for functionality. Copy each one completely, from the first line to the last.

Step 3: Set up VS Code

1. Open VS Code (it’s free) and create three files named index.html, style.css and script.js.
2. Paste the matching code into each file and save all (Ctrl+S or Cmd+S).
3. If you don’t have it yet, open Extensions, search for Live Server and install it.
4. Right-click index.html and choose Open with Live Server. Your chatbot opens in the browser at a localhost address.

Step 4: Test everything

• Type “hello” and press Enter. You should see a smooth animation and bouncing dots while the bot “thinks”.
• Click the sun icon to switch to dark mode, then click again to return to light mode. Refresh to confirm it remembers your choice.
• Resize the window or open it on a phone to check the responsive layout.

Free AI in a web app with Puter.js

Puter.js is a JavaScript library that lets you add AI chat, image generation and text to speech to a web app with a single script tag. There is no signup with OpenAI, no API key to manage and no backend or server. It has a large following on GitHub and gives access to a range of popular text, image and speech models.

Setup

If you use Vue, React or another framework, install it with npm and import it. For plain HTML, add the script tag in your page:

<script src="https://js.puter.com/v2/"></script>

Text chat

The function you need for any chat app is puter.ai.chat. You pass the text and the model name.

<script>
  puter.ai.chat("Write a three-line poem about coffee", {
    model: "MODEL_NAME_FROM_PUTER_DOCS"
  }).then(function (response) {
    document.getElementById("output").textContent = response;
  });
</script>

Model names change often, so copy a currently supported one from Puter’s documentation. In the demo, the chat app had a dropdown with a handful of models for the user to choose from. To run the page locally you need a server, which is why the Live Server extension from the previous section is handy: press Go Live at the bottom of VS Code.

Image generation

For images, the function is puter.ai.txt2img. You give it a prompt and pick one of the supported image models.

puter.ai.txt2img("A futuristic city at sunset", {
  model: "IMAGE_MODEL_FROM_PUTER_DOCS"
}).then(function (image) {
  document.body.appendChild(image);   // shows the generated image
});

In the demo app, clicking a suggested prompt generated the image, with buttons to create a new one or download the result. Text to speech works the same way with its own supported models.

How can it be free? The user-pays model

This is the important part. Puter calls it the user-pays model:

1. A user opens your app and tries to chat or generate an image.
2. A pop-up asks them to sign in with, or create, a Puter account.
3. They use their own free allowance first.
4. When that runs out, they are prompted to add credits to their own account.

You are never charged, even if a million people use your app, because every user uses their own account.

Building a native iPhone app with Claude in Xcode

If you want a real iPhone app rather than a web page, you can work with Claude directly inside Xcode. Claude in Xcode is a coding assistant integration from Apple and Anthropic that became generally available in September 2025. It runs in Xcode’s intelligence panel, understands the context of your project, answers questions in plain language, remembers what was discussed during the session, and can debug, refactor and generate new features. You describe what you want in plain language and it writes the Swift and SwiftUI code.

What you need

• A Mac with Apple Silicon running macOS 26 (Tahoe) or later, as required by Xcode 26.
• Xcode 26 from the Mac App Store. It’s free, but plan for roughly 10 GB of free space for the app and simulators.
• A Claude Pro or Max account (an Anthropic API key is also supported if you prefer more control over usage and billing).
• An iPhone running iOS 26 or the built-in simulator. A physical device is helpful but not required.
• No Swift experience.

Connect Claude to Xcode

1. Install Xcode 26 from the Mac App Store, open it and accept the license agreement.
2. Open Xcode Settings and go to the Intelligence section.
3. Select Anthropic and sign in with your Claude account.
4. Return to the intelligence panel and confirm that Claude shows as the active model.

Create the project

From the welcome screen choose Create new project, pick the iOS App template, name it (the demo uses “Journal App”) and make sure SwiftUI is selected as the interface. You don’t need to understand every file Xcode generates. From here, your job is to describe each feature clearly, let Claude update the project and test the result.

The key idea: five small prompts, not one giant one

The demo built a journal app (create, edit and delete entries with a mood) by splitting the work into five focused conversations. Each step was tested before moving on, and Claude kept everything from earlier steps intact.

Test on a real iPhone

1. Connect your iPhone to the Mac with a USB cable.
2. In Xcode’s device selector, choose your iPhone instead of the simulator.
3. Run the project. Xcode builds the app, installs it and launches it.
4. Open the app from the home screen and repeat the full flow: create, view, edit and save.

This is a genuine native iOS app, not a website in a mobile wrapper, so it can use native iPhone features and keep growing like any other Xcode project.

Connecting a chatbot to a real mobile app

Putting the pieces together, a production-ready setup looks like this:

1. The interface lives in your app (Flutter, React Native, SwiftUI or a web page). It shows messages and sends the user’s text to your server.
2. Your small backend holds the API key, receives the message, adds it to the stored conversation history and calls the Claude API, exactly like the Python example.
3. The reply goes back to the app, which displays it (ideally with a typing indicator while waiting).

Remember that the API doesn’t remember anything, so your backend must store each user’s conversation and send the history with every request. If you don’t want to run a backend and are building for the web, Puter.js is the shortcut, with users covering their own usage.

Common mistakes and gotchas

Frequently asked questions

Conclusion

Adding an AI chatbot to an app is no longer a big project. Start with the Claude API in Python to understand how requests and conversation memory work, use a detailed prompt to generate a polished interface, try Puter.js when you want AI in a web app without managing keys, and use Claude in Xcode when you want a native iPhone app built one small prompt at a time.

Whichever route you choose, remember the three rules that matter most: write specific prompts, send the full conversation history with every request, and never put your secret API key inside an app. Pick one simple idea, build it step by step, test after every change and you’ll have a working chatbot faster than you expect.