> ## Documentation Index
> Fetch the complete documentation index at: https://docs.autosend.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate AutoSend with v0

> Integrate AutoSend email sending into your v0 project.

export const V0 = "https://v0.dev";

export const AUTOSEND_PATHS = {
  dashboard: 'https://autosend.com/dashboard',
  apiKey: 'https://autosend.com/account/api-key',
  faqs: 'https://autosend.com/faq',
  marketingEmails: 'https://autosend.com/marketing-emails',
  webhooks: 'https://autosend.com/webhooks',
  composeByAutoSend: 'https://autosend.com/compose',
  emailActivity: 'https://autosend.com/email-activities',
  team: 'https://autosend.com/settings/team',
  pricing: 'https://autosend.com/pricing',
  verifyEmail: 'https://autosend.com/compose/email-builder?template=verify-email',
  welcomeEmail: 'https://autosend.com/compose/email-builder?template=welcome-email',
  productUpdate: 'https://autosend.com/compose/email-builder?template=product-update',
  newsletter: 'https://autosend.com/compose/email-builder?template=newsletter',
  automations: 'https://autosend.com/automations',
  globalSuppressions: 'https://autosend.com/suppressions/global',
  signup: 'https://autosend.com/signup',
  domains: 'https://autosend.com/settings/domains',
  logoKit: 'https://asend.email/logo',
  contactsPage: 'https://autosend.com/contacts/list-and-segments'
};

export const APP_PATHS = {
  home: '/',
  quickstart: '/quickstart',
  domainConfiguration: '/domain',
  apiReference: '/api-reference',
  sendEmail: '/api-reference/mails/send',
  bulkSendEmail: '/api-reference/mails/bulk',
  upsertContactApiRef: '/api-reference/contacts/upsert-contact',
  transactional: '/transactional-emails',
  emailActivity: '/transactional-emails/email-activity',
  emailTemplates: '/transactional-emails/email-templates',
  sendingEmail: '/quickstart/email-using-api',
  transactionalTroubleshooting: '/transactional-emails/troubleshooting',
  marketing: '/marketing-emails',
  campaigns: '/marketing-emails/campaigns',
  contacts: '/marketing-emails/contacts',
  contactsIntroduction: '/marketing-emails/contacts/introduction',
  contactsImportCsv: '/marketing-emails/contacts/import-csv',
  contactsLists: '/marketing-emails/contacts/lists',
  contactsSegments: '/marketing-emails/contacts/segments',
  contactsCustomFields: '/marketing-emails/contacts/custom-fields',
  sender: '/marketing-emails/sender',
  unsubscribeGroups: '/others/unsubscribe-groups',
  webhookIntroduction: '/others/webhooks/introduction',
  webhookEventType: '/others/webhooks/event-type',
  webhookRetries: '/others/webhooks/retries',
  webhookVerifyRequests: '/others/webhooks/verify-requests',
  dynamicTemplates: '/dynamic-templates',
  guides: '/guides',
  sitemap: '/sitemap.xml',
  team: '/others/team',
  automations: '/automations',
  smtpIntroduction: '/quickstart/smtp',
  betterAuth: '/guides/better-auth',
  templateVariables: '/transactional-emails/variables',
  suppressions: '/others/suppressions',
  rateLimit: '/api-reference/rate-limit',
  nodejsSdk: '/sdk/nodejs',
  smtpIntegrationGuides: '/guides/smtp',
  apiKeys: '/api-keys',
  apiReferenceIntroduction: '/api-reference/introduction',
  lovableGuide: '/ai/integrations/lovable',
  aiIntroduction: '/ai/introduction',
  aiSkills: '/ai/skills',
  aiMcpServer: '/ai/mcp-server',
  aiLovable: '/ai/integrations/lovable',
  aiBolt: '/ai/integrations/bolt',
  aiV0: '/ai/integrations/v0',
  aiReplit: '/ai/integrations/replit',
  mcpClaude: '/ai/mcp-clients/claude',
  mcpCursor: '/ai/mcp-clients/cursor',
  mcpCopilot: '/ai/mcp-clients/copilot',
  mcpWindsurf: '/ai/mcp-clients/windsurf',
  mcpCodex: '/ai/mcp-clients/codex',
  mcpAntigravity: '/ai/mcp-clients/antigravity',
  mcpChatgpt: '/ai/mcp-clients/chatgpt',
  mcpRaycast: '/ai/mcp-clients/raycast',
  domainWarmup: '/marketing-emails/domain-warmup',
  projects: '/projects',
  createAutomationApi: '/api-reference/automations/create-automation'
};

<Frame>
  <img src="https://mintcdn.com/autosend-13920f5c/i6ZwoNOMtaBsEIWa/images/ai-tools/autosendxv0.jpg?fit=max&auto=format&n=i6ZwoNOMtaBsEIWa&q=85&s=e8b75c032205fc6c3a5315a4e66ede54" alt="v0" width="1800" height="600" data-path="images/ai-tools/autosendxv0.jpg" />
</Frame>

v0 is Vercel's AI-powered tool for generating UI components and full-stack applications. You can integrate AutoSend into your v0 project to send transactional emails like welcome emails, password resets, order confirmations, and notifications.

## Prerequisites

<CardGroup cols={2}>
  <Card title="AutoSend Account" href={AUTOSEND_PATHS.signup}>
    Sign up for an AutoSend account to get started with sending emails.
  </Card>

  <Card title="Verified Domain" href={APP_PATHS.domainConfiguration}>
    Make sure you have a verified domain added in AutoSend.
  </Card>

  <Card title="API Key" href={APP_PATHS.apiKeys}>
    Create a new API key from your AutoSend dashboard.
  </Card>

  <Card title="v0 Account" href={V0}>
    Sign up for v0 to start building.
  </Card>
