terrytjw/let-us-cook

Cook up full stack next.js AI applications in minutes.

Let Us Cook

The kickass template for building full stack AI apps with Next.js.

Project setup

Step 1

Clone the repository:

git clone https://github.com/terrytjw/next-gen-template.git

Step 2

Install dependencies:

bun i

Step 3

Populate env variables in .env.local file. See .env.example for reference.

cp .env.example .env.local

Step 4

Set up your own Supabase postgresDB at https://supabase.com/dashboard/projects

Run the following command to push the schema to the database:

bun update-db

Schema file can be found in /lib/db/schema.ts directory.

Step 5

Run the development server:

bun dev

Open http://localhost:3000 with your browser to see the result.

Step 6

Run the following command to view the tables:

bun studio

Tech stack

1. Next.js (TypeScript) - Fullstack React framework
2. Tailwind CSS (shadcn/ui) - Styling library
3. React Query - Data fetching & Async state management
4. Supabase Auth - Managed Authentication
5. DrizzleORM - ORM
6. Supabase PostgresDB - Database
7. Vercel AI SDK
8. LangChain TS

let-us-cook's Issues

integrate vercel's generative UI

overview:

• stream components using vercel's generative UI
• can reference morphic.sh to learn

useful links:

• https://www.youtube.com/watch?v=br2d_ha7alw
• https://github.com/vercel/ai/blob/main/examples/next-ai-rsc/app/action.tsx
• https://sdk.vercel.ai/docs/api-reference/generative-ui/create-ai

build a best practice RAG pipeline

overview:

• use langchain + supabase pgvector to build a RAG pipeline

useful links:

• https://supabase.com/docs/guides/ai/langchain
• https://js.langchain.com/docs/integrations/vectorstores/supabase

integrate groq's tool calling

https://js.langchain.com/docs/integrations/chat/groq#tool-calling

integrate cloudflare rate-limiting

https://developers.cloudflare.com/workers/runtime-apis/bindings/rate-limit/

integrate langgraph

overview:

• build langgraph pipeline to facilitate cyclic graph agentic workflows

useful links:

• https://github.com/langchain-ai/langgraphjs

integrating Zustand for global state

overview:

• currently using a hacky way via local storage for one of the asst api use cases that requires global state
• aiming to replace that with zustand

useful links:

• https://www.youtube.com/watch?v=BxohoXjbhKc
• https://github.com/HamedBahram/next-zustand
• https://docs.pmnd.rs/zustand/getting-started/introduction