#Problem help

1 messages · Page 1 of 1 (latest)

bitter echo
#

Hi!
I have this situation an i think someone can help me
I have a landing page for my company that's completely finished. I created it with HTML, CSS, and JS in Visual Studio Code, along with the help of Claude Opus 4.5 AI extension. My landing page is supposed to have a custom AI about the company using an OpenAI API key, but it's not working at all. I don't know how to make my custom AI work. Could you tell me what other data I need or what I should do to get it working

oak meteorBOT
#

Hi @bitter echo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

You’re very close; the missing pieces are mostly about how you call the OpenAI API and where you keep your API key.

From the docs and examples, here’s what you need to do:

1. Don’t call the API directly from your landing page

OpenAI explicitly recommends never putting your API key in browser code (HTML/JS) because anyone can see and steal it. Requests should go through your own backend server instead.[API key safety]

So your setup should be:

Browser (landing page JS) → Your backend (Node/Python/etc.) → OpenAI API

2. Create and store your API key as an environment variable

  1. Create an API key in the OpenAI dashboard:
    <https://platform.openai.com/api-keys> [Quickstart]

  2. Store it as an environment variable, e.g.:

    macOS / Linux:

    export OPENAI_API_KEY="your_api_key_here"

    Windows (PowerShell):

    setx OPENAI_API_KEY "your_api_key_here"

    [Quickstart env]

Your backend code will read OPENAI_API_KEY automatically if you use an official SDK.[Libraries env]

3. Add a simple backend that calls OpenAI

If you use Node.js, install the official SDK:[Libraries JS]

npm install openai

Then in a small server file (for example server.mjs):

import OpenAI from "openai";
import express from "express";

const client = new OpenAI(); // reads OPENAI_API_KEY from env
const app = express();
app.use(express.json());
#

app.post("/api/chat", async (req, res) => {
try {
const userMessage = req.body.message;

const response = await client.responses.create({
  model: "gpt-5-nano",
  input: `You are a custom assistant for MyCompany. Answer based only on this info: ... \n\nUser: ${userMessage}`,
});

res.json({ reply: response.output_text });

} catch (err) {
console.error(err);
res.status(500).json({ error: "OpenAI request failed" });
}
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));


This pattern (using the official SDK and environment variable) matches the docs.[\[Libraries JS\]](<https://platform.openai.com/docs/libraries#install-an-official-sdk>)

---

### 4. Connect your landing page JS to your backend

In your existing HTML/JS, instead of calling OpenAI directly, send the user’s question to `/api/chat`:

```js
async function sendToAI(message) {
  const res = await fetch("/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message }),
  });
  const data = await res.json();
  return data.reply;
}

Then update your UI with reply.

5. If it still “does nothing”

Check:

  • You’re using the correct API key and not mixing keys.[Incorrect key]
  • Your backend actually receives the request (check logs / console).
  • Any error messages from the OpenAI API in your backend logs.

If you can share (sanitized) snippets of your current JS and how you tried to call the API, I can map them directly to this working pattern.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bitter echo Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bitter echo
#

Give me the prompt to give that to my IA en visual code and what she makes all of that what you just say

bitter echo
oak meteorBOT
#

Let me check the knowledge base for you again. One moment! :books: