Build AI Apps with Vibe Coding Tools + PromptOwl

You: "Build me a chat interface that uses GPT-4"

AI Coder: "Sure! Here's the code... you'll need to:
- Set up OpenAI API keys
- Handle rate limiting
- Manage conversation history
- Build evaluation pipelines
- Handle multiple models
- Set up monitoring
- ..."

You: "I just wanted a chatbot..."

┌─────────────────────────────────────────────────────────┐
│                     YOUR APP                             │
│  (Built with Cursor, Bolt, v0, Lovable, Replit, etc.)   │
│                                                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │
│  │  Frontend   │  │   Backend   │  │   Database  │      │
│  │  (React)    │  │  (Node.js)  │  │  (Supabase) │      │
│  └──────┬──────┘  └──────┬──────┘  └─────────────┘      │
└─────────┼────────────────┼───────────────────────────────┘
          │                │
          │    API Call    │
          │                ▼
┌─────────────────────────────────────────────────────────┐
│                    PROMPTOWL                             │
│                                                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │
│  │   Agent     │  │  Knowledge  │  │  Evaluation │      │
│  │   Logic     │  │    Base     │  │   System    │      │
│  └─────────────┘  └─────────────┘  └─────────────┘      │
│                                                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │
│  │  Multi-LLM  │  │  Analytics  │  │   Tools     │      │
│  │  Support    │  │  Dashboard  │  │   & RAG     │      │
│  └─────────────┘  └─────────────┘  └─────────────┘      │
└─────────────────────────────────────────────────────────┘

You are a friendly customer support assistant.

Guidelines:
- Answer questions from the provided documentation
- Be concise and helpful
- If you don't know, say so and offer to connect with human support
- Always maintain a professional, warm tone

Create a Next.js chat application with the following:

1. A clean chat interface with:
   - Message history display
   - Input field with send button
   - Loading state while waiting for response

2. API integration:
   - POST to https://promptowl.ai/api/prompt/[PROMPT_ID]
   - Headers: Content-Type: application/json, X-API-Key: [API_KEY]
   - Body: { sessionId: string, message: string }
   - Handle streaming responses

3. Store the API key in .env.local as PROMPTOWL_API_KEY
4. Create a server action or API route to proxy requests (don't expose key to client)

5. Style with Tailwind CSS, make it look modern and clean

Use this as the API endpoint: https://promptowl.ai/api/prompt/YOUR_PROMPT_ID

import { NextRequest, NextResponse } from 'next/server';
 
export async function POST(request: NextRequest) {
  const { message, sessionId } = await request.json();
 
  const response = await fetch(
    `https://promptowl.ai/api/prompt/${process.env.PROMPTOWL_PROMPT_ID}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-API-Key': process.env.PROMPTOWL_API_KEY!,
      },
      body: JSON.stringify({
        sessionId,
        message,
      }),
    }
  );
 
  const data = await response.json();
  return NextResponse.json(data);
}

'use client';
import { useState } from 'react';
 
export default function Chat() {
  const [messages, setMessages] = useState<Array<{role: string, content: string}>>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [sessionId] = useState(() => `session-${Date.now()}`);
 
  const sendMessage = async () => {
    if (!input.trim()) return;
 
    const userMessage = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setLoading(true);
 
    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: input, sessionId }),
      });
 
      const data = await res.json();
      const assistantMessage = data.messages?.find((m: any) => m.role === 'assistant');
 
      if (assistantMessage) {
        setMessages(prev => [...prev, { role: 'assistant', content: assistantMessage.content }]);
      }
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setLoading(false);
    }
  };
 
  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Support Chat</h1>
 
      <div className="border rounded-lg h-96 overflow-y-auto p-4 mb-4">
        {messages.map((msg, i) => (
          <div key=`{i}` className={`mb-2 ${msg.role === 'user' ? 'text-right' : ''}`}>
            <span className={`inline-block p-2 rounded-lg ${
              msg.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200'
            }`}>
              {msg.content}
            </span>
          </div>
        ))}
        {loading && <div className="text-gray-500">Thinking...</div>}
      </div>
 
      <div className="flex gap-2">
        <input
          type="text"
          value=`{input}`
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          className="flex-1 border rounded-lg p-2"
          placeholder="Ask a question..."
        />
        <button
          onClick={sendMessage}
          disabled=`{loading}`
          className="bg-blue-500 text-white px-4 py-2 rounded-lg disabled:opacity-50"
        >
          Send
        </button>
      </div>
    </div>
  );
}

PROMPTOWL_API_KEY=po_your-api-key-here
PROMPTOWL_PROMPT_ID=your-prompt-id-here

npm install -g vercel
vercel

npm run build
npm start

Prompt: "Create a customer support chat widget that calls this API endpoint:
https://promptowl.ai/api/prompt/YOUR_ID
with X-API-Key header and JSON body {sessionId, message}"

Prompt: "Build a chat component with message history,
input field, and loading state.
Make it call /api/chat on submit."

Prompt: "I need a support chatbot page.
When user sends a message, POST to my AI backend
and display the response."

Prompt: "Create a Flask app with a chat interface.
Frontend should POST messages to /chat endpoint.
Backend should call PromptOwl API and return response."

body: JSON.stringify({
  sessionId: user.id,
  message: input,
  variables: {
    user_name: user.name,
    account_type: user.plan,
    recent_orders: user.orders.slice(-3),
  },
}),

const response = await fetch(endpoint, {
  method: 'POST',
  headers: { ... },
  body: JSON.stringify({
    sessionId,
    message,
    streaming: true,
  }),
});
 
const reader = response.body.getReader();
const decoder = new TextDecoder();
 
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = decoder.decode(value);
  // Update UI with each chunk
  setCurrentResponse(prev => prev + chunk);
}

const agents = {
  support: 'prompt-id-1',
  sales: 'prompt-id-2',
  technical: 'prompt-id-3',
};
 
const response = await fetch(
  `https://promptowl.ai/api/prompt/${agents[selectedAgent]}`,
  ...
);

// Your vibe-coded app needs:
import OpenAI from 'openai';
 
const openai = new OpenAI({ apiKey: process.env.OPENAI_KEY });
 
// Manage conversation history yourself
const conversationHistory = [];
 
// Build RAG from scratch
const vectorStore = await initializeVectorStore();
const relevantDocs = await vectorStore.query(message);
 
// Construct prompt manually
const systemPrompt = `You are a support agent. Context: ${relevantDocs}`;
 
// Handle API call
const response = await openai.chat.completions.create({
  model: 'gpt-4',
  messages: [
    { role: 'system', content: systemPrompt },
    ...conversationHistory,
    { role: 'user', content: message },
  ],
});
 
// Store conversation
conversationHistory.push(...);
 
// Build monitoring, evaluation, analytics...
// Handle model switching...
// Manage multiple environments...

// Your vibe-coded app just calls one endpoint:
const response = await fetch('https://promptowl.ai/api/prompt/ID', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': process.env.PROMPTOWL_API_KEY,
  },
  body: JSON.stringify({ sessionId, message }),
});