diff --git a/SETUP-GUIDE.md b/SETUP-GUIDE.md index 1ebff77e..72052931 100644 --- a/SETUP-GUIDE.md +++ b/SETUP-GUIDE.md @@ -1,81 +1,134 @@ -# Setup guide +# Self Hosting Guide + +This guide will help you set up your own instance of Supermemory. This is neccessary if you want to contribute to the project or if you want to self host the project. You can read more about the stack [here](https://github.com/supermemoryai/supermemory/?tab=readme-ov-file#-the-stack). ## Prerequisites - [bun](https://bun.sh/) - [turbo](https://turbo.build/repo/docs/installing) - [wrangler](https://developers.cloudflare.com/workers/cli-wrangler/install-update) +- [yarn](https://yarnpkg.com/getting-started/install): yarn is required to run scripts using turborepo. bun is not supported by turborepo yet vercel/turbo#4762 +- [Cloudflare Workers](https://developers.cloudflare.com/workers/platform/pricing/): You also need to have a paid Workers plan to use the vectorize feature which is needed run the AI backend. It is currently $5/mo + usage costs. +- [Cloudflare R2](https://developers.cloudflare.com/r2/): You need to enable R2 in the Cloudflare Dashboard for use in the web app. ## Steps 1. Clone the repo 2. Run `bun install` in the root directory -3. Create a `.dev.vars` file in `apps/web` with the following content: + +### web + +1. You need to create OAuth credentials for Google which is need for auth.js (nextauth). Visit https://developers.google.com/identity/protocols/oauth2 to learn more and https://console.cloud.google.com/apis/dashboard to create a new project and OAuth credentials. You need to set the redirect URL to `http://localhost:3000/api/auth/callback/google` for development. You can also set the redirect URL to your own domain if you are deploying the app. +2. Create a `.dev.vars` file in `apps/web` with the following content: ```bash -GOOGLE_CLIENT_ID="-" // required, visit https://developers.google.com/identity/protocols/oauth2 -GOOGLE_CLIENT_SECRET="-" // required -NEXTAUTH_SECRET='nextauthsecret' +GOOGLE_CLIENT_ID="" // required +GOOGLE_CLIENT_SECRET="" // required +NEXTAUTH_SECRET="" // generate by running `openssl rand -base64 32` DATABASE_URL='database.sqlite' NEXTAUTH_URL='http://localhost:3000' -BACKEND_SECURITY_KEY='veryrandomsecuritykey' -BACKEND_BASE_URL="where your backend is hosted" +BACKEND_SECURITY_KEY="" // used to authenticate with the backend. generate a random string using `openssl rand -base64 32` +BACKEND_BASE_URL="http://localhost:8686" ``` -4. Setup the database: +> [!NOTE] +> The `BACKEND_SECURITY_KEY` should be the same as the `SECURITY_KEY` in the `.dev.vars` file in `apps/cf-ai-backend`. -First, edit the `wrangler.toml` file in `apps/web` to point the d1 database to your account. +3. KV Namespaces -You can create a d1 database by running this command - -``` -bunx wrangler d1 create +```bash +bunx wrangler kv namespace create canvas-snaps ``` -And then replace database_name and database_id with the values +```bash +bunx wrangler kv namespace create recommendations +``` + +Do not change the binding value in the `wrangler.toml` but update the id for the namespaces with the values you get from the above commands. + +4. R2 Storage + +```bash +bunx wrangler r2 bucket create supermemory-r2 +``` + +Update bucket_name in the `wrangler.toml` file in `apps/web` to `supermemory-r2` + +5. D1 Database + +```bash +bunx wrangler d1 create supermemory-db-prod +``` + +Update the database_name and database_id in `[[env.production.d1_databases]]` with the values you get from the above command. + +```bash +bunx wrangler d1 create supermemory-db-preview +``` + +Update the database_name and database_id in `[[d1_databases]]` and `[[env.preview.d1_databases]]` with the values you get from the above command. > [!NOTE] > please don't change the binding value even if wrangler cli suggests you to do so. -``` +```bash [[d1_databases]] binding = "DATABASE" -database_name = "YOUR_DATABASE_NAME" +database_name = "supermemory-db-preview" database_id = "YOUR_DB_ID" ``` Simply run this command in `apps/web` -``` -bunx wrangler d1 migrations apply +```bash +bunx wrangler d1 migrations apply supermemory-db-preview ``` -If it runs, you can set up the cloud database as well by removing the `--local` flag, +If it runs, you can set up the cloud database as well by add the `--remote` flag, if you just want to contribute to frontend then just run `bun run dev` in the root of the project and done! (you won't be able to try ai stuff), otherwise continue... -5. You need to host your own worker for the `apps/cf-ai-backend` module. +### cf-ai-backend + +1. You need to host your own worker for the `apps/cf-ai-backend` module. To do this, first edit the `.dev.vars` file in `apps/cf-ai-backend` with the following content: ```bash -SECURITY_KEY="veryrandomsecuritykey" +SECURITY_KEY="veryrandomsecuritykey" // same as BACKEND_SECURITY_KEY in web // Why? to generate embeddings with 4000+ tokens OPENAI_API_KEY="sk-" ``` -6. Run this command to initialise vector database +2. Run this command to initialise vector database > Note: You need to use the workers paid plan to use vectorize for now. -``` -wrangler vectorize create --dimensions=1536 supermem-vector-1 --metric=cosine +```bash +bunx wrangler vectorize create --dimensions=1536 supermemory --metric=cosine ``` -7. Change the `wrangler.toml` file in `apps/cf-ai-backend` to point to your KV namespace +Update the index_name for `[[vectorize]]` in `wrangler.toml` file in `apps/cf-ai-backend` with the `supermemory` or the name you used in the above command. -8. Run `bun dev` in the root directory and Voila! You have your own supermemory instance running! +3. Create KV namespaces for the `cf-ai-backend` module -> Note: You need to replace the url `https://cf-ai-backend.dhr.wtf` everywhere with your own url for the cf-ai-backend module. +```bash +bunx wrangler kv namespace create prod +``` + +Update the id in `[[kv_namespaces]]` in the `wrangler.toml` file in `apps/cf-ai-backend` with the value you get from the above command. + +```bash +bunx wrangler kv namespace create preview +``` + +Update the preview_id in `[[kv_namespaces]]` in the `wrangler.toml` file in `apps/cf-ai-backend` with the value you get from the above command. + +## Local Development + +- Run `bun dev` in the root directory and Voila! You have your own supermemory instance running! + +> [!NOTE] +> It sometimes takes multiple tries to successfully run the `bun dev` command. If you encounter any issues, try running the command again. ## Deploying diff --git a/apps/web/app/(auth)/onboarding/page.tsx b/apps/web/app/(auth)/onboarding/page.tsx index c402c560..9728d107 100644 --- a/apps/web/app/(auth)/onboarding/page.tsx +++ b/apps/web/app/(auth)/onboarding/page.tsx @@ -1,6 +1,5 @@ "use client"; -import Link from "next/link"; import { ChevronLeftIcon, ChevronRightIcon, @@ -11,7 +10,7 @@ import { CheckIcon, PlusCircleIcon } from "@heroicons/react/24/outline"; import { motion } from "framer-motion"; import { useEffect, useState } from "react"; import { toast } from "sonner"; -import { createMemory } from "@repo/web/app/actions/doers"; +import { completeOnboarding, createMemory } from "@repo/web/app/actions/doers"; import { useRouter } from "next/navigation"; import Logo from "../../../public/logo.svg"; import Image from "next/image"; @@ -23,8 +22,13 @@ export default function Home() { const { push } = useRouter(); useEffect(() => { + const updateDb = async () => { + await completeOnboarding(); + } if (currStep > 3) { - push("/home?q=what%20is%20supermemory"); + updateDb().then(() => { + push("/home?q=what%20is%20supermemory"); + }); } }, [currStep]); @@ -182,7 +186,7 @@ function StepIndicator({ />

