Dav/Devs LogoDav/Devs

My OpenAI API Adventure: A Developer's Journey from Frustration to Success

Join my real-world journey of learning to work with OpenAI API! From broken code and misleading tutorials to finally getting it right, discover the setup tips, learning notes, and working JavaScript code that actually works.

·5 min read

By Davina Leong

The Developer's Journey: When AI Teaches You About... AI 🤖💻

Hey there, fellow code adventurers! As a programmer who absolutely loves diving into new technologies, I've been fascinated by all the AI tools floating around. But here's the thing—while I've been using ChatGPT, Bard, and GitHub Copilot like crazy, I hadn't actually built anything with AI APIs yet!

So I decided to roll up my sleeves and get hands-on with the OpenAI API. Spoiler alert: it was more challenging than I expected, but SO worth it! Let me share my journey (and save you some headaches) 🚀

The Learning Reality Check: When AI Can't Help AI 😅

Here's the funny (and slightly frustrating) truth: ChatGPT, Bard, AND GitHub Copilot all gave me broken code!

I spent hours troubleshooting connection issues, getting error after error, and wondering if I was missing something obvious. Finally, I had to step away from the AI assistants and watch a good old-fashioned YouTube tutorial to get things working.

The lesson? Even AI has its limitations, especially when dealing with rapidly changing APIs and authentication methods! 🎯

My GitHub Repository: Follow Along! 📂

Before we dive in, you can check out all my code experiments at: https://github.com/davinaleong/proj-small-projects

Look for the openai and generator scripts—that's where all the magic happens! Feel free to fork, experiment, and improve upon what I've built.

The Complete Setup Tutorial 📚

Note: This tutorial is in JavaScript using Node.js

Ready to get your hands dirty? Here's exactly how to set up your own OpenAI API playground:

Step 1: OpenAI Account Setup 🔐

  1. Create an OpenAI Account: Head to OpenAI's website and sign up
  2. Navigate to API Section: On the main screen, you'll see options for "ChatGPT" and "API"—click "API"
  3. Generate Your API Key:
    • Go to the API keys section
    • Click "Create new secret key"
    • CRITICAL: Copy this key immediately—you won't see it again!
    • Store it securely (we'll use it in the next step)

Step 2: Project Setup 🛠️

Create a fresh Node.js project with these essential components:

Required NPM Packages:

npm install dotenv openai

Environment Variables (.env file):

OPENAI_API_KEY=your-secret-key-goes-here

Security Note: Never commit your .env file to version control! Add it to your .gitignore immediately.

Step 3: The Working Code

After all the trial and error, here's the JavaScript code that actually works:

const dotenv = require("dotenv").config()
const OpenAI = require("openai")

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

async function main(prompt) {
  const completion = await openai.chat.completions.create({
    messages: [{ role: "system", content: prompt }],
    model: "gpt-3.5-turbo",
  })

  console.log(completion.choices[0])
}

main("Tell me a joke.")

Step 4: Running Your First AI Request 🚀

Open your terminal and run:

node index

Sample Output:

{
  index: 0,
  message: {
    role: 'assistant',
    content: "Why don't scientists trust atoms?\nBecause they make up everything!"
  },
  logprobs: null,
  finish_reason: 'stop'
}

Success! Your computer just told you a joke using artificial intelligence! 🎉

Understanding the Code: What's Actually Happening 🧠

Let me break down each part so you understand what's going on:

The Setup Section:

const dotenv = require("dotenv").config()
const OpenAI = require("openai")
  • dotenv: Loads your secret API key from the .env file
  • OpenAI: The official library for interacting with OpenAI's services

The Connection:

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })

This creates your authenticated connection to OpenAI's servers using your secret key.

The AI Request:

const completion = await openai.chat.completions.create({
  messages: [{ role: "system", content: prompt }],
  model: "gpt-3.5-turbo",
})

Breaking this down:

  • messages: The conversation history (in this case, just your prompt)
  • role: "system": This tells the AI how to behave or what its role is
  • model: Which AI model to use (GPT-3.5-turbo is fast and cost-effective)

Experimentation Ideas: Making It Your Own 🎨

Now that you have the basic setup, here are some fun experiments to try:

Different Prompts:

main("Write a haiku about programming.")
main("Explain quantum physics like I'm 5 years old.")
main("Create a recipe using only ingredients that start with 'B'.")

Different Roles:

messages: [
  { role: "system", content: "You are a helpful coding mentor." },
  { role: "user", content: "How do I learn JavaScript?" }
]

