🤖

Learn to Build with Nyata AI!

A Fun Guide for Young Coders 👨‍💻👩‍💻

📊 Your Learning Journey

Start Basics First Code Build! 🎉 Done!
1

🌟 What is an API?

Imagine you're at a restaurant. You don't go into the kitchen to make your own food, right? Instead:

1

You tell the waiter what you want

"I'd like a pizza please!"

2

The waiter goes to the kitchen

They tell the chef your order

3

The waiter brings back your food

Yummy pizza arrives at your table! 🍕

💡 Here's the cool part!

An API (Application Programming Interface) works just like that waiter! It takes your request, sends it to a computer (the kitchen), and brings back the answer!

Nyata AI API is like a super smart waiter that knows everything about Bristol! You can ask it questions like "Where can I find free food?" and it will bring back helpful answers! 🎉

2

📚 Words You Need to Know

Before we start coding, let's learn some important words:

API A messenger that lets your code talk to other computers
Request A question or command you send to the API (like ordering food)
Response The answer the API sends back to you (like getting your food)
API Key A special password that proves you're allowed to use the API (like a membership card)
JSON A way to organize information that computers understand (like a structured list)
URL The web address where the API lives (like a restaurant's address)

🎯 Quick Quiz!

What is an API Key?

A) A type of keyboard
B) A special password to use the API
C) A computer game
3

📦 Understanding JSON

JSON is like a organized way to write information. Think of it like filling out a form!

📝 Real Life Example

If you wrote about yourself on paper, it might look like this:

  • Name: Alex
  • Age: 12
  • Favourite Colour: Blue

In JSON, that same information looks like this:

JSON Example 
{
  // This is called a JSON object
  // Each line has a "name" and a "value"
  
  "name": "Alex",        // Text goes in quotes
  "age": 12,              // Numbers don't need quotes
  "favouriteColour": "Blue"
}

🔑 JSON Rules to Remember:

  • Use { and } to wrap everything
  • Put "quotes" around names and text
  • Use : between the name and value
  • Use , between each item (but not after the last one!)
4

🤖 Meet the Nyata AI API

Now let's see how to talk to Nyata AI! Here's what we need:

📍

The API Address (URL)

https://ai.mottatracking.com/external_api.php
🔑

Your API Key

You get this from the API Dashboard

💬

Your Question (Message)

What you want to ask the AI

When we send a message to Nyata AI, it looks like this:

What We Send to the API 
{
  // Tell the API which AI model to use
  "model": "ft:gpt-4.1-mini-2025-04-14:nyata:bristol:ChciyaQP",
  
  // Our conversation with the AI
  "messages": [
    {
      "role": "user",      // "user" means it's from you!
      "content": "Where can I find free food in Bristol?"
    }
  ]
}

And the API sends back something like this:

What the API Sends Back 
{
  "success": true,    // It worked!
  
  "message": {
    "role": "assistant",   // The AI is talking
    "content": "There are several places in Bristol where you can find free meals..."
  }
}
5

🎨 Building Your First Web Page

Let's create a simple web page where you can chat with Nyata AI!

⚠️ Before You Start

You'll need a text editor like Notepad (Windows), TextEdit (Mac), or VS Code. You'll also need an API key from the dashboard!

Step 1: Create a new file called my-nyata-chat.html

Step 2: Copy this code into your file:

my-nyata-chat.html 
<!-- This tells the browser it's an HTML page -->
<!DOCTYPE html>
<html>

<head>
    <!-- The title shows in the browser tab -->
    <title>My Nyata AI Chat</title>
    
    <!-- This makes our page look nice -->
    <style>
        /* Make the body look nice */
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        
        /* Style our title */
        h1 {
            color: #4F46E5;
            text-align: center;
        }
        
        /* Style the text box */
        #question {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            border: 2px solid #4F46E5;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        
        /* Style the button */
        #askButton {
            width: 100%;
            padding: 15px;
            font-size: 18px;
            background-color: #4F46E5;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        
        /* Make button change when you hover */
        #askButton:hover {
            background-color: #4338CA;
        }
        
        /* Style the answer box */
        #answer {
            margin-top: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            border: 1px solid #ddd;
            min-height: 100px;
        }
    </style>
</head>

