Can I store my API keys in a `.env.local` file for a React or Next.js frontend?

No. While Next.js allows you to expose variables to the browser using the `NEXT_PUBLIC_` prefix, you must NEVER do this for private API keys. Your LLM provider keys should strictly remain on the Node.js backend environment to prevent massive financial theft.

Why does the model sometimes break character even if I use a System role?

While models heavily prioritize the System prompt, if the conversation history grows too large and the user constantly injects conflicting instructions, the model can suffer from 'context dilution'. Truncating old, irrelevant history helps keep the model strictly focused on the current System constraints.

Are input tokens and output tokens billed at the same rate?

Almost never. In the vast majority of AI providers (like OpenAI and Anthropic), output tokens (the text the AI generates) are significantly more expensive than input tokens (the prompt and history you send). Always factor this into your cost estimations.

HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

Using OpenAI & Anthropic APIs

Learn to integrate industry-leading models into your applications. This guide covers the technical architecture of Chat Completions, authentication strategies, role-based messaging, and the economic considerations of token usage.

⚡ Total XP: 0|💻 artificialintelligence XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

API Hub

Connectivity logic.

🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

The playground is for testing; the API is for building. Mastering programmatic access to Large Language Models is the absolute foundation of modern AI software development. If you want to build autonomous agents, intelligent chatbots, or dynamic reasoning engines, you have to understand how to connect your code directly to the model's brain.

1The Illusion of Memory (Stateless Architecture)

Here is a concept that typically trips up junior developers: AI APIs have what we call 'total amnesia'. They are completely stateless. Every single time your server sends an HTTP request to OpenAI or Anthropic, the model treats it as a brand new conversation. It has absolutely zero context about what you asked it five seconds ago.

To create the illusion of a fluid, human-like conversation, it is entirely up to you (the developer) to send the *entire chat history* in every new request. We call this the 'Context Window'.

When you see a chatbot that 'remembers' your name, it's not because the AI actually remembered; it's because the frontend application silently appended the previous messages into a massive array and sent the whole payload back to the server. This requires careful state management on your end.

−

// We must resend everything
const requestPayload = {
  model: "gpt-4o",
  messages: fullHistoryArray
};

localhost:3000

Payload Compiled

Context array size: 14 messages.

2Secure Authentication

Let's talk about security, because a mistake here will cost you your job. Connecting to premium models costs real money and requires powerful access keys. These 'API Keys' are practically bearer bonds.

They must be injected into the headers of your HTTP requests to authenticate you with the provider. But here is the critical rule: Never, under any circumstances, expose these keys in your frontend client code (like React components or vanilla JS shipped to the browser).

If you put an API key in the frontend, malicious users will extract it using the browser's developer tools and use it to run up thousands of dollars in charges on your account. You must always construct these requests securely on your backend (Node.js server) where you can safely access your environment variables (process.env).

−

const headers = {
  'Authorization': `Bearer undefined`,
  'Content-Type': 'application/json'
};

localhost:3000

🔒 Secure Node.js Environment

3The Trio of Roles

Modern chat APIs don't just accept a single string of text. They expect a highly organized array of objects, where each object defines a specific role. This semantic separation is the mathematical magic that allows the model to differentiate between your hardcoded backend instructions and the random text typed by an end user.

The three standard roles are:

1. System: Placed at the very top of the array, this is the heart of your agent's behavior. You use it to define the persona, strict rules, and operational limits. Models are trained to heavily prioritize the System prompt over anything else.

2. User: This role represents the human's input. It's the prompt submitted from your application's UI.

3. Assistant: We use this role to reinject the responses that the model itself generated in previous turns. By alternating between user and assistant messages, we build the chronological timeline that creates the illusion of memory.

−

const messages = [
  { role: 'system', content: 'You are a pirate.' },
  { role: 'user', content: 'Hello!' },
  { role: 'assistant', content: 'Ahoy matey!' }
];

localhost:3000

System: Base Persona 📜

User: New Input 👤

Assistant: Past Output 🤖

4Tokenomics & History Truncation

I want you to pay close attention to this, because this is where startups can hemorrhage cash. AI APIs don't charge you per request; they charge you by the Token. A token is roughly a fragment of a word (about 4 characters in English).

Because the API is stateless, your message history array grows larger with every single turn. This means you are constantly paying to re-upload the entire conversation. If you let that array grow indefinitely, your request cost will skyrocket and you will eventually hit the model's hard context limit, crashing your application.

To prevent this, senior engineers implement History Truncation. We use code (like .slice()) to aggressively trim the oldest messages out of the array before making the request. We always preserve the System prompt, but we intentionally discard the user's oldest inputs to save money and keep the payload light.

−

// Keep system prompt + last 10 messages
const optimizedHistory = [
  messages[0], // The System Prompt
  ...messages.slice(-10)
];

localhost:3000

Message index 1-4 (Dropped)

System + 10 Recent Kept

5Step-by-Step Breakdown

Building AI Interfaces. Hello team. Today we are taking a giant leap in our journey as developers. We are going to connect our frontend with super powerful artificial intelligence brains like GPT-4 or Claude. Think of these APIs as the main gateway to advanced reasoning; by mastering this integration, you will be able to incorporate truly human capabilities into any application you build. Get ready, because this changes the game.

