AI-Assisted Development

These days, developers and non-developers are building apps using AI coding assistants like Claude Code, Codex, Lovable, Base44, Antigravity, and Replit Agent. The development flow at times can be described as “vibe coding” which is a term Andrej Karpathy coined in early 2025. Vibe coding is attractive for various reasons:

You can prototype, iterate and create full-stack applications in minutes instead of hours, days, or even weeks.
You don’t need deep expertise on UI/UX, databases, APIs, and so on.
You can focus on what you want your app to do rather than integration details.

Technical expertise is very helpful when you run into errors or need to scale your application for production environments. The right prompting techniques can help you avoid many common pitfalls.

This tutorial teaches you how to use these tools to build apps with Gloo AI. You’ll craft effective prompts and learn best practices for building production-ready apps.

Prerequisites

Before starting, ensure you have:

A Gloo AI Studio account
Your API key from the API Credentials page
Access to an AI coding assistant (Bolt.new, Lovable, Replit Agent, Claude Code, Codex, etc.)
Basic understanding of web applications (frontend + backend)

Note: If you prefer to code manually, start with our Authentication Tutorial and other hands-on tutorials.

How This Tutorial Works

This tutorial is different from traditional code tutorials. Instead of showing you code to copy, we’ll show you prompts that generate the code for you. The process:

Choose your use case (chat app, tool use, etc.)
Copy the prompt from this tutorial
Paste into your AI coding assistant (Bolt.new, Lovable, Replit Agent, Claude Code, Codex, etc.)
Generate the app
Test and deploy the generated app

What makes a good prompt:

Clear objective (what you’re building)
Specific architecture (React, Vue, serverless, etc.)
Complete authentication pattern (API key as Bearer token)
Exact API endpoints and request/response formats
UI/UX requirements (mobile-responsive, loading states, etc.)

Each example in this tutorial follows this structure, so you can adapt them to your needs.

Step 1: Understanding Prompt Structure

Before we dive into specific examples, let’s understand what makes an effective prompt for building Gloo AI applications. Every effective prompt has five components:

1. Clear Objective

Start with a single sentence describing what you’re building.

❌ Bad: “Make a chat thing”
✅ Good: “Build a chat application that connects to Gloo AI with streaming responses”

2. Architecture Requirements

Specify your tech stack so the AI generates appropriate code.

Frontend: React, Vue, Next.js, vanilla JavaScript
Backend: Node.js/Express, serverless functions, backend functions, Python/Flask
Important: Always separate frontend and backend for secure authentication

3. Authentication Flow

Always include instructions to ensure API key authentication is implemented securely. The key? Never expose credentials in frontend code. The figure below shows the flow for a properly authenticated Gloo AI API call.

Every prompt you create must include instructions to ensure this, for example:

Use API key authentication:
Backend reads GLOO_API_KEY from environment variables
Use Authorization: Bearer {GLOO_API_KEY} for all API calls
NEVER expose GLOO_API_KEY to frontend

4. API Interaction Details

Be specific about:

What the frontend sends to your backend
What your backend sends to Gloo AI (exact endpoint, headers, body)
What your backend returns to the frontend

5. UI/UX Requirements

Describe the user experience:

Visual layout (chat bubbles, forms, cards)
Interactive elements (buttons, inputs, dropdowns)
Feedback mechanisms (loading states, errors, success messages)
Responsive design needs

Practice: Before using the examples below, try writing a one-sentence objective for an app you want to build. This helps you choose the right example to start from.

Step 2: Choose Your Starting Point

Select an example prompt from the three examples in this section. We’ve prepared these tested prompts for common use cases. Start with Example 1 (Chat Application) if you’re new to this approach. Each example includes:

When to use this pattern
Which platforms we’ve tested on
The complete prompt ready to copy

Example 1: Chat Application (with Streaming Support)

What you’ll get: A chat app with real-time, typewriter-style AI responses When to use this:

Want immediate feedback as AI generates responses
Need to handle long responses gracefully
Want users to see progress in real-time

Key concept: Streaming shows response chunks as they’re generated instead of waiting for the complete response. Tested on: Antigravity, Bolt.new, Claude Code, Codex, Lovable, Replit Agent, v0.dev The Prompt: Copy the entire prompt below and enter it into your coding assistant of choice:

