Skip to main content

​
Quickstart

This guide walks you through setting up DelightBridge and generating your first AI-powered email draft. You’ll go from a fresh deployment to sending a reply in under 5 minutes.
This quickstart assumes you’ve already completed the installation and have DelightBridge running. If not, start there first.

​
Prerequisites

Before you begin, ensure you have:
  • DelightBridge deployed (locally or on Vercel)
  • A Google account for login
  • A Gmail account to connect as a service (can be the same as your login account)
  • Admin access (your email listed in ADMIN_EMAILS environment variable)

​
Step 1: Log in to DelightBridge

1

Navigate to your DelightBridge URL

Open your browser and go to your DelightBridge instance:
  • Local: http://localhost:3000
  • Vercel: https://your-app.vercel.app
You’ll be automatically redirected to /login if not authenticated.
2

Sign in with Google

Click the “Google로 로그인” button. You’ll be redirected to Google’s OAuth consent screen.DelightBridge login screen
3

Grant permissions

Allow DelightBridge to access your Google profile. This is only for authentication — it does not access your Gmail yet.
If you see “접근 권한이 없는 계정입니다” (Access denied), your email is not in ADMIN_EMAILS or the workspace_members table. Check your environment variables.

​
Step 2: Add your first service

After logging in, you’ll see a prompt: “아직 연결된 서비스가 없습니다” (No services connected yet).
1

Open service settings

Click “서비스 추가 + 연결” (Add Service + Connect) button.
2

Fill in service details

