The restaurant analogy
An API (Application Programming Interface) works like a waiter in a restaurant. You (the customer) do not walk into the kitchen and cook your own food. You tell the waiter what you want, the waiter takes your order to the kitchen, and the kitchen sends back your meal through the waiter.
In software, your website is the customer. The API is the waiter. And the kitchen is another service like Stripe (payments), Google Maps (locations), or OpenAI (AI responses). Your website sends a request through the API, and the service sends back the data your website needs.
What a REST API looks like
Most web APIs follow a pattern called REST. A REST API uses standard web addresses (URLs) to represent different resources. To get a list of products, your code might request "GET /api/products". To create a new order, it sends "POST /api/orders" with the order details.
The response comes back as JSON, a structured text format that looks like this: {"name": "Blue T-Shirt", "price": 29.99, "inStock": true}. Your website reads this data and displays it to the user.
APIs you use every day
- Stripe API: When you buy something online, the website sends your card details to Stripe's API and gets back a payment confirmation
- Google Maps API: When a website shows a map with your location, it is calling Google's Maps API to get the map tiles and directions
- Weather APIs: Weather apps fetch forecasts from weather service APIs and display them in their own interface
- Social login APIs: When you click "Sign in with Google," the website calls Google's authentication API to verify your identity
- OpenAI API: When an app generates text or answers questions with AI, it sends your prompt to OpenAI's API and displays the response
API keys: your identity card
Most APIs require an API key. This is a long string of characters that identifies who is making the request. It serves two purposes: the service knows who to charge for usage, and it can block access if someone misuses the API.
API keys are secrets. If someone gets your Stripe API key, they could process charges on your account. This is why API keys should never appear in your frontend code where users can see them. They belong on the server side.
When you build with CodePup AI, API keys for services like Stripe and OpenAI are stored securely on the server. The generated code handles the security correctly so your keys are never exposed to the browser.
Why APIs matter for web applications
Without APIs, every website would have to build everything from scratch. Want to accept payments? Build your own payment system. Want to send emails? Run your own email server. Want to show a map? Draw it yourself. APIs let you assemble applications from specialized services, each one built by a team that does that one thing well.
Rate limits and pricing
APIs typically have rate limits: a maximum number of requests you can make per minute or per day. Free tiers might allow 100 requests per day. Paid tiers allow thousands or millions. Understanding these limits matters because they determine what your application can do at scale.
Pricing models vary. Stripe charges per transaction. OpenAI charges per token (roughly per word). Google Maps charges per map load. When planning your application's costs, API usage is often the biggest variable expense.
APIs and AI builders
AI website builders use APIs extensively. CodePup AI connects to Supabase's API for database operations, Stripe's API for payments, and various AI provider APIs for intelligent features. The AI writes all the API integration code for you, including error handling and security. You describe what you want, and the builder figures out which APIs to call and how.