How to Integrate Retool with OpenAI GPT

To access OpenAI's API, you need an API key from the OpenAI Platform. Log in to platform.openai.com and navigate to Settings → API keys in the left sidebar. Click Create new secret key. Give it a name like 'Retool Integration' and optionally restrict it to specific projects if you are using OpenAI's project-based access control. Click Create secret key and copy the key immediately — it is shown only once and starts with 'sk-'. Add billing if your account does not have credits: navigate to Settings → Billing → Payment methods. Store the API key in Retool as a Configuration Variable (Settings → Configuration Variables) named OPENAI_API_KEY marked as a secret. In Retool Resources, click Add Resource and select REST API. Name it 'OpenAI API'. Set Base URL to https://api.openai.com/v1. Under Authentication, select Bearer Token and set the token to {{ retoolContext.configVars.OPENAI_API_KEY }}. Add a default header Content-Type: application/json. Click Save. To verify the connection, create a test query: POST to /models to list available models — a successful response returns a list of model IDs including gpt-4o, gpt-4-turbo, and others your account has access to.

Create a Retool query that calls the OpenAI Chat Completions endpoint. In your app's Code panel, click Create new query. Select the OpenAI API resource. Set Method to POST and Path to /chat/completions. Set Body Type to JSON. The chat completions endpoint requires a model parameter and a messages array. The messages array contains objects with role ('system', 'user', or 'assistant') and content (the text). The system message sets the AI's behavior and persona; the user message provides the actual input. Configure the body: model → 'gpt-4o' (or 'gpt-4o-mini' for faster, cheaper responses), messages → an array with a system message (instructions defining what the AI should do) and a user message (the dynamic input from a Retool component), max_tokens → 500 (limits response length and controls cost), temperature → 0.7 (creativity level: 0 = deterministic, 1 = creative), and optionally response_format → { 'type': 'json_object' } if you want structured JSON output. The response object contains choices[0].message.content with the AI's response text. Create a transformer that extracts this content. Name this query 'generateAIResponse'. Set it to run manually (not on page load) since AI calls cost money and should be triggered by user intent.

1// OpenAI chat completions request body
2{
3  "model": "gpt-4o",
4  "messages": [
5    {
6      "role": "system",
7      "content": "You are a helpful customer support assistant for Acme Corp. You write professional, empathetic responses to customer inquiries. Keep responses concise (under 200 words). Always acknowledge the customer's issue before providing a solution."
8    },
9    {
10      "role": "user",
11      "content": "Customer email: {{ ticketsTable.selectedRow.subject }}\n\nCustomer message: {{ ticketsTable.selectedRow.body }}\n\nCustomer account status: {{ customerData.data[0].status }}\nRecent orders: {{ JSON.stringify(recentOrders.data.slice(0, 3)) }}\n\nPlease draft a helpful response to this customer."
12    }
13  ],
14  "max_tokens": 400,
15  "temperature": 0.6
16}

Implement a concrete AI email drafting panel for customer support. Start with a Table component named 'ticketsTable' connected to a SQL query that fetches open support tickets from your database: SELECT id, subject, body, customer_email, created_at, status FROM support_tickets WHERE status = 'open' ORDER BY created_at DESC LIMIT 50. Add a second query 'getCustomerContext' that runs when a ticket row is selected: SELECT account_status, subscription_tier, total_orders, last_order_date FROM customers WHERE email = {{ ticketsTable.selectedRow.customer_email }}. Add a third query 'getRecentOrders' that fetches the last 3 orders for the selected customer. Now configure the generateAIResponse query to use all this context: inject ticketsTable.selectedRow.subject, ticketsTable.selectedRow.body, getCustomerContext.data[0], and a summary of getRecentOrders.data into the user message. In the UI, add a Container on the right side of the table that shows when a ticket is selected. Inside it: display the ticket subject, body, customer email, account status, and subscription tier in Text components. Below, add a 'Generate Draft Response' button that triggers generateAIResponse. After the AI responds, show the result in a Text Area component pre-populated with the AI draft. The agent can edit the draft before copying or sending. Add a 'Regenerate' button with a temperature of 0.9 for more creative rewrites. Add an event handler on successful generation to insert a log entry: INSERT INTO ai_draft_log (ticket_id, model, prompt_tokens, completion_tokens, draft_text, generated_at) VALUES (...).

1// Transformer: extract AI response and token usage
2const choice = data?.choices?.[0];
3const usage = data?.usage || {};
4
5return {
6  response_text: choice?.message?.content || 'No response generated',
7  finish_reason: choice?.finish_reason || 'unknown',
8  prompt_tokens: usage.prompt_tokens || 0,
9  completion_tokens: usage.completion_tokens || 0,
10  total_tokens: usage.total_tokens || 0,
11  estimated_cost_usd: ((usage.total_tokens || 0) / 1000000 * 2.50).toFixed(6)
12};

