Skip to main content

OpenAI Integration

Add powerful AI capabilities to your app using OpenAI’s GPT models. Create chatbots, generate content, analyze text, and more.

What You Can Build

  • AI Chat — Conversational interfaces
  • Content Generation — Write text, summarize, translate
  • Q&A Bots — Answer questions about your content
  • Creative Tools — Story writing, brainstorming
  • Analysis — Sentiment analysis, categorization

Prerequisites

  • OpenAI account with API access
  • API key from OpenAI dashboard
  • Credit balance (new accounts get $5 free)

Getting Your API Key

1

Create OpenAI account

Go to platform.openai.com and sign up
2

Navigate to API keys

Click your profile → View API Keys
3

Create new key

Click “Create new secret key”
4

Copy and save

Copy the key immediately — it won’t be shown again!
Keep your API key secret! Anyone with your key can make API calls charged to your account.

Setting Up in Nativeline

Tell Nativeline about your API:
Add OpenAI integration with my API key: sk-xxxxx
Or configure via settings if available.

Building an AI Chat

Basic Chat Interface

Create an AI chat interface:
- Text input at bottom
- Messages list above
- User messages on right (blue)
- AI responses on left (gray)
- Loading indicator while waiting
- Send button and keyboard return to send

Connecting to OpenAI

When user sends a message:
1. Add their message to the chat
2. Show loading indicator
3. Send to OpenAI with conversation history
4. Display the AI response
5. Hide loading indicator

OpenAI Models

ModelBest ForSpeedCost
gpt-4oComplex tasks, reasoningMediumHigher
gpt-4o-miniSimple tasks, chatFastLower
gpt-3.5-turboBasic chat, cost-sensitiveFastLowest

Choosing a Model

Use gpt-4o-mini for the chat feature (fast and affordable)

API Parameters

Temperature

Controls randomness (0 = focused, 1 = creative):
Use temperature 0.7 for creative writing
Use temperature 0.3 for factual Q&A

Max Tokens

Limits response length:
Limit responses to 500 tokens to keep them concise

System Prompt

Sets the AI’s behavior:
Add a system prompt:
"You are a helpful cooking assistant. Answer questions about recipes,
ingredients, and cooking techniques. Be concise and friendly."

Example Use Cases

Chatbot

Create a customer service chatbot that:
- Greets users
- Answers FAQs about [your topic]
- Asks clarifying questions
- Suggests related topics

Content Generator

Build a blog post generator:
- User enters topic
- Select tone (professional, casual, humorous)
- Generate outline first
- Then expand each section
- Allow regeneration of sections

Summarizer

Add a summarize feature:
- User pastes long text
- Tap "Summarize"
- Show condensed version
- Option for bullet points vs paragraph

Writing Assistant

Create a writing assistant:
- Text editor for user's draft
- "Improve" button to polish text
- "Expand" button to add detail
- "Simplify" button for clarity

Handling Conversations

Maintaining Context

Include conversation history for context:
Send the full conversation history to OpenAI so it
understands the context of the conversation.

Trimming History

For long conversations, trim old messages:
Keep the last 10 messages in history to stay within
token limits while maintaining context.

Error Handling

Common Errors

ErrorCauseSolution
Invalid API keyWrong or expired keyCheck key in OpenAI dashboard
Rate limitedToo many requestsWait and retry with backoff
Insufficient quotaOut of creditsAdd credits in OpenAI billing
Context too longToo many tokensTrim conversation history

Handling in App

Handle OpenAI errors gracefully:
- Rate limit: "Please wait a moment"
- Network error: "Check your connection"
- Other errors: "Something went wrong, try again"
Show retry button after errors.

Cost Management

Monitoring Usage

Check usage at platform.openai.com/usage

Reducing Costs

  • Use gpt-4o-mini instead of gpt-4o
  • Set max tokens limit
  • Cache common responses
  • Trim conversation history

Setting Limits

In OpenAI dashboard:
  1. Settings → Billing → Usage limits
  2. Set monthly budget
  3. Get notified before exceeding

Best Practices

Clear system prompts improve results:
  • Define the AI’s role
  • Specify tone and style
  • Set boundaries
  • Include examples
Implement exponential backoff:
  • Wait 1 second, retry
  • If fails, wait 2 seconds
  • Then 4, 8, etc.
API calls take time. Show:
  • Loading indicator
  • “Thinking…” message
  • Disable send button
Check user input before sending:
  • Not empty
  • Within length limits
  • No obvious abuse

Advanced: Streaming

For longer responses, stream tokens as they arrive:
Stream the AI response so text appears word by word
instead of waiting for the complete response.
This provides better UX for longer generations.

DALL-E (Image Generation)

OpenAI also offers image generation:
Add image generation:
- User enters description
- Generate image with DALL-E
- Display the result
- Option to save or regenerate
DALL-E has separate pricing. Check OpenAI pricing page for current rates.

Next Steps