Skip to main content

Using Fullstack Web frameworks

This approach involves having a single tool to build both your server application and client application. In modern web development terms, such a tool is called a fullstack web framework. For this example, we will be using Next.js

Image alt

Building with Next.js​

1. Create a Next.js application​

To create a new application with Next.js, run the following command in your terminal. 

create-next-app <project-name> –ts –app

2. Install project dependencies​

With our project initialized, install the weaviate-client to manage communication with our Weaviate database. 

npm install weaviate-client

3. Setup your Weaviate database​

We'll start by creating a free sandbox account on Weaviate Cloud. Follow this guide if you have trouble setting up a sandbox project.

You will need your Weaviate cluster URL and API key. If you don't already have one, create a new Cohere API key, we use Cohere as our embedding model. When done, add all three to your .env file.

COHERE_API_KEY=
WEAVIATE_HOST_URL=
WEAVIATE_ADMIN_KEY=
WEAVIATE_READ_KEY=
js docs  API docs

3.5 Add data to Weaviate​

Follow our recipe on loading data into Weaviate to import data to your Weaviate database.

4. Initialize Weaviate​

Create a file in utils/weaviate.ts and paste the following code in it. The code helps us create a connection to our Weaviate instance hosted on Weaviate Cloud.

import weaviate from "weaviate-client";

const client = await weaviate.connectToWeaviateCloud(process.env.WEAVIATE_HOST_URL as string,{
    authCredentials: new weaviate.ApiKey(process.env.WEAVIATE_ADMIN_KEY as string),
    headers: {
      'X-Cohere-Api-Key': process.env.COHERE_API_KEY as string
    }
  },
);

4. Create a Search Server Action​

Next, in ./utils/action.ts, paste the following code. With this we can run semantic searches with nearText() by calling the function vectorSearch() in other parts of our application. 

"use server";

import { connectToDB } from './weaviate.ts'

export async function vectorSearch(searchTerm: string) {
  
  const myCollection = client.collections.get('MyCollectionName');

  const response = await myCollection.query.nearText(searchTerm, {
      limit: 8,
      returnMetadata: ['distance'],
    })

  return response
  }

5. Fetch data from your server in your client application.​

In the ./app folder, paste the following code in page.tsx. We run a search on our client and display the results on the webpage. 


import { vectorSearch } from '@/utils/action.ts';

export default async function Home() {
  const search = "water sports i can win a medal in"
  const data = await vectorSearch(search);

  return (
    <html lang="en">
      <body>
        <h1>
          { data }
          </h1>
        </body>
    </html>
  )

}

6. Run your Fullstack App​

In your terminal, run the following command to start your application.

npm run dev

Your application should be running on localhost:3000.

Other frameworks​

Although only detailing Next.js in guide, you can build with Weaviate using a number of fullstack frameworks including but not limited to Nuxt, Solid and Angular

We have a list of starter applications you can play around with as well.