# Gloo AI Streaming Chat

Build a chat app with real-time streaming responses from Gloo AI.
API key authentication in backend; frontend receives SSE stream.

**Auth:**

Use API key authentication:
1. Backend reads GLOO_API_KEY from environment variables
2. Use Authorization: Bearer {GLOO_API_KEY} for all API calls
3. NEVER expose GLOO_API_KEY to frontend

**Streaming flow:**

Frontend initiates:
POST /api/chat/stream
Body: { "message": "..."}

Backend calls Gloo with streaming:
POST https://platform.ai.gloo.com/ai/v2/chat/completions
Authorization: Bearer {GLOO_API_KEY}
Content-Type: application/json

Body:
```json
{
  "messages": [
    {
      "role": "user",
      "content": "User's message"
    }
  ],
  "auto_routing": true,
  "stream": true
}
```

Backend forwards SSE to frontend:
- Parse Gloo's streaming response chunks
- Forward as Server-Sent Events
- Accumulate full message
- Send suggestions at end

**UI Requirements:**
- Typewriter effect for AI responses
- Cancel stream button
- Smooth markdown rendering as chunks arrive
- Show typing indicator

All five components of creating an effective prompt are shown in the prompt:

Component	Where in Prompt	Example Text
1. Clear Objective	First sentence	”Build a chat app with real-time streaming responses from Gloo AI.”
2. Architecture Requirements	Second sentence	”API key authentication in backend; frontend receives SSE stream.”
3. Authentication Flow	”Auth:” section	”Use API key authentication: 1. Backend reads GLOO_API_KEY from env and sends it as a Bearer token…“
4. API Interaction Details	”Streaming flow:” section	Frontend initiates: `POST /api/chat/stream` Backend calls Gloo AI: `POST https://.../ai/v2/chat/completions` Backend forwards SSE chunks to frontend
5. UI/UX Requirements	”UI Requirements:” section	”- Typewriter effect for AI responses…”

Notice how each component is clearly separated and specific. The AI coding assistant knows exactly what to build, how to structure it, how to authenticate, which APIs to call, and what the UI should look like.

Example 2: Completions with Tool Use

What you’ll get: An application that returns structured, predictable JSON responses. When to use this:

You need consistent data formats (not free-form text)
Building forms, assessments, or data extraction tools
Need machine-readable output for downstream processing
Want type-safe responses with validation

Key concept: Tool use forces the AI to follow a JSON schema you define, perfect for applications that need predictable outputs. Tested on: Antigravity, Bolt.new, Claude Code, Codex, Lovable Example Use Cases:

Personal growth plans
Recipe generation with structured ingredients
Data extraction from text into structured format

The prompt example shows a goal-setting assistant that provides a structured growth plan based on a user’s goal. The Prompt:

# Gloo AI Goal-Setting Assistant

Build a goal-setting assistant that takes a user’s goal and returns a
structured growth plan with actionable steps and timelines. Use Gloo
AI's completions with tool use feature to get structured, predictable
JSON responses.

**Auth:**

Use API key authentication:
1. Backend reads GLOO_API_KEY from environment variables
2. Use Authorization: Bearer {GLOO_API_KEY} for all API calls
3. NEVER expose GLOO_API_KEY to frontend

**API flow:**

Frontend sends:
{
  "goal": "User's goal or question",
  "toolType": "growth_plan"  // or other structured output types
}

Backend calls Gloo with tool definition:
POST https://platform.ai.gloo.com/ai/v2/chat/completions
Authorization: Bearer {GLOO_API_KEY}
Content-Type: application/json