In the Settings modal, under “서비스 관리” (Service Management) tab:
  • Name: Your service name (e.g., “Noji Support”)
  • Email: Leave blank (will auto-fill after Gmail connection)
  • Brand Color: Choose a hex color (e.g., #3b5bdb)
Click “서비스 추가” (Add Service).
3

Connect Gmail account

Click the “연결” (Connect) button next to your new service. You’ll be redirected to Google OAuth.
Make sure to select “See, edit, create, and delete all of your Gmail email” and “Send email on your behalf” when granting permissions.
After authorization, you’ll be redirected back to DelightBridge. The service email will now show your connected Gmail address.
The app login account and the service Gmail account are separate. You can log in with [email protected] but connect [email protected] as a service.

​
Step 3: Configure reference documentation

The AI uses your service documentation as context when generating drafts. Let’s add some.
1

Open document settings

In the Settings modal, click the “문서 및 서명 관리” (Documents & Signatures) tab.
2

Add reference documentation

Select your service from the dropdown and enter reference information in Markdown format:
# Noji Support Guidelines

## Product Overview
Noji is a minimalist journaling app for iOS and macOS.

## Common Issues
- **Sync problems**: Ask user to log out and back in
- **Export**: Go to Settings > Export > Choose format
- **Pricing**: $4.99/month or $39.99/year

## Tone
- Warm and empathetic
- Use customer's first name
- Keep responses concise
Click “저장” (Save).
3

Add email signature (optional)

Switch to the Signature section and add an HTML signature:
<p>Best regards,<br>
The Noji Team</p>
<p style="font-size: 11px; color: #888;">
<a href="https://noji.app">noji.app</a> | 
<a href="mailto:[email protected]">[email protected]</a>
</p>
Click “저장” (Save).

​
Step 4: Set up categories (optional)

Categories help organize and auto-label incoming emails.
1

Open category settings

In Settings modal, click the “카테고리 설정” (Category Settings) tab.
2

Add categories

Click “새 카테고리” (New Category) and create a few:
  • Name: Billing | Color: #fee2e2 | Text Color: #991b1b
  • Name: Technical | Color: #dbeafe | Text Color: #1e3a8a
  • Name: Feature Request | Color: #fef3c7 | Text Color: #92400e
Click “저장” (Save) for each.
The AI will automatically assign incoming emails to these categories based on content.

​
Step 5: Sync your Gmail inbox

Now that your service is connected, let’s import emails.
1

Trigger full sync

In Settings > “서비스 관리” (Service Management), find your service and click “전체 동기화” (Full Sync).This imports all emails from the past 30 days.
2

Wait for sync to complete

The sync status will show a timestamp when complete. You’ll see emails appear in the mail list on the left.
After the initial full sync, DelightBridge automatically performs incremental syncs every 5 minutes via Vercel Cron.

​
Step 6: Generate your first draft

1

Select a thread

Click on any email thread in the Mail List (center column). The thread will open in the Detail Panel (right side).
2

Wait for AI generation

DelightBridge automatically generates a draft when you open an inbox thread for the first time. You’ll see a loading indicator.The AI considers:
  • The full email thread history
  • Your service reference documentation
  • Available categories
  • The customer’s language (auto-detected)
3

Review the draft

The generated draft appears in the AI Draft section with:
  • Auto-populated “To” and “Subject” fields
  • HTML body content
  • Your signature (appended automatically)
  • Category label (auto-assigned)
The draft is automatically saved to the database with a 500ms debounce whenever you make edits.

​
Step 7: Refine the draft (optional)

You have multiple ways to refine the AI-generated draft:

​
Option 1: Talk to Draft

Use natural language to request changes:
1

Expand Talk to Draft

Click the “Talk to Draft” section header to expand it.
2

Enter a refinement instruction

Type a command like:
  • “Make it more concise”
  • “Add information about our refund policy”
  • “Use a friendlier tone”
Or use a quick prompt button:
  • “더 간결하게” (More concise)
  • “더 친절하게” (More friendly)
  • “전문적으로” (More professional)
3

Apply changes

Click “수정 요청” (Request Edit). The AI will regenerate the draft with your requested changes.

​
Option 2: Inline editing

Click directly into the draft editor (powered by TipTap) to:
  • Bold, italicize, underline text
  • Add lists (ordered/unordered)
  • Insert links
  • Format paragraphs

​
Option 3: Regenerate completely

Click “Regenerate” to create an entirely new draft from scratch.

​
Step 8: Translate (if needed)

If the customer wrote in a non-Korean language and you want a Korean translation for internal review:
1

Expand the Translation panel

Click “Translation” to expand the section.
2

Translate the draft

Click “Translate” to generate a Korean version. The translation appears in read-only format.
You can also translate individual messages in the thread by clicking “번역 보기” (Show Translation) on each message.

​
Step 9: Send the reply

1

Review the draft

Double-check the “To” field, subject line, and body content.
2

Click Send

Click the “Send” button at the top of the draft editor.A confirmation modal appears showing:
  • Recipient email
  • Sender email (your service)
  • Subject
  • Body preview
3

Confirm

Click “보내기” (Send) in the modal. The email is sent via Gmail API and the thread status changes to “Sent.”
Check “다시 묻지 않기” (Don’t show again) to skip this confirmation in the future.

​
What’s next?

Team Collaboration

Invite colleagues and assign permission levels (View, Edit, Send, Admin)

Email Management

Learn about bulk operations and email management features

Gmail Integration

Configure automatic sync intervals and troubleshoot sync issues

API Reference

Explore API endpoints for custom integrations

​
Troubleshooting

  • Check Anthropic API key: Ensure ANTHROPIC_API_KEY is set correctly
  • Check rate limits: Claude API has rate limits; wait a moment and try again
  • Reference document too long: Keep documents under 10,000 words
  • Check OAuth scopes: Ensure you granted both “read” and “send” Gmail permissions
  • Check tokens: Refresh tokens may expire; reconnect the service
  • Check Vercel cron: Ensure CRON_SECRET is set and cron jobs are enabled
  • Check permission level: You need “Send” or “Admin” permission
  • Check service connection: Service must have a valid Gmail OAuth token
  • Check Gmail API quota: Google has daily send limits
  • Check redirect URIs: In Google Cloud Console, add:
    • http://localhost:3000/api/auth/callback/google (local)
    • http://localhost:3000/api/services/oauth/callback (local)
    • https://your-app.vercel.app/api/auth/callback/google (production)
    • https://your-app.vercel.app/api/services/oauth/callback (production)

Build docs developers (and LLMs) love

Get started for freeTalk to us