Stateless Architecture. Here is a concept that usually confuses a lot at first, and it's super important that you understand it well. Artificial intelligence APIs have what we call 'total amnesia', meaning they are completely stateless. Every time the server sends a response, it completely forgets who you are and what you were talking about. That's why, if we want to have a fluid conversation, it's up to us developers to send the entire chat history in every new request. It's a huge responsibility!

Let's pause to make sure we are all on the same page. We already know that APIs have no memory. So, what is our main strategy to maintain a coherent multi-turn conversation with the artificial intelligence model?

→Use browser cookies
→Resend the entire message history in every new request

Secure Authentication. Let's talk about security for a moment, because this is vital for your careers. Connecting to premium models costs money and requires very powerful access keys. These 'API Keys' are practically cash and must be injected into the headers of your HTTP requests. But listen to me well: never put them in the browser code! Always keep them safe in your backend, using environment variables so no one can steal them.

The Role System. Now let's move on to the structure of our messages. Modern chat APIs not only receive plain text but also use a highly organized role system. Each message must define whether it was written by the system, by the human user, or if it is a response from the assistant. This semantic separation is the magic that allows the model to differentiate between our global instructions and the simple questions of the end user. It's pure math working in our favor!

We're doing great. Imagine you are configuring the base behavior of an agent. What specific role within the messages array do we mainly use to define the personality, strict rules, and operational limits of the model?

→user
→assistant
→system

System Role Deep Dive. Let's dig a little deeper into the 'System' role. This is the heart of your agent's behavior. When we place a system message at the beginning of our history, we are building very strong containment barriers. Here we define the tone, the output format, and any unbreakable rule. Models are mathematically trained to give much more importance to our system commands than to any whim of the user.

Assistant Context. Now let's talk about the 'Assistant' role. We use this role specifically to reinject the responses that the model itself generated in previous turns. By alternating between the user's and the assistant's messages, we build a true chronological timeline. It is this historical thread that gives the model the perfect illusion of having an impeccable human memory. It's a brilliant engineering trick!

Let's review if it became clear how to build that illusion of memory. When constructing our conversation history array to send it to the API, what role should we assign to the messages to save the previous responses that the AI itself has generated?

→assistant
→system
→history

SDK Integrations. Although technically we could write our own HTTP requests by hand using 'fetch', in the professional industry we value our time very much. That's why we use tools like the official SDKs from OpenAI or Anthropic. These wonderful libraries take care of all the heavy lifting under the hood: network retries, TypeScript typing, and error handling. This way we can focus on creating real value faster.

Understanding Tokenomics. I want you to pay close attention to this, because this is where companies can lose a lot of money. The price of using these APIs is calculated in 'Tokens', which are like small fragments of words. Every time we send a huge prompt or receive a long response, we are consuming tokens, and believe me, output tokens are usually quite more expensive. That's why being efficient and precise is not just writing clean code, it's taking care of the project's budget!

History Truncation. So, we have a little big problem. If we keep accumulating messages for the AI to 'remember', our token cost will skyrocket and eventually we will hit the model's context limit. To avoid this disaster, advanced engineers implement a technique called 'Truncation'. Basically, we trim and remove the oldest messages through code, always keeping our valuable initial system prompt intact. This way we save a lot of money without losing the main thread!

APIs Mastered. What a pride! We have conquered API integration, and it truly is a spectacular achievement. Now you know exactly how to protect your credentials, how to trick the lack of memory using well-structured histories, how to enforce strict rules, and how to take care of token economics. With this solid foundation, you are completely ready to take the next leap and build more complex and fascinating architectures. Keep it up!

Build a Real Chat Request. Finish building the request payload every chat completion API call needs.

Level Up 🚀

Advanced cheat sheets, SEO tricks, and interview prep for this topic.

Browser Support

ChromeSupported

Fully supported.

FirefoxSupported

Fully supported.

SafariSupported

Fully supported.

EdgeSupported

Fully supported.

Accessibility (A11y)

1Semantic Usage

Using the proper structure for Building AI Interfaces ensures that screen readers can correctly interpret the content hierarchy and purpose.

SEO Implications

1
Contextual Relevance
Proper implementation of Building AI Interfaces provides search engine crawlers with better context, improving the indexing accuracy of your page.

Best Practices

Clean Code

Always validate your structure when using Building AI Interfaces to prevent layout shifts and DOM inconsistencies.

Separation of Concerns

Keep styling and behavior separate from the structural markup of Building AI Interfaces.

Frequent Bugs

THE BUG

Unexpected layout shifts or styling failures.

THE FIX

Ensure all implementations related to Building AI Interfaces are properly structured according to strict specifications.

Real-World Examples

Production Usage

Here is how Building AI Interfaces is typically implemented in a professional, robust application.

<!-- Best practice implementation of Building AI Interfaces -->
<div class="production-ready">
  <!-- Content -->
</div>

Interview Prep

?Frequently Asked Questions

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Data Leakage

# Wrong
scaler.fit(X)
X_train = scaler.transform(X_train)
X_test = scaler.transform(X_test)

# Correct
scaler.fit(X_train)
X_train = scaler.transform(X_train)
X_test = scaler.transform(X_test)

The Solution //

Never use data from the validation or test sets to train your model. This includes fitting scalers or imputers on the entire dataset before splitting.

The Error //

Overfitting on small datasets

// Solution: Use techniques like Dropout, L2 Regularization, or Early Stopping to prevent the model from overfitting the training data.

The Solution //

Training a complex model (like a deep neural network) on a very small dataset usually leads to memorization instead of generalization. Use simpler models or apply strong regularization.