Getting Started
Follow along this documentation to set up your kit and start building with AI in just a few minutes.
3-Min Walkthrough
A quick start
If you've purchased the template, you should've gotten an email invite to view and clone the code repository via Github.
Run the following commands in your shell to clone the repository and install dependencies:
Note: First, make sure you have the right node version. TemplateAI requires
Node 18.17 or greater. Type node -v
in your shell to check the
version. If you don't have the right version, run
nvm install 18.7.0
.
# Clone the repository
# or, if you're using the zipped folder, unzip it and skip this step
git clone https://github.com/templateai/template-ai.git
# Change directories into the folder and install dependencies
cd template-ai && npm install
# So you can start tracking changes in your own Github repository
git remote remove origin
# Run the local server
npm run dev
Then, in a new shell window, run the following command to rename the example .env.example
file to .env
:
mv .env.example .env
You should now have a local server running on http://localhost:3000! This should give you a starting point to browse around the code and build static pages.
Try replacing the contents of src/app/page.tsx
with the following to build a simple landing page up and get a feel for what kinds of things you can do with TemplateAI:
// src/app/page.tsx
'use client';
import Header from '@/components/Header';
import Hero from '@/components/Hero';
import FeatureAccordion from '@/components/FeatureAccordion';
import TestimonialSimple from '@/components/TestimonialSimple';
import Pricing from '@/components/Pricing';
import FAQ from '@/components/FAQ';
import FullPageCTA from '@/components/FullPageCTA';
import Footer from '@/components/Footer';
import { landingNav } from '@/config/navigation';
export default function Home() {
return (
<>
<Header navItems={landingNav} />
<main>
<Hero />
<FeatureAccordion />
<TestimonialSimple />
<Pricing />
<FAQ />
<FullPageCTA />
</main>
<Footer />
</>
);
}
Diving deeper
If you pasted the snippet above, you'll notice a landing page with Christmas-related content. This is coming from a shared set of configs set for the app. Here's how you can play around with it:
Config
All the files located in the src/config/
folder are extremely
important.
These are where you will configure details about your app that are reused across different components and pages.
The three config files you'll want to edit are:
-
config/site.ts
: Basic information about your app – brand details, SEO-related content, etc. -
config/content.ts
: Text, images, and other information used components for your landing page
Hero: Fill it out if you're importing the
Hero
componentTestimonials: Fill it out if you're importing the
TestimonialRating
,TestimonialAvatars
, orTestimonialSimple
componentFeatures: Fill it out if you're importing the
FeatureListicle
orFeatureAccordion
componentPricing: Fill it out if you're importing the
Pricing
componentCTA: Fill it out if you're importing the
FullPageCTA
componentFAQ: Fill it out if you're importing the
FAQ
component
config/navigation.ts
: List of links to show in your navbar that you can customize. Check out theHeader
documentation for how to set dynamic navigation items for a page.
Note that features like authentication and database management won't work just yet. Keep reading to set up their configurations and environment variables.
Project Structure
TemplateAI is built on NextJS 13 and uses the App Router project structure. Here's a rundown of important files and folders in the template:
docs
└─ Your documents for creating embedddings and running vector search go here
public
└─ Any images, media or other resources you use in your app go here
src
└─ app
├─ api
└─ API routes called by the frontend. Includes webhooks and API endpoints for Stripe, Replicate, OpenAI, etc
├─ auth
└─ Callback routes for Supabase authentication.
├─ (( other routes ))
└─ Pre-built pages included in the template, like the Dashboard, sign-in page, etc.
├─ page.tsx
└─ Home page / app entry-point
├─ globals.css
└─ Note that most styling is done in-line with Tailwind and daisyUI. To change styling for a component, dig into its <code>.tsx</code> file and edit the Tailwind classes.
└─ components
└─ Resuable React components for building your app.
└─ config
└─ Configuration files for things that get reused throughout your app – branding, content, etc. This is where you "customize" your app
└─ utils
└─ Helpers and utilities for database actions, SEO, and Stripe. Also includes a script to generate embeddings on your documents (run `npm run embeddings`), and initialization for Supabase (import the client wherever you plan on doing database stuff)
supabase
└─ migrations
└─ Migrations (SQL queries) to set up tables and more in your database
.env.example
└─ An example file for setting environment variables
Setting Environment variables
Your .env
file includes 6 groups of environment variables. Use the following tips / tutorials to configure each of them:
NEXT_PUBLIC_SITE_URL
: Set this to the stable website URL you use in production. You can use http://localhost:3000 while you're still developing, but make sure to switch to a production URL once your app is deployed.- Configs for authentication with Google OAuth (optional, only if you're using Supabase locally): Follow the steps in the Authentication guide
- Stripe credentials: Follow the steps in the Payments guide
- Supabase credentials: Follow the steps in the Database guide
OPENAI_API_KEY
: Get your API key from the OpenAI API Keys page- Replicate configs: Follow the steps in the Image Generation guide
Last Updated: June 7