<body>
    <!-- Our page title -->
    <h1>🤖 Ask Nyata AI</h1>
    
    <!-- Text box for typing questions -->
    <input 
        type="text" 
        id="question" 
        placeholder="Ask me anything about Bristol..."
    >
    
    <!-- Button to send the question -->
    <button id="askButton" onclick="askNyata()">
        Ask Nyata! 🚀
    </button>
    
    <!-- Box where the answer will appear -->
    <div id="answer">
        Your answer will appear here...
    </div>

    <!-- This is our JavaScript code -->
    <script>
    // 🔑 PUT YOUR API KEY HERE!
    const API_KEY = "your_api_key_here";
    
    // 🌐 This is the API address
    const API_URL = "https://ai.mottatracking.com/external_api.php";
    
    // This function runs when you click the button
    async function askNyata() {
        
        // Step 1: Get the question from the text box
        const questionBox = document.getElementById("question");
        const userQuestion = questionBox.value;
        
        // Step 2: Check if they typed something
        if (userQuestion === "") {
            alert("Please type a question first!");
            return;
        }
        
        // Step 3: Show "Loading..." while we wait
        const answerBox = document.getElementById("answer");
        answerBox.innerHTML = "🤔 Thinking...";
        
        // Step 4: Send the question to the API
        try {
            const response = await fetch(API_URL, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-API-Key": API_KEY
                },
                body: JSON.stringify({
                    model: "ft:gpt-4.1-mini-2025-04-14:nyata:bristol:ChciyaQP",
                    messages: [{
                        role: "user",
                        content: userQuestion
                    }]
                })
            });
            
            // Step 5: Get the answer from the API
            const data = await response.json();
            
            // Step 6: Show the answer! (OpenAI-style response)
            if (data.choices && data.choices.length > 0) {
                answerBox.innerHTML = "🤖 " + data.choices[0].message.content;
            } else {
                answerBox.innerHTML = "❌ Oops! Something went wrong.";
            }
            
        } catch (error) {
            // If there's an error, show a message
            answerBox.innerHTML = "❌ Error: " + error.message;
        }
    }
    </script>
</body>
</html>

🎯 What Each Part Does:

  • <style> - Makes everything look pretty
  • <input> - The box where you type your question
  • <button> - The button you click to ask
  • <div id="answer"> - Where the AI's answer appears
  • <script> - The code that makes it all work!
6

🔍 Let's Understand the Code

Let's break down the JavaScript code step by step:

Part 1: Setting Up 
// This is like saving important information in boxes

// Box 1: Your special password
const API_KEY = "your_api_key_here";

// Box 2: The address of Nyata AI
const API_URL = "https://ai.mottatracking.com/external_api.php";

💡 What is "const"?

const means "constant" - it creates a box that holds information and won't change. Like your home address - it stays the same!

Part 2: Sending to the API 
// "fetch" is like sending a letter
const response = await fetch(API_URL, {

    // POST means we're sending information
    method: "POST",
    
    // Headers are like writing your return address
    headers: {
        "Content-Type": "application/json",  // We're sending JSON
        "X-API-Key": API_KEY                   // Our password
    },
    
    // Body is the actual letter content
    body: JSON.stringify({
        model: "ft:gpt-4.1-mini-2025-04-14:nyata:bristol:ChciyaQP",
        messages: [{
            role: "user",
            content: userQuestion
        }]
    })
});

💡 What is "await"?

await means "wait here until you get an answer." It's like waiting for your pizza to be delivered before you can eat it! 🍕

Part 3: Getting the Answer 
// Convert the response to something we can read
const data = await response.json();

// Check if it worked (OpenAI-style response)
if (data.choices && data.choices.length > 0) {
    // YES! Show the AI's answer
    answerBox.innerHTML = "🤖 " + data.choices[0].message.content;
} else {
    // Something went wrong
    answerBox.innerHTML = "❌ Oops! Something went wrong.";
}
7

🎮 Try It Out!

Now let's test what you've learned! Here's a working demo:

Live Demo - Ask Nyata AI

Your answer will appear here... 🤖

⚠️ Note

This demo needs a valid API key to work. For the demo to function, you would need to add your API key to the code!

🌟 Fun Things to Ask Nyata!

Try these questions:

  • "Where can I find free meals in Bristol?"
  • "What events are happening in Bristol?"
  • "How can I get help with housing?"
  • "Tell me about community support in Bristol"
8

🚀 Level Up Your Chat!

Here are some cool things you can add to make your chat even better:

🎨

Add More Colours

Change the background color or button colors in the CSS!

Try Different Colours 
/* Change the button to green */
#askButton {
    background-color: #10B981;  /* Green */
}

/* Or try orange! */
#askButton {
    background-color: #F59E0B;  /* Orange */
}

/* Or pink! */
#askButton {
    background-color: #EC4899;  /* Pink */
}
📝

Save the Chat History

Show all the questions and answers, not just the last one!

Add Chat History 
// Instead of replacing, ADD to the answer box

// Get what's already there
let currentContent = answerBox.innerHTML;

// Add the new question and answer (OpenAI-style response)
answerBox.innerHTML = currentContent + 
    "<p><strong>You:</strong> " + userQuestion + "</p>" +
    "<p><strong>Nyata:</strong> " + data.choices[0].message.content + "</p><hr>";
⌨️

Press Enter to Send

Let users press Enter instead of clicking the button!

Enter Key Support 
// Add this at the bottom of your script

// Listen for when someone types
document.getElementById("question").addEventListener("keypress", function(event) {
    
    // Check if they pressed Enter
    if (event.key === "Enter") {
        // Call our askNyata function!
        askNyata();
    }
});

🏆 Final Challenge!

Now that you know the basics, try creating your own Bristol Helper app!


Your mission:

🎓

What You Learned Today!

✓

What an API is

A messenger between your code and other computers

✓

How JSON works

A way to organize information that computers understand

✓

How to use the Nyata AI API

Send questions and get helpful answers about Bristol!

✓

How to build a simple web app

HTML for structure, CSS for style, JavaScript for actions!

🌟 You're Amazing!

You've just learned real coding skills that professional developers use every day! Keep practicing and building cool things!

📚

Helpful Resources