Implement bulk AI classification for unprocessed support tickets using OpenAI's structured JSON output mode. Create a query 'classifyTicket' targeting POST /chat/completions with these settings: model → 'gpt-4o-mini' (sufficient for classification, much cheaper), response_format → { 'type': 'json_object' } (forces JSON output), messages → system message: 'You are a support ticket classifier. Given a support ticket, classify it and return ONLY valid JSON with these exact fields: category (one of: Billing, Technical, Account, Feature Request, Other), priority (one of: High, Medium, Low), sentiment (one of: Positive, Neutral, Negative, Frustrated), routing (one of: Engineering, Billing, Customer Success, Self-Service), confidence (0.0-1.0), and reasoning (one sentence). Return only the JSON object, no other text.' User message: 'Ticket subject: {{ selectedTicket.subject }} Ticket body: {{ selectedTicket.body }}'. Create a transformer that parses data.choices[0].message.content as JSON and returns the structured classification object. Build a 'Classify All Unclassified' JavaScript query that iterates over all unclassified tickets in batches of 5, calls classifyTicket for each, and upserts the classification results into a ticket_classifications table. Display the classifications in the main tickets Table with color-coded Tags for priority and sentiment. Add approve/override controls: a Select for each classification field that pre-populates with the AI suggestion but allows manual correction. A 'Confirm Classifications' button bulk-updates the support_tickets table with the approved values.

1// JavaScript query: batch classify tickets with OpenAI
2const unclassifiedTickets = getUnclassifiedTickets.data || [];
3const results = [];
4
5// Process in batches of 5 to manage rate limits
6for (let i = 0; i < unclassifiedTickets.length; i += 5) {
7  const batch = unclassifiedTickets.slice(i, i + 5);
8  const batchResults = await Promise.all(
9    batch.map(async ticket => {
10      try {
11        const classification = await classifyTicket.trigger({
12          additionalScope: { selectedTicket: ticket }
13        });
14        return {
15          ticket_id: ticket.id,
16          ...JSON.parse(classification.response_text),
17          tokens_used: classification.total_tokens,
18          classified_at: new Date().toISOString()
19        };
20      } catch (err) {
21        return { ticket_id: ticket.id, error: err.message };
22      }
23    })
24  );
25  results.push(...batchResults);
26  // Brief pause between batches to respect rate limits
27  if (i + 5 < unclassifiedTickets.length) {
28    await new Promise(r => setTimeout(r, 500));
29  }
30}
31
32return results;

To maintain cost control and improve AI output quality over time, build a usage monitoring panel and a prompt management system. Create an ai_prompts table in your database: id (serial), name (text), system_prompt (text), model (text), max_tokens (integer), temperature (decimal), created_by (text), updated_at (timestamp). This allows non-developer team members to update prompts (system messages) through a Retool form without requiring code changes. In the email drafter and classifier apps, load the active prompt from this table at app load time instead of hardcoding system messages. Create an ai_usage_log table: id (serial), query_name (text), model (text), prompt_tokens (integer), completion_tokens (integer), total_tokens (integer), estimated_cost (decimal), user_email (text), app_name (text), created_at (timestamp). After each OpenAI query, insert a row into this table using the token counts from the API response. Build an 'AI Usage Dashboard' Retool app with: daily and monthly token consumption Charts by model and app, cost tracking (estimated monthly cost based on model pricing rates), a Table of the most expensive queries by user, and a rate limit usage indicator. Add guardrails: if a single query exceeds 10,000 tokens or a user exceeds 100,000 tokens per day, show a warning notification. For complex integrations involving RAG (retrieval-augmented generation), function calling, or enterprise-scale AI workflows connecting OpenAI to multiple internal data sources, RapidDev's team can help architect and build your Retool AI-powered internal tool solution.

1-- Daily AI usage summary query
2SELECT
3  DATE(created_at) AS usage_date,
4  model,
5  app_name,
6  COUNT(*) AS api_calls,
7  SUM(prompt_tokens) AS total_prompt_tokens,
8  SUM(completion_tokens) AS total_completion_tokens,
9  SUM(total_tokens) AS total_tokens,
10  SUM(estimated_cost) AS total_cost_usd
11FROM ai_usage_log
12WHERE created_at > NOW() - INTERVAL '30 days'
13GROUP BY DATE(created_at), model, app_name
14ORDER BY usage_date DESC, total_cost_usd DESC;