Skip to main content
DelightBridge uses AI to automate customer support email drafting, translation, and refinement. This guide explains how the AI workflow operates and how to optimize it with well-crafted service documents.

AI Draft Generation

AI draft generation analyzes email threads and creates contextual replies using Anthropic’s Claude.

How Draft Generation Works

1

User Triggers Generation

A user with Send or Admin permission clicks Generate Draft on an email thread.
2

Thread Context Prepared

The system extracts all messages from the thread and formats them:
const threadText = messages
  .map((m) =>
    `[${m.direction === 'inbound' ? 'Customer' : 'Support (previous)'}] ${m.fromName}${new Date(m.timestamp).toLocaleString('en-US')}\n${m.body.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim()}`
  )
  .join('\n\n---\n\n');
HTML tags are stripped to provide clean text context to the AI.
3

Service Document Injected

The service’s reference document is included in the prompt:
const prompt = `You are a professional, empathetic customer support agent. Based on the email thread below, write a helpful reply draft.

## Reference Document
${document}

## Email Thread
${threadText}`;
4

AI Generates Response

The prompt is sent to Claude:
const response = await client.messages.create({
  model: 'claude-sonnet-4-6',
  max_tokens: 1024,
  messages: [{ role: 'user', content: prompt }],
});
5

Response Formatted

The AI returns structured JSON:
{
  "draft": "<p>Hi Alex, thank you for reaching out...</p>",
  "categoryId": "billing",
  "detectedLanguage": "en"
}
6

Signature Appended

The service signature is automatically appended:
if (signature && result.draft) {
  result.draft = result.draft + `<hr>${signature}`;
}

Draft Generation Prompt

From draft/generate/route.ts:26, the full prompt structure:
const prompt = `You are a professional, empathetic customer support agent. Based on the email thread below, write a helpful reply draft.

## Reference Document
${document}

## Email Thread
${threadText}

## Available Categories
${categoryList}

## Instructions
1. Write ONLY the reply body in HTML (use <p>, <strong>, <em>, <ol>, <ul>, <li>, <a> as appropriate)
2. Be warm, empathetic, and solution-focused
3. Use the customer's first name
4. Do NOT include a greeting sign-off or signature — just the reply body content
5. Write in the SAME LANGUAGE as the customer's most recent message
6. Determine the most appropriate category from the list above
7. Keep it concise but complete

Respond with valid JSON only (no markdown code fences):
{
  "draft": "<p>...</p>",
  "categoryId": "the-id-here",
  "detectedLanguage": "en"
}`;
The AI automatically detects the customer’s language and replies in the same language. No additional configuration needed.

Service Documents

Service documents are the key to customizing AI behavior. They provide context about your product, policies, and common issues.

What to Include in Service Documents

Product Information:
  • Feature descriptions
  • Pricing details
  • Technical specifications
  • Known limitations
Policies and Procedures:
  • Refund policies
  • Shipping information
  • Account management procedures
  • Cancellation terms
Common Issues and Solutions:
  • Frequently asked questions
  • Troubleshooting steps
  • Workarounds for known bugs
  • Setup instructions
Tone and Style Guidelines:
  • Company voice
  • Level of formality
  • Preferred greetings
  • Standard phrases

Example Service Document

# DelightRoom Customer Support Guide

## Product Overview
DelightRoom is a project management platform for creative teams. 
Key features: real-time collaboration, version control, asset management.

## Pricing
- Free: Up to 3 projects
- Pro ($29/mo): Unlimited projects, 10GB storage
- Team ($99/mo): Unlimited everything, priority support

## Common Issues

### Login Problems
If users can't log in:
1. Verify email address is correct
2. Check for password reset email (may be in spam)
3. Try clearing browser cookies
4. If issue persists, reset their password manually

### Upload Failures
- Max file size: 100MB per file
- Supported formats: PNG, JPG, PDF, PSD, AI, MP4
- Check user's remaining storage quota

## Policies

### Refunds
Full refund within 30 days, no questions asked.
After 30 days, prorated refund available.

### Cancellations
Users can cancel anytime. Access continues until end of billing period.

## Tone
Be friendly, professional, and solution-focused.
Use first names. Acknowledge frustration. Offer clear next steps.
Documents can be plain text or Markdown. The AI understands both formats equally well.

Updating Service Documents

Admins can edit service documents in Settings:
  1. Open Settings
  2. Select the Services tab
  3. Click on a service to expand it
  4. Edit the Document field
  5. Click Save
Changes apply immediately to all future draft generations for that service.
Service documents are included in every AI request. Keep them concise (under 2000 words) to avoid token limits and maintain response speed.

Talk to Draft

Talk to Draft allows users to iteratively refine AI-generated drafts using natural language instructions.

How Talk to Draft Works

1

Initial Draft Generated

User generates a draft using the standard AI generation flow.
2

User Provides Instruction

In the draft editor, user enters an instruction like:
  • “Make it more casual”
  • “Add information about our refund policy”
  • “Shorten this to 2 paragraphs”
3

Context Sent to AI

The current draft and instruction are sent to Claude:
const prompt = `You are a customer support email editor. Revise the following draft email based on the instruction.

## Customer's last message
${customerLastMsg}

## Current Draft (plain text)
${draftText}

## Instruction
${instruction}

## Requirements
- Keep the same general meaning and key information
- Return ONLY the revised draft in HTML format
- Do NOT include a signature
- Match the language of the original draft
- Return valid JSON only:
{ "draft": "<p>...</p>" }`;
4

Revised Draft Returned

The AI returns an updated draft with the requested changes.
5

User Reviews and Iterates

User can continue refining with additional instructions until satisfied.