Different Models:

  • gpt-3.5-turbo: Fast and economical
  • gpt-4: More powerful but costs more
  • gpt-4-turbo: Balanced power and speed

Cost Considerations: Keeping Your Wallet Happy 💰

Important: The OpenAI API isn't free! Here's what you need to know:

Pricing Structure:

  • GPT-3.5-turbo: Very affordable for experimentation
  • GPT-4: More expensive but higher quality responses
  • Billing: Pay per token (roughly per word) used

Money-Saving Tips:

  1. Start with GPT-3.5-turbo for learning and testing
  2. Set spending limits in your OpenAI account
  3. Be conscious of prompt length—longer prompts cost more
  4. Test thoroughly before scaling up

Common Pitfalls and How to Avoid Them ⚠️

Authentication Errors:

  • Double-check your API key is correctly set in the .env file
  • Ensure your OpenAI account has billing set up
  • Verify you haven't exceeded your usage limits

Connection Issues:

  • Make sure you have internet connectivity
  • Check if your firewall is blocking the requests
  • Verify the OpenAI service status if requests are failing

Code Errors:

  • Always use await when making API calls
  • Handle errors gracefully with try-catch blocks
  • Check the OpenAI documentation for API changes

Advanced Features to Explore 🔍

Once you've mastered the basics, try these more advanced concepts:

Conversation Context:

const messages = [
  { role: "system", content: "You are a helpful assistant." },
  { role: "user", content: "What's the weather like?" },
  { role: "assistant", content: "I don't have access to real-time weather data." },
  { role: "user", content: "That's okay, just tell me about different weather patterns." }
]

Temperature Control:

const completion = await openai.chat.completions.create({
  messages: [{ role: "system", content: prompt }],
  model: "gpt-3.5-turbo",
  temperature: 0.7  // Controls creativity (0 = focused, 1 = creative)
})

Response Limits:

max_tokens: 150  // Limits the length of the response

Building Something Practical 🔨

Here's a more practical example—a simple code reviewer:

async function reviewCode(code) {
  const prompt = `Review this code and provide suggestions for improvement:

${code}

Please provide:
1. Any bugs you notice
2. Performance improvements
3. Code style suggestions
4. Overall rating (1-10)`;

  const completion = await openai.chat.completions.create({
    messages: [{ role: "system", content: prompt }],
    model: "gpt-3.5-turbo",
  })

  return completion.choices[0].message.content
}

The Developer's Mindset: Learning from Failure 🧘‍♂️

Here's what this experience taught me about learning new technologies:

Embrace the Struggle:

When multiple AI tools give you broken code, it's not a sign you're doing something wrong—it's a learning opportunity!

Diversify Your Learning Sources:

  • AI assistants are helpful but not infallible
  • Documentation is crucial but sometimes outdated
  • Community tutorials often have real-world insights
  • Video tutorials can show you the full process

Document Your Journey:

That's exactly why I'm writing this post! Your struggles and solutions can help other developers.

What's Next in My AI Journey 🌟

This OpenAI API experiment is just the beginning! I'm planning to explore:

  • Building a chatbot for my portfolio website
  • Creating content generation tools for blog writing
  • Integrating AI into existing projects
  • Exploring other AI APIs like Claude, Gemini, and local models

Community and Collaboration 🤝

Want to Collaborate?

If you're also experimenting with AI APIs, I'd love to connect! Here's how we can help each other:

  • Share working code examples
  • Troubleshoot issues together
  • Explore creative applications
  • Document best practices

Contribute to My Project:

My GitHub repository is open for contributions! If you:

  • Find bugs in my code
  • Have improvements to suggest
  • Want to add new features
  • Have different implementation approaches

Feel free to open issues or submit pull requests!

Final Thoughts: The Joy of Tinkering 🎉

There's something incredibly satisfying about getting technology to work, especially when it involves cutting-edge AI. This project reminded me why I love being a developer—the challenge, the learning process, and ultimately, the success of making something work.

Key takeaways from this journey:

  • Don't trust AI blindly (even when learning about AI!)
  • Multiple approaches lead to better understanding
  • Documentation and community are invaluable resources
  • Persistence pays off when learning new technologies

Most importantly: Don't be afraid to experiment! The worst that can happen is you learn something new while having fun.

Happy tinkering, everyone! 🛠️ 💻 😁

What AI projects are you working on? What challenges have you faced with API integration? Share your experiences—let's learn from each other's adventures in the exciting world of AI development! 🚀✨

openaiapijavascripttutoriallearningdevelopment
Dav/Devs - Full Stack Developer Portfolio