Vibe Coding with Cursor, Bolt + PromptOwl

Build AI-powered apps using vibe coding tools like Cursor, Bolt, or v0 with PromptOwl as your AI backend. No AI infrastructure needed.

Use AI coding assistants like Cursor, Bolt.new, or v0 to build your frontend fast. Use PromptOwl for the AI backend. Ship production AI apps without managing LLM infrastructure.

---

The Problem with Building AI Apps

When you vibe code an AI app, you hit a wall:

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..."

The solution: Let PromptOwl handle the AI backend. You focus on the app.

---

Why Separate Your AI Backend?

Without PromptOwl	With PromptOwl
Manage API keys in code	Keys stored securely in PromptOwl
Build conversation handling	Built-in conversation management
Hard-code prompts in code	Edit prompts without deployments
Single model, hard to switch	Switch models with one click
No evaluation system	Built-in eval sets and AI Judge
Build monitoring from scratch	Built-in analytics and annotations
Rebuild for each project	Reuse across projects

---

The Architecture

┌─────────────────────────────────────────────────────────┐
│                     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     │      │
│  └─────────────┘  └─────────────┘  └─────────────┘      │
└─────────────────────────────────────────────────────────┘

---

Tutorial: Build an AI Support App with Cursor + PromptOwl

Time: 30 minutes Tools: Cursor (or any AI code editor), PromptOwl Result: Production AI support chatbot embedded in a Next.js app

Part 1: Set Up PromptOwl (10 minutes)

Step 1: Create Your Agent

1. Sign up at promptowl.ai

2. Click + New to create an agent

3. Name it "Support Assistant"

4. Write your system prompt:

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

Step 2: Add Your Knowledge Base

1. Go to Data Room

2. Create a folder "Support Docs"

3. Upload your documentation (FAQ, product info, policies)

Step 3: Connect RAG

1. Back in your agent, find Dataset in block settings

2. Click Connect Data

3. Select your "Support Docs" folder

Step 4: Test It

Use the chat interface to test a few questions. Make sure it:

• Answers accurately from your docs

• Shows citations

• Handles unknown questions gracefully

Step 5: Publish as API

1. Go to Publish tab

2. Toggle to Live

3. Click Generate API Key

4. Save your API key (you'll need it for Cursor)

5. Note your Prompt ID from the URL

You now have:

• API Endpoint: https://promptowl.ai/api/prompt/YOUR_PROMPT_ID

• API Key: po_xxxxxxxx

---

Part 2: Vibe Code the Frontend with Cursor (15 minutes)

Open Cursor and create a new project. Here's what to tell it:

Prompt for Cursor:

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

Cursor will generate something like:

app/api/chat/route.ts:

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);
}

app/page.tsx:

'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>
  );
}

.env.local:

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

---

Part 3: Deploy (5 minutes)

Option A: Vercel

npm install -g vercel
vercel

Add environment variables in Vercel dashboard.

Option B: Any Node.js host

npm run build
npm start

---

What You Get

Feature	How It Works
AI Responses	PromptOwl handles all LLM calls
Knowledge Base	RAG pulls from your uploaded docs
Conversation Memory	PromptOwl manages history per session
Multi-Model	Switch models in PromptOwl, no code change
Analytics	Track usage in PromptOwl dashboard
Iterate Prompts	Edit prompts without redeploying

---

Other Vibe Coding Tools

The same pattern works with any tool:

Bolt.new

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}"

v0 (Vercel)

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

Then add the API route separately.

Lovable

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

Replit Agent

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

---

Advanced Patterns

Pass User Context

Send user info to personalize responses:

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

Handle Streaming

For real-time token streaming:

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);
}

Multiple Agents

Route to different PromptOwl agents:

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]}`,
  ...
);

---

Comparison: With vs Without PromptOwl

Without PromptOwl (DIY)

// 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...

With PromptOwl

// 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 }),
});

Everything else (RAG, conversation history, model selection, monitoring) is handled by PromptOwl.

---

FAQ

Can I use this in production?

Yes. PromptOwl is designed for production use with:

• Encrypted API keys

• Rate limiting

• High availability

• Analytics and monitoring

What if I need to change the prompt?

Edit it in PromptOwl. No code changes or redeployment needed. Your app automatically uses the updated prompt.

What about costs?

You pay for:

• Your LLM provider usage (through your API keys in PromptOwl)

• PromptOwl subscription (for the platform features)

You save on:

• Engineering time building AI infrastructure

• Maintenance and monitoring tools

• Evaluation and testing systems

Can I use my own fine-tuned models?

Yes. Configure your fine-tuned model ID in PromptOwl's model settings.

Does it work with mobile apps?

Yes. Any app that can make HTTP requests can use the PromptOwl API.

---

Summary

Step	Time	What You Did
PromptOwl Setup	10 min	Agent + RAG + API key
Vibe Code Frontend	15 min	Chat UI + API integration
Deploy	5 min	Push to Vercel/host
Total	30 min	Production AI app

---

Learn More

• API Publishing Guide - Full API documentation

• Build a Support Chatbot - Detailed agent setup

• Prompt Engineering - Write better prompts

---

Ready to build? Create your first agent at promptowl.ai and vibe code the rest.