Effective Talk to Draft Instructions

  • “Make it more formal”
  • “Use a friendlier tone”
  • “Sound more apologetic”
  • “Be more direct and concise”
  • “Add our refund policy details”
  • “Include the tracking link: https://example.com/track
  • “Mention that we’ll follow up in 24 hours”
  • “Remove the section about pricing”
  • “Break this into bullet points”
  • “Combine the first two paragraphs”
  • “Add a numbered list of steps”
  • “Make it shorter”
  • “Use simpler language”
  • “Avoid technical jargon”
  • “Make it more conversational”
  • “Sound more professional”
Talk to Draft preserves the signature automatically. Focus your instructions on the main content.

Translation Feature

DelightBridge can translate drafts to Korean for bilingual support teams.

How Translation Works

From draft/translate/route.ts:15:
const prompt = `Translate the following customer support email draft into Korean. Preserve the professional and empathetic tone.

## Original Draft
${draftText}

Return ONLY valid JSON with the translation as a plain text string (no HTML tags):
{ "translation": "Korean translation here..." }`;

const response = await client.messages.create({
  model: 'claude-sonnet-4-6',
  max_tokens: 1024,
  messages: [{ role: 'user', content: prompt }],
});

const result = JSON.parse(content.text);
result.translation = `<p>${result.translation}</p>`;
1

User Clicks Translate

In the draft editor, user clicks the Translate button.
2

Draft Sent to AI

The current draft (HTML stripped) is sent to Claude with translation instructions.
3

Korean Translation Generated

AI returns a Korean version preserving tone and meaning.
4

Translation Displayed

The translation appears in a side panel for reference while editing.
Translations are for reference only. The draft content itself is not replaced. This allows bilingual teams to verify translations before sending.

Customizing Translation Behavior

To translate to a different language, modify the prompt in draft/translate/route.ts:15:
const prompt = `Translate the following customer support email draft into Japanese. Preserve the professional and empathetic tone.

## Original Draft
${draftText}

Return ONLY valid JSON with the translation as a plain text string (no HTML tags):
{ "translation": "Japanese translation here..." }`;

AI Model Configuration

DelightBridge uses Anthropic’s Claude Sonnet 4 for all AI operations.

Model Selection

From the route handlers:
const response = await client.messages.create({
  model: 'claude-sonnet-4-6',
  max_tokens: 1024,
  messages: [{ role: 'user', content: prompt }],
});

Changing the AI Model

To use a different Claude model, update the model parameter in:
  • /api/draft/generate/route.ts
  • /api/draft/talk/route.ts
  • /api/draft/translate/route.ts
Available models:
  • claude-sonnet-4-6 - Best balance of speed and quality (current)
  • claude-opus-4 - Highest quality, slower, more expensive
  • claude-haiku-4 - Fastest, most affordable, lower quality
Changing models affects response quality and cost. Test thoroughly before deploying to production.

Environment Variables

AI features require an Anthropic API key:
ANTHROPIC_API_KEY=sk-ant-api03-...
Get your API key from Anthropic Console.

Best Practices

Include only information relevant to customer support. Avoid internal details, code snippets, or excessive background.
When products change, policies update, or new issues emerge, update service documents immediately to maintain AI accuracy.
Show example responses for common scenarios. The AI learns from these patterns.
After updating service documents, generate drafts for typical threads to verify the AI is responding appropriately.
Don’t expect perfect drafts initially. Use Talk to Draft to refine and teach the AI your preferences over time.
Each draft generation, Talk to Draft request, and translation costs API credits. Set up billing alerts in Anthropic Console.

Troubleshooting

Check:
  1. ANTHROPIC_API_KEY is set correctly
  2. API key has available credits
  3. No API outage (check Anthropic status page)
  4. Service document isn’t too large (>10,000 tokens)
Error details are logged to console.
The service document may be missing key information. Add:
  • More context about the product
  • Examples of good responses
  • Clear policy statements
Instructions may be ambiguous. Be more specific:
  • ❌ “Make it better”
  • ✅ “Add bullet points listing the 3 steps to reset password”
The AI preserves meaning well but may miss idioms. Review translations manually before relying on them.
The AI occasionally returns markdown code fences. The system strips these automatically:
let jsonText = content.text.trim();
if (jsonText.startsWith('```')) {
  jsonText = jsonText.replace(/^```[a-z]*\n?/, '').replace(/\n?```$/, '');
}
If markdown appears in the draft content itself, update the prompt to be more explicit about HTML-only formatting.

Advanced: Customizing AI Behavior

Adjusting Response Length

Modify max_tokens to control draft length:
const response = await client.messages.create({
  model: 'claude-sonnet-4-6',
  max_tokens: 2048, // Increased from 1024 for longer drafts
  messages: [{ role: 'user', content: prompt }],
});

Adding Custom Instructions

Enhance the prompt with company-specific guidelines:
const prompt = `You are a professional, empathetic customer support agent. Based on the email thread below, write a helpful reply draft.

## Reference Document
${document}

## Company Guidelines
- Always offer to schedule a call for complex issues
- Include relevant help article links when applicable
- End with "Is there anything else I can help you with?"

## Email Thread
${threadText}

// ... rest of prompt
`;

Implementing Few-Shot Learning

Add example exchanges to improve consistency:
const prompt = `You are a professional, empathetic customer support agent.

## Example Good Response
Customer: "I can't log in!"
Support: "I'm sorry you're having trouble logging in. Let's get you back into your account. First, can you verify you're using the email address associated with your DelightRoom account? If you've forgotten your password, click 'Forgot Password' on the login page to reset it."

## Your Task
Based on the email thread below, write a helpful reply draft following the example style.

// ... rest of prompt
`;
Prompt engineering is iterative. Test changes with real threads before deploying.

Build docs developers (and LLMs) love