Table of Contents
main_video.mp4
최근 글로벌 거대기업들이 AI개발에 주력하고 있으며 세계는 이 변화를 주목하고 있습니다.
이 프로젝트는 우수한 최신 AI의 기능을 일반 사용자에게 제공하는 AI SaaS 프로젝트입니다.
AI SaaS(Software as a Service)란 클라우드 기반 방식으로 제공되는 인공지능 소프트웨어 서비스를 말합니다. 사전에 소프트웨어를 구매하거나 설치하지 않아도, 인터넷을 통해 필요할 때 언제든지 서비스를 사용할 수 있습니다.
이 서비스는 대부분 월이나 연 단위로 사용료를 지불하는 형태로 운영되며, 서버 운영, 유지보수, 소프트웨어 업그레이드 등을 제공사가 담당하여 비용과 시간을 절약할 수 있습니다.
- Nextjs는 fullstack 개발이 가능한 플렛폼으로 Frontend에 국한되지 않게 하나의 프로젝트에 front-backend 서비스를 개발하고 제공 할 수 있습니다.
- 최근 Llama3, GPT-4.0o 등의 발표로 AI 발전이 더 가속화됨을 느꼈고 이를 사용하지 않는다면 AI를 사용하는 개발자와 많은 차이가 있을 것이라 생각했습니다.
- 또한, 미래에 AI가 광범위하게 사용될 것이 자명하므로 api 사용방법을 익히기 위해 해당프로젝트를 주제로 선정하여 진행했습니다.
- 이외에 개인적으로 Nextjs와 React, Tailwind, Clerk 및 Openai API, Llama3, replicate 등의 AI기술에 접근하고 실제로 사용하는 프로젝트를 제작하고 싶어 주제로 정했습니다.
- 개발 과정에 공부하게 된 내용을 블로그에 정리했으니 방문해보세요.
프로젝트 제작 블로그가기
참고 유튜브 영상(deplicated된 함수, layout, api등 코드 개선)
(최상단으로)
프로젝트에 사용한 주요 프레임워크와 라이브러리
NextJs와 React, Clerk
OpenAI, Replicate
(최상단으로)
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
이 프로젝트에는 다양한 library들을 사용했습니다.
- npm
npm install "@clerk/nextjs" "@emailjs/browser" "@hookform/resolvers" "@prisma/client" "@radix-ui/react-avatar" "@radix-ui/react-dialog" "@radix-ui/react-label" "@radix-ui/react-progress" "@radix-ui/react-select" "@radix-ui/react-slot" "axios" "class-variance-authority" "clsx" "crisp-sdk-web" "emailjs" "lucide-react" "next" "openai" "react" "react-dom" "react-hook-form" "react-hot-toast" "react-markdown" "replicate" "stripe" "swiper" "tailwind-merge" "tailwindcss-animate" "typewriter-effect" "zod" "zustand"
- "@emailjs/browser" : 개발자에게 메일 보내기
- "@hookform/resolvers" : HookForm 사용(nextjs)
- "@prisma/client" : prisma DB연결 및 관리
- "@radix-ui/react-avatar" : AI 및 사용자 그림 표현
- "@radix-ui/react-dialog" : 알림창
- "@radix-ui/react-label" : 라벨
- "@radix-ui/react-progress" : 질문 횟수 소비 진행도
- "@radix-ui/react-select" : AI그림생성 select tag
- "@radix-ui/react-slot" : AI 그림생성 표현
- "axios" : data fetch, server api 호출
- "class-variance-authority" : 페이지 접근제어
- "clsx" : tailwind css 병합
- "crisp-sdk-web" : 실시간 문의데스크
- "emailjs" : 개발자에게 Email보내기
- "lucide-react" : 각종 아이콘
- "next" : nextjs components 사용
- "openai" : openai api gpt-3.5, gpt-4, dalle-2,3사용
- "react" : react hooks 사용
- "react-dom" : react hooks 사용
- "react-hook-form" : react hooks 사용
- "react-hot-toast" : 간편 안내경고 창
- "react-markdown" : 코드영역 textarea
- "replicate" : Llama3, 비디오생성 ai
- "stripe" : 카드결제용 라이브러리(테스트만)
- "swiper" : 첫화면 3D slide
- "tailwind-merge" : twmerge 사용
- "tailwindcss-animate" : 에니메이션 효과적용
- "typewriter-effect" : 첫화면 글자 타이핑 효과
- "zod" : HookForm 사용시 validation
- "zustand" : 글로벌 상태관리(구독 및 질의사용횟수)
아래는 앱을 설치하고 설정하는 방법의 예입니다. 제 AI SaaS 서비스는 OpenAI, Replica, Llama3, stripe... 등에 의존성을 가지며 각 서비스별 api_key를 획득하고 사용하는 것을 권장합니다.
-
아래 문서를 참고하여 API Key들을 받으세요 (Stripe, Crisp는 별도 참고) emailjs OpenAi Replica CLERK Prisma
-
Clone git repocitory
git clone https://github.com/your_username_/Project-Name.git
-
Install NPM packages
npm install
-
API_Key 들을 복사된
config.js에 넣어주세요.const API_KEY = 'ENTER YOUR API';
(최상단으로)
사용법은 간단합니다. 아래 주소로 접속하시고 https://ai-saas-webstudy.vercel.app/
좌측상단 로그인버튼 클릭하시고 로그인하여 서비스를 이용하시면 됩니다.
로그인시 구글, Notion 으로 로그인하고
첫화면에서 원하는 서비스로 이동하고
질문입력란에 질문을 기재하고 버튼을 누르시거나 엔터치세요.
문제가 발생하면 보라색 말주머니 버튼 눌러 문의가능합니다.(crisp기능)
하단 footer에 메일 링크를 클릭하시고
개발자에게 바로 연락 가능하십니다.(emailjs)
(최상단으로)
- Nextjs
- OpenAI
- GPT-3.5
- GPT-4
- GPT-4.0o
- Llama3
- Clerk
- Clerk로 페이지 접근 제한(관리자페이지)
- 사용법 문서화
- 다크모드 추가
제 github과 블로그에 방문하셔서 자세한 내용을 보실 수 있습니다.
(최상단으로)
Distributed under the MIT License. See LICENSE.txt for more information.
(최상단으로)
김천호 - [EMAIL] - kopsert@naver.com Project Link: https://github.com/macklinkim/Nextjs-study-ai-saas
(최상단으로)