LogoMkSaaS 문서
LogoMkSaaS 문서
홈페이지IntroductionCodebaseVideo TutorialsGetting Started: Install and Run LocallyEnvironment Setup
Configuration

Integrations

DatabaseAuthenticationEmailNewsletterStorage
Payment
AIAnalyticsNotificationCaptchaChatboxAffiliates

Customization

MetadataFontsThemesImagesSaaS Internationalization with next-intlBlogDocsComponentsCustom PagesLanding PageUser ManagementAPI Key Management

Codebase

IDE SetupProject StructureFormatting & LintingAutomated TestingUpdating the Codebase
X (Twitter)

AI

Configure Vercel AI Gateway and try AI demos

The template's main branch includes an AI Playground with six on-demand demos. Text, speech, image understanding, and image generation share one Vercel AI Gateway key.

Setup

Create an AI Gateway Key

Create a key in your Vercel team's AI Gateway dashboard.

Set Environment Variables

Add the key to .env in the project root:

.env
AI_GATEWAY_API_KEY=YOUR-GATEWAY-API-KEY

Run the Demo

Restart pnpm dev, then open AI Playground.

If you are setting up the environment, now you can go back to the Environment Setup guide and continue. The rest of this guide can be read later.

Environment Setup

Set up environment variables

Usage

DemoWhat to tryDefault model
SummarizationSummarize supplied textgoogle/gemini-2.5-flash-lite
TranslationTranslate between supported languagesgoogle/gemini-2.5-flash-lite
TaglinesGenerate taglines from a product descriptiongoogle/gemini-2.5-flash-lite or openai/gpt-4o-mini
Text to speechGenerate WAV audio with a selected voiceopenai/tts-1
Image understandingDescribe an uploaded imagegoogle/gemini-2.5-flash-lite
Image generationGenerate one image from a promptbfl/flux-2-klein-4b

Notices

Requests consume your team's Gateway credits. Check available credits, model access, and request limits in Vercel, and configure a key budget before exposing a public demo. Free-tier eligibility and provider availability can change; the configured model list is not a guarantee of free or successful requests.

  • Missing key: check the variable name and restart or redeploy.
  • Authentication errors: check that the Gateway key is valid for the intended team.
  • Balance or rate-limit errors: check credits, budgets, and limits before retrying.
  • Upload errors: use a supported image type under the size limit.

Video Tutorial

A Complete Guide To Vercel’s AI SDK // The ESSENTIAL Tool For Shipping AI Apps

References

  • Vercel AI Gateway API
  • AI SDK
  • AI Elements
  • AI Gateway
  • OpenAI
  • Google Generative AI
  • DeepSeek
  • OpenRouter
  • FAL
  • Fireworks
  • Replicate

Next Steps

Project Structure

Understand the organization of your project

IDE Setup

Configure your development environment

Getting Started

Set up and run your MkSaaS website

Database

Configure database

Waffo Pancake

How to set up and use Waffo Pancake for payments and subscriptions

Analytics

Learn how to set up and use various analytics tools in your MkSaaS website

목차

SetupCreate an AI Gateway KeySet Environment VariablesRun the DemoUsageNoticesVideo TutorialReferencesNext Steps