Step: {currStep}/3

currStep <= 3 && setCurrStep(currStep + 1)} /> @@ -381,6 +385,12 @@ function StepTwo({ currStep }: { currStep: number }) { } function Navbar() { + const router = useRouter(); + const handleSkip = async () => { + await completeOnboarding(); + router.push("/home?q=what%20is%20supermemory"); + } + return (
- - - +
); } diff --git a/apps/web/app/(auth)/signin/page.tsx b/apps/web/app/(auth)/signin/page.tsx index a31343cd..3b563b90 100644 --- a/apps/web/app/(auth)/signin/page.tsx +++ b/apps/web/app/(auth)/signin/page.tsx @@ -18,7 +18,7 @@ async function Signin({ const user = await auth(); if (user) { - await redirect("/home"); + redirect("/home"); } return ( @@ -64,7 +64,7 @@ async function Signin({ action={async () => { "use server"; await signIn("google", { - redirectTo: "/home?firstTime=true", + redirectTo: "/home", }); }} > diff --git a/apps/web/app/(dash)/dialogContentContainer.tsx b/apps/web/app/(dash)/dialogContentContainer.tsx index aae71237..4e8d81ef 100644 --- a/apps/web/app/(dash)/dialogContentContainer.tsx +++ b/apps/web/app/(dash)/dialogContentContainer.tsx @@ -100,7 +100,7 @@ export function DialogContentContainer({ }, []); return ( - +
{ const content = e.get("content")?.toString(); diff --git a/apps/web/app/(dash)/header/header.tsx b/apps/web/app/(dash)/header/header.tsx index a3fba9b1..595666b0 100644 --- a/apps/web/app/(dash)/header/header.tsx +++ b/apps/web/app/(dash)/header/header.tsx @@ -7,6 +7,8 @@ import { getChatHistory } from "../../actions/fetchers"; import NewChatButton from "./newChatButton"; import AutoBreadCrumbs from "./autoBreadCrumbs"; import SignOutButton from "./signOutButton"; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@repo/ui/shadcn/dropdown-menu"; +import { CaretDownIcon } from "@radix-ui/react-icons"; async function Header() { const chatThreads = await getChatHistory(); @@ -33,27 +35,31 @@ async function Header() {
-
- - -
-
- {chatThreads.data.map((thread) => ( + + + History + + + + {chatThreads.data.map((thread) => ( + {thread.firstMessage} - ))} -
-
-
+ + ))} + + + +
+ + diff --git a/apps/web/app/(dash)/home/history.tsx b/apps/web/app/(dash)/home/history.tsx index 922734df..307ef4e3 100644 --- a/apps/web/app/(dash)/home/history.tsx +++ b/apps/web/app/(dash)/home/history.tsx @@ -5,26 +5,32 @@ import Link from "next/link"; import { memo, useEffect, useState } from "react"; import { motion } from "framer-motion"; import { chatThreads } from "@/server/db/schema"; +import { getQuerySuggestions } from "@/app/actions/doers"; +import { Button } from "@repo/ui/shadcn/button"; -const History = memo(() => { - const [chatThreads_, setChatThreads] = useState< - (typeof chatThreads.$inferSelect)[] | null - >(null); +const History = memo(({ setQuery }: { setQuery: (q: string) => void }) => { + const [suggestions, setSuggestions] = useState(null); useEffect(() => { (async () => { - const chatThreads = await getChatHistory(); - if (!chatThreads.success || !chatThreads.data) { - console.error(chatThreads.error); + const suggestions = await getQuerySuggestions(); + if (!suggestions.success || !suggestions.data) { + console.error(suggestions.error); + setSuggestions([]); return; } - setChatThreads(chatThreads.data.reverse().slice(0, 3)); + console.log(suggestions); + if (typeof suggestions.data === "string") { + setSuggestions(JSON.parse(suggestions.data)); + return; + } + setSuggestions(suggestions.data.reverse().slice(0, 3)); })(); }, []); return (
    - {!chatThreads_ && ( + {!suggestions && ( <> { > )} - {chatThreads_?.map((thread) => ( + {suggestions?.map((suggestion) => ( setQuery(suggestion)} > - {" "} - - {thread.firstMessage} - + {suggestion} ))}
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx index ebd4d84b..d192d07d 100644 --- a/apps/web/app/(dash)/home/page.tsx +++ b/apps/web/app/(dash)/home/page.tsx @@ -4,12 +4,15 @@ import React, { useEffect, useState } from "react"; import QueryInput from "./queryinput"; import { getSessionAuthToken, getSpaces } from "@/app/actions/fetchers"; import { redirect, useRouter } from "next/navigation"; -import { createChatThread, linkTelegramToUser } from "@/app/actions/doers"; +import { + createChatThread, + getQuerySuggestions, + linkTelegramToUser, +} from "@/app/actions/doers"; import { toast } from "sonner"; import { motion } from "framer-motion"; -import { ChromeIcon, GithubIcon, TwitterIcon } from "lucide-react"; +import { ChromeIcon, GithubIcon, MailIcon, TwitterIcon } from "lucide-react"; import Link from "next/link"; -import { homeSearchParamsCache } from "@/lib/searchParams"; import History from "./history"; const slap = { @@ -26,28 +29,14 @@ const slap = { }; function Page({ searchParams }: { searchParams: Record }) { - // TODO: use this to show a welcome page/modal - const firstTime = searchParams.firstTime === "true"; - - const query = searchParams.q || ""; - - if (firstTime) { - redirect("/onboarding"); - } - - const [queryPresent, setQueryPresent] = useState(false); - - const [telegramUser, setTelegramUser] = useState( - searchParams.telegramUser as string, - ); - const [extensionInstalled, setExtensionInstalled] = useState< - string | undefined - >(searchParams.extension as string); - - const { push } = useRouter(); + const telegramUser = searchParams.telegramUser; + const extensionInstalled = searchParams.extension; + const [query, setQuery] = useState(searchParams.q || ""); const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]); + const { push } = useRouter(); + useEffect(() => { if (telegramUser) { const linkTelegram = async () => { @@ -63,10 +52,6 @@ function Page({ searchParams }: { searchParams: Record }) { linkTelegram(); } - if (extensionInstalled) { - toast.success("Extension installed successfully"); - } - getSpaces().then((res) => { if (res.success && res.data) { setSpaces(res.data); @@ -77,15 +62,15 @@ function Page({ searchParams }: { searchParams: Record }) { getSessionAuthToken().then((token) => { if (typeof window === "undefined") return; + if (extensionInstalled) { + toast.success("Extension installed successfully"); + } window.postMessage({ token: token.data }, "*"); }); }, [telegramUser]); return (
- {/* all content goes here */} - {/*
hi {firstTime ? 'first time' : ''}
*/} - }) {
{ if (q.length === 0) { toast.error("Query is required"); @@ -123,7 +108,7 @@ function Page({ searchParams }: { searchParams: Record }) { initialSpaces={spaces} /> - +
@@ -138,12 +123,12 @@ function Page({ searchParams }: { searchParams: Record }) { Install extension - + Bug report void; initialSpaces?: { id: number; name: string; }[]; - initialQuery?: string; mini?: boolean; handleSubmit: ( q: string, spaces: { id: number; name: string }[], proMode: boolean, ) => void; + query: string; + setQuery: (q: string) => void; }) { - const [q, setQ] = useState(initialQuery || ""); - const [proMode, setProMode] = useState(false); const [selectedSpaces, setSelectedSpaces] = useState< @@ -42,11 +40,11 @@ function QueryInput({ {/* input and action button */} { - if (q.trim().length === 0) { + if (query.trim().length === 0) { return; } - handleSubmit(q, selectedSpaces, proMode); - setQ(""); + handleSubmit(query, selectedSpaces, proMode); + setQuery(""); }} >