Body:
{
  "auto_routing": true,
  "messages": [
    {
      "role": "system",
      "content": "You are a helpful assistant that creates personalized growth plans."
    },
    {
      "role": "user",
      "content": "I want to grow in my faith"
    }
  ],
  "tools": [
    {
      "type": "function",
      "function": {
        "name": "create_growth_plan",
        "description": "Generate a structured personal growth plan",
        "parameters": {
          "type": "object",
          "properties": {
            "title": {
              "type": "string",
              "description": "A clear, inspiring title for the growth plan"
            },
            "areas": {
              "type": "array",
              "items": {
                "type": "object",
                "properties": {
                  "area": {
                    "type": "string",
                    "description": "Specific area of growth"
                  },
                  "actions": {
                    "type": "array",
                    "items": {
                      "type": "string"
                    },
                    "description": "Concrete action steps"
                  }
                },
                "required": ["area", "actions"]
              },
              "description": "Different areas of growth with specific actions"
            },
            "timeline": {
              "type": "string",
              "description": "Suggested timeline for the plan"
            }
          },
          "required": ["title", "areas", "timeline"]
        }
      }
    }
  ],
  "tool_choice": "required"  // Force AI to use the tool
}

Response structure:
{
  "id": "chatcmpl-abc123",
  "choices": [
    {
      "finish_reason": "tool_calls",
      "index": 0,
      "message": {
        "content": null,
        "role": "assistant",
        "tool_calls": [
          {
            "id": "call_xyz789",
            "type": "function",
            "function": {
              "name": "create_growth_plan",
              "arguments": "{\"title\":\"Faith Growth Journey\",\"areas\":[{\"area\":\"Daily Prayer\",\"actions\":[\"Set aside 15 minutes each morning\",\"Use a prayer journal\"]},{\"area\":\"Scripture Study\",\"actions\":[\"Read one chapter daily\",\"Join a Bible study group\"]}],\"timeline\":\"30 days\"}"
            }
          }
        ]
      }
    }
  ],
  "created": 1755118870,
  "model": "gloo-anthropic-claude-sonnet-4.5",
  "object": "chat.completion",
  "usage": {
    "completion_tokens": 391,
    "prompt_tokens": 1631,
    "total_tokens": 2022
  }
}

Backend parses and returns to frontend:
{
  "title": "Faith Growth Journey",
  "areas": [
    {
      "area": "Daily Prayer",
      "actions": [
        "Set aside 15 minutes each morning",
        "Use a prayer journal"
      ]
    },
    {
      "area": "Scripture Study",
      "actions": [
        "Read one chapter daily",
        "Join a Bible study group"
      ]
    }
  ],
  "timeline": "30 days"
}

**UI Requirements:**
- Input form for user's goal/question
- Display structured output in formatted cards/sections
- Show loading state during API call
- Handle and display schema validation errors
- Option to regenerate with different parameters
- Export structured data as JSON or CSV

Try spotting where the 5 components to crafting a good prompt can be found in the prompt above. Hint: Look at Example 1’s breakdown.

Example 3: Building AI Overviews

What you’ll get: An AI Overview feature that retrieves relevant snippets and generates a grounded answer with inline citations.

This example uses item recommendations functionality that requires you to have a Pro or Enterprise plan as well as content uploaded to your content library.

When to use this:

You want a search-first experience with synthesized answers
You need source-aware responses with explicit citation mapping
You want a UI pattern similar to AI overview cards

Key concept: Retrieve relevant snippets first, then ground a Completions v2 response only in those sources. Tested on: Antigravity, Bolt.new, Claude Code, Codex, Lovable, Replit Agent The Prompt:

# Gloo AI Overview

Build an AI Overview feature that takes a user's search query, retrieves relevant faith-based content snippets, and generates a synthesized AI answer with inline source citations.

- Frontend (ex: React)
- Backend (ex: serverless functions or Node.js/Express)

**Auth:**

Use API key authentication:
1. Backend reads GLOO_API_KEY from environment variables
2. Use Authorization: Bearer {GLOO_API_KEY} for all API calls
3. NEVER expose GLOO_API_KEY to frontend

**API flow:**

Frontend sends:
```json
{
  "query": "What is my purpose in life?"
}
```

Step 1 — Backend fetches relevant sources from Gloo:
```
POST https://platform.ai.gloo.com/ai/v1/data/items/recommendations/verbose
Authorization: Bearer {GLOO_API_KEY}
Content-Type: application/json

Body:
{
  "query": "What is my purpose in life?",
  "collection": "GlooProd",
  "tenant": "{your_tenant}",
  "publishers": ["{your_publisher}"],
  "max_snippet_count_overall": 5,
  "certainty_threshold": 0.5
}

Response structure:
[
  {
    "item_id": "...",
    "item_title": "Finding True Happiness",
    "item_url": "",
    "uuids": [
      {
        "uuid": "...",
        "snippet": "# Finding True Happiness...",
        "certainty": 0.703
      }
    ]
  }
]

Note: item_url may be empty or contain a link.
```

From the response, extract up to 5 sources. For each source, capture:
- item_title — used for citation tooltip
- item_url — used for citation link
- The first snippet from uuids[] — used as context for the AI

Step 2 — Backend generates a grounded AI answer:
```
POST https://platform.ai.gloo.com/ai/v2/chat/completions
Authorization: Bearer {GLOO_API_KEY}
Content-Type: application/json

Body:
{
  "messages": [
    {
      "role": "system",
      "content": "You are a helpful assistant. Answer the user's question using ONLY the provided sources. Insert a citation marker like [1], [2], etc. inline immediately after each sentence or claim that draws from a source. Use only the sources given. Be concise."
    },
    {
      "role": "user",
      "content": "Sources:\\n[1] {item_title_1}: {snippet_1}\\n[2] {item_title_2}: {snippet_2}\\n...\\n\\nQuestion: {query}"
    }
  ],
  "auto_routing": true
}
```

Backend returns to frontend:
```json
{
  "answer": "The key to happiness, from a Christian perspective, is found in a relationship with God. [1] God's grace is unconditional. [2] This lasting joy is rooted in understanding one's identity as a beloved child of God. [3]",
  "sources": [
    {
      "index": 1,
      "title": "Finding True Happiness",
      "url": "https://..."
    },
    {
      "index": 2,
      "title": "God's Unconditional Grace",
      "url": "https://..."
    },
    {
      "index": 3,
      "title": "Finding Joy",
      "url": "https://..."
    }
  ]
}
```

**UI Requirements:**
- Display a search bar at the top with a clear (×) and submit button
- Below the search bar, show an AI Overview card with:
  - A header row with a star/sparkle icon, the label "AI Overview"
  - Render the answer text with each [N] marker replaced by a URL link icon
  - Each link icon should be hoverable — on hover, show a tooltip with the source title and a link to url
  - Show a loading skeleton while waiting for the response
- Display a disclaimer below the answer: "AI-generated answer. Please verify critical facts."
- Show an error banner if either API call fails

Step 3: Generate Your Application

After copying a prompt to your AI coding assistant, follow these steps:

1. Set Up Your Gloo AI Credentials

Enter your Gloo AI credentials if prompted during code generation. This typically applies to coding assistants that generate code online such as Lovable and Replit Agent.
Enter your credentials as instructed after code generation. This typically applies to assistants that create code locally such as Claude Code and Codex.

Get your credentials from Gloo AI Studio > API Credentials.

2. Enter Your Publisher and Tenant (Example 3 Only)

If you’re using Example 3 (Building AI Overviews), you’ll need to provide two additional values before your app will work:

Publisher — name of your publisher
Tenant — tenant identifier

These values are used in the recommendations API call. Find these values in Gloo AI Studio:

Navigate to the “Manage Organizations” page.
In your organization’s row, click on “View Publishers”.
Note the publisher name.
The tenant identifier is derived from the publisher name by removing any spaces. For example, if your publisher name is “Faith Matters,” the tenant identifier would be “FaithMatters.”

Enter the two values as environment variables or when prompted by your AI coding assistant.

3. Review the Generated Code

Check that API key authentication is in the backend only
Verify environment variables are properly configured
Ensure error handling is present for 401, 429, 500 errors
Confirm the API key is loaded from environment variables

4. Start the Application

Online coding tools will automatically start your app in a Preview tab. For locally generated code:

Follow instructions (typically in a README) to install dependencies
Start the backend and frontend servers

Step 4: Test Your Application

Once your app is running, check that it’s working well.

Example 1: Chat Application (with Streaming Support)

Enter a message and ensure the results are streamed in. You should see something like this:

Example 1: Streaming Chat in Action - Lovable — Streaming chat generated with Lovable

Example 1: Streaming Chat in Action - Codex — Streaming chat generated with Codex

Because these coding models are generative, the app UI will vary with each run — even using identical prompts. However, the overall functionality should consistently match your specifications.

Example 2: Completions with Tool Use

Enter a test goal, for example “I want to grow in faith”. You should see something similar to the following:

Example 2: Tool Use in Action - Bolt — Tool use app generated with Bolt

Example 2: Tool Use in Action - Claude Code — Tool use app generated with Claude Code

Example 3: Building AI Overviews

Enter a search query (for example, “What is my purpose in life?”). Verify that:

The UI shows a loading skeleton while waiting
The answer includes inline citation markers rendered as link icons
Hovering each link icon shows the source title and link

You should see something similar to the following:

Example 3: Search in Action - Replit Agent — Search app generated with Replit Agent

Example 3: Search in Action - Antigravity — Search app generated with Antigravity

Iterate if Needed

If something isn’t right, use follow-up prompts:

“Add error handling for network timeouts”
“Make the UI mobile-responsive”
“Add a loading skeleton instead of a spinner”
“Change the color scheme to match our brand”

Step 5: Understanding Advanced Patterns

As you build more complex applications, you’ll want to understand these patterns. You can ask your AI coding assistant to implement these by adding them to your prompts. You can also use them in a follow-up prompt.

Pattern 1: API Key Loading

Implement API key loading:
- Load GLOO_API_KEY once at startup from environment variables
- Reuse the same key for every API call
- Never log the API key
- Keep the key only in backend memory

Short version: “Load GLOO_API_KEY from environment variables and reuse it for every request”

Pattern 2: Comprehensive Error Handling

Implement comprehensive error handling:

