{"id":21294634,"url":"https://github.com/trace2798/mindsdb_fullstack","last_synced_at":"2025-10-28T13:14:08.122Z","repository":{"id":189199733,"uuid":"679122918","full_name":"trace2798/mindsdb_fullstack","owner":"trace2798","description":"This repo contains the source code on how you can integrate MindsDB with Next.js. This is also my submission for Hackerminds AI Challenge by MindsDB","archived":false,"fork":false,"pushed_at":"2023-09-03T19:20:40.000Z","size":205,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-14T03:03:27.168Z","etag":null,"topics":["mindsdb","mindsdb-js-sdk","nextjs13"],"latest_commit_sha":null,"homepage":"https://mindsdb-nextjs-integration.up.railway.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trace2798.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-16T06:32:58.000Z","updated_at":"2024-02-25T22:17:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"3c2e4c67-45b7-41b6-b4f9-39d0cbe37daa","html_url":"https://github.com/trace2798/mindsdb_fullstack","commit_stats":null,"previous_names":["trace2798/mindsdb_fullstack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fmindsdb_fullstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fmindsdb_fullstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fmindsdb_fullstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trace2798%2Fmindsdb_fullstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trace2798","download_url":"https://codeload.github.com/trace2798/mindsdb_fullstack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225741042,"owners_count":17516895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mindsdb","mindsdb-js-sdk","nextjs13"],"created_at":"2024-11-21T14:00:02.262Z","updated_at":"2025-10-28T13:14:03.071Z","avatar_url":"https://github.com/trace2798.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## [MindsDB](https://mindsdb.com/) Next.js App Router Integration.\n\n### What motivated me to select this project for submission?\n\nPrior to participating in the hackathon, [MindsDB AI App Challenge](https://mindsdb.com/hackerminds-ai-app-challenge), I had no experience with MindDB. However, by developing this application, I was able to gain valuable knowledge in creating and managing databases and models using the cloud console, as well as integrating MindsDB with a next.js app directory using the “[mindsdb-js-sdk](https://www.npmjs.com/package/mindsdb-js-sdk)”. This project provided me with an opportunity to expand my skill set and explore new technologies.\nI also believe this project will be a good contribution to the open-source community and help other web developers integrate MindsDB with Next.js application.\n\n*Note: This application is not a comprehensive representation of all that MindsDB is capable of. MindsDB has immense potential and ability, and this application is based on my current understanding of it (I came across MindsDB around 15 days ago). I plan to continue exploring the vast sea of opportunities and abilities of MindsDB over time.*\n\n### This repo is for my submission for the MindsDB HackerMinds AI App Challenge which took place from July 1 - August 31, 2023\n\n## Getting Started\n\n### Either fork the repo or directly clone it\n\n### Prerequisites\n\n**Node version 16.8 or later  \n**macOS, Windows (including WSL), and Linux are supported.\n**Accounts to get the .env values as mentioned below and in the .env.example\n\n### To directly clone the repo\n\n```shell\ngit clone https://github.com/trace2798/mindsdb_fullstack.git\n```\n\n### Install packages\n\n```shell\nnpm i\n```\n\n### Setup .env file\n\n```ts\nMINDSDB_EMAIL=''\nMINDSDB_PASSWORD=''\n\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\nCLERK_SECRET_KEY=\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up\nNEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard\nNEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard\n# I have used Planetscale for DB\nDATABASE_URL=\n```\n\n\u003cb\u003eDisclamer:\u003c/b\u003e Recently, when I named my env file as .env.local I ran into some problems with prisma so if you face similar problem just name is as .env and do not forget to add it to your .gitignore. After adding .env to your gitignore and if the .env file is getting pushed with your commit then check this [link out](https://stackoverflow.com/questions/74340379/gitignore-not-working-my-environment-variables-are-being-pushed-to-my-repo-whe)\n\n## For this application to work in your local environment, you will need the following:\n\n- MindsDB account\n- A database URL, for my application I am using PlanetScale\n- Clerk key for authentication.\n\nYou can check the .env.example for all the values required.\n\n## After setting up the accounts and keys you will need to create Model and Projects in MindsDB's console.\n\nHere is an explanation of how to create a model and project to make the generate image route in the application work.\n\n- After creating the MindsDB account, go to their cloud console and run the following command:\n\n```\nCREATE DATABASE images_generation;\n```\n\nAfter the query has been successfully queried you will see the database on the right side of the screen.\n\n![image](https://github.com/trace2798/mindsdb_fullstack/assets/113078518/8b78eb5d-8fd0-460c-aa55-35c469b2e7c4)\n\n- Now we will need to create the Model, in your console type the following and hit run:\n\n```\n//here \"image_generation\" is the name of the database we created above and \"dalle_real_natural\" is the name of the model. This model uses Dalle-E from openai\n CREATE MODEL images_generation.dalle_real_natural\n PREDICT img_url\n USING\n    engine = 'openai',\n    mode = 'image',\n    prompt_template = '{{text}}, 8K | ultra realistic image |  natural lighting | natural colors with a bit of saturation';\n```\n\n### Verification that our model has been successfully created:\n\nOn the right side of our, if you click on the database you created, you should see the model inside \"models\".\n\n![image](https://github.com/trace2798/mindsdb_fullstack/assets/113078518/c3d7a5c4-efa5-4b8c-8371-e9fe6b4e8460)\n\n## Connecting it with frontend\n\n- For my submission, I am using Next.js 13.4.13 with app directory.\n- For the application to communicate with MindsDB, we will be using the \"mindsdb-js-sdk\"\n- If you cloned the repo, you will now need to add the value for the following in your .env file\n\n```\nMINDSDB_EMAIL='YOUR_MINDSB_ACCOUNT_EMAIL'\nMINDSDB_PASSWORD='YOUR_MINDSB_ACCOUNT_PASSWORD'\n```\n\n### Understanding the code for the API to generate images\n\n- In this code first we check if the user is authenticated, then connect with MindsbDB with \"await connect()\" after successful connection we make the request to the model we created.\n- The model I created is \"dalle_real_natural\" and the database is called \"images_generation\". If you used different names you have to use those name for the code to work.\n\n```\nimport { NextResponse } from \"next/server\";\nimport MindsDB from \"mindsdb-js-sdk\";\nimport connect from \"@/lib/connect-mind\";\nimport { auth } from \"@clerk/nextjs\";\nimport prismadb from \"@/lib/prismadb\";\n\ninterface ResponseData {\n  img_url: string;\n  text: string;\n}\n\nexport async function POST(\n  req: Request,\n  { params }: { params: { clientId: string } }\n) {\n  try {\n    const { userId } = auth();\n    const body = await req.json();\n    const { text } = body;\n    if (!userId) {\n      return new NextResponse(\"Unauthorized\", { status: 401 });\n    }\n    if (!params.clientId) {\n      return new NextResponse(\"User id is required\", { status: 400 });\n    }\n    await connect();\n    const model = await MindsDB.Models.getModel(\n      \"dalle_real_natural\",\n      \"images_generation\"\n    );\n    const queryOptions = {\n      where: [`text = \"${text}\"`],\n    };\n    const response = await model?.query(queryOptions);\n    const data = response?.data as ResponseData;\n\n    await prismadb.image.create({\n      data: { clientId: params.clientId, text: text, image_url: data.img_url },\n    });\n    return NextResponse.json(response?.data);\n  } catch (error) {\n    return new NextResponse(\"Internal Error\", { status: 500 });\n  }\n}\n\n```\n\n- From the frontend, after a user submit's his or her or their request for image, the above API is called and an image is generated\n- Here is the code for await connect() which can be found inside lib --\u003e connect-mind.ts\n\n```\nimport MindsDB from \"mindsdb-js-sdk\";\n\nconst connect = async () =\u003e {\n  try {\n    await MindsDB.connect({\n      user: process.env.MINDSDB_EMAIL!,\n      password: process.env.MINDSDB_PASSWORD!,\n    });\n\n    return // console.log(\"Connected to MindsDB\");\n  } catch (error: any) {\n    return error;\n  }\n};\n\nexport default connect;\n```\n\nI have followed a similar pattern to create DATABASE and Models as explained above for the other routes in the application.\n\nOnce you have all the values for .env you can start the app and continue experimenting.\n\nI have added a notes.md file in the root of the project where I have mentioned about some other commands and prompts I have used to create other models.\n\n### Start the app\n\n```shell\nnpm run dev\n```\n\n## Available commands\n\nRunning commands with npm `npm run [command]`\n\n| command | description                              |\n| :------ | :--------------------------------------- |\n| `dev`   | Starts a development instance of the app |\n| `build` | To build your application                |\n| `start` | Starts a production instance of the app  |\n\n\"postinstall\": \"prisma generate\" is required if you want to deploy your site.\n\n### Current Deployed Link: [MindsDB Next.js Integration](https://mindsdb-nextjs-integration.up.railway.app/)\n\nI am on the trial plan for Railway so this link might get not work later but during submission it is working. Since the link might not work I have added a youtube demo link below.\n\n### Youtube Demo Link: [MindsDB Next.js Integration](https://youtu.be/iecROCk6I0k)\n\n### Limits:\n\nTo prevent the abuse of MindsDB’s free tier, limits have been imposed on the number of generations a user can have. Each user is initially given 1000 tokens, and the number of tokens used is counted based on their usage. For instance, generating an image costs 4 tokens, so after generating one image, a user will have (1000-4) tokens remaining. You can find more information about this in the \"api-limit.tsx\" file located in the lib folder.\n\n### Additional command that can be used in MindsDB cloud console\n\n#### To drop a Database\n```\nDROP DATABASE DATABASE_NAME\n```\n\n#### To drop a Project\n```\nDROP MODEL MODEL_NAME\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrace2798%2Fmindsdb_fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrace2798%2Fmindsdb_fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrace2798%2Fmindsdb_fullstack/lists"}