Getting Started

Hey there, welcome to TemplateAI!

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:

  1. config/site.ts: Basic information about your app – brand details, SEO-related content, etc.

  2. config/content.ts: Text, images, and other information used components for your landing page

  • Hero: Fill it out if you're importing the Hero component

  • Testimonials: Fill it out if you're importing the TestimonialRating, TestimonialAvatars, or TestimonialSimple component

  • Features: Fill it out if you're importing the FeatureListicle or FeatureAccordion component

  • Pricing: Fill it out if you're importing the Pricing component

  • CTA: Fill it out if you're importing the FullPageCTA component

  • FAQ: Fill it out if you're importing the FAQ component

  1. config/navigation.ts: List of links to show in your navbar that you can customize. Check out the Header 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: March 5