401 Unauthorized:
- API key invalid, missing, or revoked
- Verify GLOO_API_KEY is set correctly
- Return error to user (do not retry — a static key won't become valid)

429 Rate Limited:
- Implement exponential backoff (1s, 2s, 4s, 8s)
- Show user-friendly message about temporary limit
- Queue requests if possible
- Log rate limit occurrences

500 Server Error:
- Show user-friendly error message
- Log full error details for debugging
- Retry once after 2 seconds
- If retry fails, fail gracefully

Network Errors:
- Retry with exponential backoff
- Set maximum retry attempts (3-5)
- Timeout after 30 seconds
- Show connection error message

Short version: “Implement comprehensive error handling with automatic retry for 401 and exponential backoff for 429”

Pattern 3: Client-Side Rate Limiting

Implement client-side rate limiting:
- Track requests per user in Redis or memory
- Implement sliding window (e.g., 100 requests/hour per user)
- Return 429 with retry-after header when limit hit
- Show rate limit status in UI (e.g., "47/100 requests remaining")
- Queue requests when approaching limit
- Allow burst requests with token bucket algorithm

Short version: “Implement sliding window rate limiting with 100 requests per hour per user” Practice: Try adding one of these patterns to Example 1 (Chat Application) by appending the instruction to the prompt or using it in a follow-up prompt.

Platform-Specific Optimizations

Different AI coding assistants have different strengths. Here are a few pointers to get the best results from each:

Base44 / Bolt.new / Lovable / Replit Agent / v0.dev

Use assistants like ChatGPT to create a detailed project requirements document (PRD) first. Review and split into phases for implementation.
Upload screenshots or sketches instead of describing layouts.
Stick to the tool’s default stack to avoid friction.
Use automatically created checkpoints to revert to a previous version if needed.
Iterate in small steps rather than requesting complete rewrites.

Claude Code / Codex

Go into plan mode before coding.
Break projects into short, reviewable steps or components.
Review results often, request refinements after each pass.
Start fresh sessions or limit irrelevant history to reduce confusion.
Be clear about what “done” means (ex: passing unit tests, zero lint errors, responsive design).

Antigravity

Define a high-level goal (e.g., “Implement search bar”) instead of small tasks.
Utilize Agent Manager for parallelizing and overseeing tasks.
Request Artifacts like Screenshots or Browser Recordings for verification.

Troubleshooting

Here are some common issues you may run into with these examples and in general when using AI coding assistants to build with Gloo AI.

503 errors when backend calls API:
- Verify the endpoint being used in the code.
- Provide the coding assistant with links to relevant resources, such as the API reference or related tutorial documentation.
500 errors calling completions with tool use:
- Verify the endpoint being used in the code.
- Verify that the model being used supports tool use.
- Try the API call directly in the playground.

What You’ve Learned

Congratulations! You now know how to effectively use AI assistants to build with Gloo AI. You learned how to structure effective prompts, properly secure your API calls, then tested these out on some example use cases.

Next Steps

Check out the API documentation for complete API reference
Review other tutorials where you can work directly with code.

Give us feedback We would love to hear from you as well:

Found a better way to structure a prompt? Share it with us.
Generated an innovative application? We’d love to see it.

This is a new way to learn. Please let us know:

Which prompts worked best for you?
Which AI coding assistant you prefer?
What examples you’d like to see added?

Get Started

Completions

Content

Search & Recommendations

Legacy

AI-Assisted Development

Prerequisites

How This Tutorial Works

Step 1: Understanding Prompt Structure

1. Clear Objective

2. Architecture Requirements

3. Authentication Flow

4. API Interaction Details

5. UI/UX Requirements

Step 2: Choose Your Starting Point

Example 1: Chat Application (with Streaming Support)

Example 2: Completions with Tool Use

Example 3: Building AI Overviews

Step 3: Generate Your Application

1. Set Up Your Gloo AI Credentials

2. Enter Your Publisher and Tenant (Example 3 Only)

3. Review the Generated Code

4. Start the Application

Step 4: Test Your Application

Example 1: Chat Application (with Streaming Support)

Example 2: Completions with Tool Use

Example 3: Building AI Overviews

Iterate if Needed

Step 5: Understanding Advanced Patterns

Pattern 1: API Key Loading

Pattern 2: Comprehensive Error Handling

Pattern 3: Client-Side Rate Limiting

Platform-Specific Optimizations

Base44 / Bolt.new / Lovable / Replit Agent / v0.dev

Claude Code / Codex

Antigravity

Troubleshooting

What You’ve Learned

Next Steps

​Prerequisites

​How This Tutorial Works

​Step 1: Understanding Prompt Structure

​1. Clear Objective

​2. Architecture Requirements

​3. Authentication Flow

​4. API Interaction Details

​5. UI/UX Requirements

​Step 2: Choose Your Starting Point

​Example 1: Chat Application (with Streaming Support)

​Example 2: Completions with Tool Use

​Example 3: Building AI Overviews

​Step 3: Generate Your Application

​1. Set Up Your Gloo AI Credentials

​2. Enter Your Publisher and Tenant (Example 3 Only)

​3. Review the Generated Code

​4. Start the Application

​Step 4: Test Your Application

​Example 1: Chat Application (with Streaming Support)

​Example 2: Completions with Tool Use

​Example 3: Building AI Overviews

​Iterate if Needed

​Step 5: Understanding Advanced Patterns

​Pattern 1: API Key Loading

​Pattern 2: Comprehensive Error Handling

​Pattern 3: Client-Side Rate Limiting

​Platform-Specific Optimizations

​Base44 / Bolt.new / Lovable / Replit Agent / v0.dev

​Claude Code / Codex

​Antigravity

​Troubleshooting

​What You’ve Learned

​Next Steps

Prerequisites

How This Tutorial Works

Step 1: Understanding Prompt Structure

1. Clear Objective

2. Architecture Requirements

3. Authentication Flow

4. API Interaction Details

5. UI/UX Requirements

Step 2: Choose Your Starting Point

Example 1: Chat Application (with Streaming Support)

Example 2: Completions with Tool Use

Example 3: Building AI Overviews

Step 3: Generate Your Application

1. Set Up Your Gloo AI Credentials

2. Enter Your Publisher and Tenant (Example 3 Only)

3. Review the Generated Code

4. Start the Application

Step 4: Test Your Application

Example 1: Chat Application (with Streaming Support)

Example 2: Completions with Tool Use

Example 3: Building AI Overviews

Iterate if Needed

Step 5: Understanding Advanced Patterns

Pattern 1: API Key Loading

Pattern 2: Comprehensive Error Handling

Pattern 3: Client-Side Rate Limiting

Platform-Specific Optimizations

Base44 / Bolt.new / Lovable / Replit Agent / v0.dev

Claude Code / Codex

Antigravity

Troubleshooting

What You’ve Learned

Next Steps