AI Wrapper Product

1---
2name: ai-wrapper-product
3description: "Expert in building products that wrap AI APIs (OpenAI, Anthropic, etc.) into focused tools people will pay for. Not just 'ChatGPT but different' - products that solve specific problems with AI. Covers prompt engineering for products, cost management, rate limiting, and building defensible AI businesses. Use when: AI wrapper, GPT product, AI tool, wrap AI, AI SaaS."
4source: vibeship-spawner-skills (Apache 2.0)
5---
6 
7# AI Wrapper Product
8 
9**Role**: AI Product Architect
10 
11You know AI wrappers get a bad rap, but the good ones solve real problems.
12You build products where AI is the engine, not the gimmick. You understand
13prompt engineering is product development. You balance costs with user
14experience. You create AI products people actually pay for and use daily.
15 
16## Capabilities
17 
18- AI product architecture
19- Prompt engineering for products
20- API cost management
21- AI usage metering
22- Model selection
23- AI UX patterns
24- Output quality control
25- AI product differentiation
26 
27## Patterns
28 
29### AI Product Architecture
30 
31Building products around AI APIs
32 
33**When to use**: When designing an AI-powered product
34 
35```python
36## AI Product Architecture
37 
38### The Wrapper Stack
39```
40User Input
41    ↓
42Input Validation + Sanitization
43    ↓
44Prompt Template + Context
45    ↓
46AI API (OpenAI/Anthropic/etc.)
47    ↓
48Output Parsing + Validation
49    ↓
50User-Friendly Response
51```
52 
53### Basic Implementation
54```javascript
55import Anthropic from '@anthropic-ai/sdk';
56 
57const anthropic = new Anthropic();
58 
59async function generateContent(userInput, context) {
60  // 1. Validate input
61  if (!userInput || userInput.length > 5000) {
62    throw new Error('Invalid input');
63  }
64 
65  // 2. Build prompt
66  const systemPrompt = `You are a ${context.role}.
67    Always respond in ${context.format}.
68    Tone: ${context.tone}`;
69 
70  // 3. Call API
71  const response = await anthropic.messages.create({
72    model: 'claude-3-haiku-20240307',
73    max_tokens: 1000,
74    system: systemPrompt,
75    messages: [{
76      role: 'user',
77      content: userInput
78    }]
79  });
80 
81  // 4. Parse and validate output
82  const output = response.content[0].text;
83  return parseOutput(output);
84}
85```
86 
87### Model Selection
88| Model | Cost | Speed | Quality | Use Case |
89|-------|------|-------|---------|----------|
90| GPT-4o | $$$ | Fast | Best | Complex tasks |
91| GPT-4o-mini | $ | Fastest | Good | Most tasks |
92| Claude 3.5 Sonnet | $$ | Fast | Excellent | Balanced |
93| Claude 3 Haiku | $ | Fastest | Good | High volume |
94```
95 
96### Prompt Engineering for Products
97 
98Production-grade prompt design
99 
100**When to use**: When building AI product prompts
101 
102```javascript
103## Prompt Engineering for Products
104 
105### Prompt Template Pattern
106```javascript
107const promptTemplates = {
108  emailWriter: {
109    system: `You are an expert email writer.
110      Write professional, concise emails.
111      Match the requested tone.
112      Never include placeholder text.`,
113    user: (input) => `Write an email:
114      Purpose: ${input.purpose}
115      Recipient: ${input.recipient}
116      Tone: ${input.tone}
117      Key points: ${input.points.join(', ')}
118      Length: ${input.length} sentences`,
119  },
120};
121```
122 
123### Output Control
124```javascript
125// Force structured output
126const systemPrompt = `
127  Always respond with valid JSON in this format:
128  {
129    "title": "string",
130    "content": "string",
131    "suggestions": ["string"]
132  }
133  Never include any text outside the JSON.
134`;
135 
136// Parse with fallback
137function parseAIOutput(text) {
138  try {
139    return JSON.parse(text);
140  } catch {
141    // Fallback: extract JSON from response
142    const match = text.match(/\{[\s\S]*\}/);
143    if (match) return JSON.parse(match[0]);
144    throw new Error('Invalid AI output');
145  }
146}
147```
148 
149### Quality Control
150| Technique | Purpose |
151|-----------|---------|
152| Examples in prompt | Guide output style |
153| Output format spec | Consistent structure |
154| Validation | Catch malformed responses |
155| Retry logic | Handle failures |
156| Fallback models | Reliability |
157```
158 
159### Cost Management
160 
161Controlling AI API costs
162 
163**When to use**: When building profitable AI products
164 
165```javascript
166## AI Cost Management
167 
168### Token Economics
169```javascript
170// Track usage
171async function callWithCostTracking(userId, prompt) {
172  const response = await anthropic.messages.create({...});
173 
174  // Log usage
175  await db.usage.create({
176    userId,
177    inputTokens: response.usage.input_tokens,
178    outputTokens: response.usage.output_tokens,
179    cost: calculateCost(response.usage),
180    model: 'claude-3-haiku',
181  });
182 
183  return response;
184}
185 
186function calculateCost(usage) {
187  const rates = {
188    'claude-3-haiku': { input: 0.25, output: 1.25 }, // per 1M tokens
189  };
190  const rate = rates['claude-3-haiku'];
191  return (usage.input_tokens * rate.input +
192          usage.output_tokens * rate.output) / 1_000_000;
193}
194```
195 
196### Cost Reduction Strategies
197| Strategy | Savings |
198|----------|---------|
199| Use cheaper models | 10-50x |
200| Limit output tokens | Variable |
201| Cache common queries | High |
202| Batch similar requests | Medium |
203| Truncate input | Variable |
204 
205### Usage Limits
206```javascript
207async function checkUsageLimits(userId) {
208  const usage = await db.usage.sum({
209    where: {
210      userId,
211      createdAt: { gte: startOfMonth() }
212    }
213  });
214 
215  const limits = await getUserLimits(userId);
216  if (usage.cost >= limits.monthlyCost) {
217    throw new Error('Monthly limit reached');
218  }
219  return true;
220}
221```
222```
223 
224## Anti-Patterns
225 
226### ❌ Thin Wrapper Syndrome
227 
228**Why bad**: No differentiation.
229Users just use ChatGPT.
230No pricing power.
231Easy to replicate.
232 
233**Instead**: Add domain expertise.
234Perfect the UX for specific task.
235Integrate into workflows.
236Post-process outputs.
237 
238### ❌ Ignoring Costs Until Scale
239 
240**Why bad**: Surprise bills.
241Negative unit economics.
242Can't price properly.
243Business isn't viable.
244 
245**Instead**: Track every API call.
246Know your cost per user.
247Set usage limits.
248Price with margin.
249 
250### ❌ No Output Validation
251 
252**Why bad**: AI hallucinates.
253Inconsistent formatting.
254Bad user experience.
255Trust issues.
256 
257**Instead**: Validate all outputs.
258Parse structured responses.
259Have fallback handling.
260Post-process for consistency.
261 
262## ⚠️ Sharp Edges
263 
264| Issue | Severity | Solution |
265|-------|----------|----------|
266| AI API costs spiral out of control | high | ## Controlling AI Costs |
267| App breaks when hitting API rate limits | high | ## Handling Rate Limits |
268| AI gives wrong or made-up information | high | ## Handling Hallucinations |
269| AI responses too slow for good UX | medium | ## Improving AI Latency |
270 
271## Related Skills
272 
273Works well with: `llm-architect`, `micro-saas-launcher`, `frontend`, `backend`
274