</CardGroup>

## Integration

<Steps>
  <Step title="Prompt v0 to integrate AutoSend" titleSize="h3">
    Copy and paste this prompt into v0's chat:

    ```text theme={null}
    Integrate AutoSend email API for sending transactional emails.

    API Details:
    - Base URL: https://api.autosend.com/v1
    - Auth: Bearer token using API key stored in environment variable AUTOSEND_API_KEY
    - Endpoint: POST /mails/send
    - Content-Type: application/json

    Request body format:
    {
      "to": { "email": "recipient@example.com", "name": "Jane Doe" },
      "from": { "email": "hello@mail.yourdomain.com", "name": "Your App Name" },
      "subject": "Your subject line",
      "html": "<h1>Hello!</h1><p>Your email content here.</p>"
    }

    Response format:
    {
      "success": true,
      "data": {
        "emailId": "698afb75ff4bc5466e3a797a",
        "message": "Email queued successfully.",
        "totalRecipients": 1
      }
    }

    Create a Next.js API route (app/api/send-email/route.ts) that:
    1. Reads AUTOSEND_API_KEY from process.env
    2. Accepts to, from, subject, and html in the request body
    3. Calls the AutoSend API with Bearer token auth
    4. Returns the response to the client

    The "from" email must use a domain verified in AutoSend.

    Docs: https://docs.autosend.com/quickstart/email-using-api
    ```

    <Info>
      v0 will generate the API route and any UI components needed for your email flow.
    </Info>
  </Step>

  <Step title="Add your API key" titleSize="h3">
    When you deploy your v0 project to Vercel, add `AUTOSEND_API_KEY` as an environment variable in your Vercel project settings.

    For local development, add it to your `.env.local` file:

    ```bash .env.local theme={null}
    AUTOSEND_API_KEY=your_api_key_here
    ```

    <Info>
      Get your API key from the <a href={AUTOSEND_PATHS.apiKey}>API Keys</a> page in your AutoSend dashboard.
    </Info>
  </Step>

  <Step title="Test your integration" titleSize="h3">
    Trigger the email flow in your app (for example, submitting a contact form). Check your <a href={AUTOSEND_PATHS.emailActivity} target="_blank">Email Activity</a> in the AutoSend dashboard to confirm the email was delivered.
  </Step>
</Steps>

## Using Email Templates

If you have created <a href={APP_PATHS.emailTemplates}>email templates</a> in AutoSend, you can send emails using a `templateId` instead of inline HTML. Update the prompt to include:

```text theme={null}
Also support sending emails with a templateId and variables.

Example request body with template:
{
  "to": { "email": "recipient@example.com", "name": "Jane Doe" },
  "from": { "email": "hello@yourdomain.com", "name": "Your App Name" },
  "subject": "Welcome!",
  "templateId": "your_template_id",
  "dynamicData": {
    "firstName": "Jane",
    "loginLink": "https://yourapp.com/login"
  }
}
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Emails are not being sent">
    Make sure your `AUTOSEND_API_KEY` is set in your Vercel environment variables (for production)
    or `.env.local` (for local development). Also verify that your sending domain is verified in
    AutoSend.
  </Accordion>

  <Accordion title="Getting a 401 Unauthorized error">
    Double-check that the API route is reading the API key correctly from
    `process.env.AUTOSEND_API_KEY`. The Authorization header should be `Bearer YOUR_API_KEY`.
  </Accordion>

  <Accordion title="Emails landing in spam">
    Make sure you have completed domain verification including SPF, DKIM, and DMARC records. We
    recommend using a subdomain like `mail.yourdomain.com` for sending. See our{' '}
    <a href={APP_PATHS.domainConfiguration}>domain setup guide</a> for details.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Email Templates" icon="https://mintcdn.com/autosend-13920f5c/nx_wYfWx3qeZwg1C/icons/email-templates.svg?fit=max&auto=format&n=nx_wYfWx3qeZwg1C&q=85&s=461e1cf135b49bcb45ed4373269d54b9" href={APP_PATHS.emailTemplates} width="24" height="24" data-path="icons/email-templates.svg">
    Create reusable email templates with dynamic variables.
  </Card>

  <Card title="Email Activity" icon="https://mintcdn.com/autosend-13920f5c/nx_wYfWx3qeZwg1C/icons/email-activity.svg?fit=max&auto=format&n=nx_wYfWx3qeZwg1C&q=85&s=2ecad7369f217ee7d03c3d8dfdd36d22" href={APP_PATHS.emailActivity} width="24" height="24" data-path="icons/email-activity.svg">
    Monitor delivery status and engagement for all emails.
  </Card>

  <Card title="API Reference" icon="https://mintcdn.com/autosend-13920f5c/nx_wYfWx3qeZwg1C/icons/api.svg?fit=max&auto=format&n=nx_wYfWx3qeZwg1C&q=85&s=a257e726f0f001df70664b740dcd5af6" href={APP_PATHS.apiReferenceIntroduction} width="24" height="24" data-path="icons/api.svg">
    Full API documentation with all endpoints and parameters.
  </Card>

  <Card title="Variables" icon="https://mintcdn.com/autosend-13920f5c/nx_wYfWx3qeZwg1C/icons/variables.svg?fit=max&auto=format&n=nx_wYfWx3qeZwg1C&q=85&s=8b125b857bccba7707c963a3b2558d11" href={APP_PATHS.templateVariables} width="24" height="24" data-path="icons/variables.svg">
    Personalize emails with dynamic variables.
  </Card>
</CardGroup>