<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Tutorial

Create a Refine app with Weavy components

This tutorial will guide you in integrating a Weavy app, quickly getting a proof-of-concept up and running, and gaining an understanding of what Weavy can do for your Refine apps.

Let's get started!

1. Clone the example repo

We have created an example where the Weavy components are added on top of the Refine example.

  • Clone the repo.
  • Install the npm dependencies.
  • Open the example in the repo using your favorite editor.
git clone https://github.com/weavy-labs/refine.git weavy-refine
cd weavy-refine
npm install

2. Weavy API Key

First we need an API key to communicate with the Weavy backend.

To securely handle the Weavy configuration, we provide the environment url and the API key as environment variables.

Create an .env file in the root of your example project and place the Weavy configuration there.

 

.env 
NEXT_PUBLIC_WY_URL="WEAVY_URL"
WY_APIKEY="********************"

3. Run the demo

Start the dev mode and open the preview running at http://localhost:3000 to see the example in full action. 

Run the developer mode 
npm run dev

4. Done!

We now have a complete Refine app running using Weavy components. 

Make sure to explore:

  • Seamlessly integrated authentication.
  • Notifications available in the top bar.
  • Messenger available in the top bar .
  • Comments in the blog post view.
  • Feeds, chat and files in the category view.

Now, imagine all this in your app!

refine-categories
On this page
Next

What's next?

Build

Build workflow and custom component

A step-by-step guide to building a workflow and rendering a building block with the logged-in user.

The next step is to fetch the logged-in user of your Retool app, create a workflow to sync the user with Weavy and generate an access token so all of your users can start using our building blocks contextually.

Best way to learn step by step how it works
Start building
Import

Import complete workflow and app

Use our JSON templates and import to quickly have it up and running to experiment.

We created a prebuilt workflow that fetches information about the current user in Retool, communicates with the Weavy API, and renders all our building blocks in an app.
The fastest way to get up and running with access tokens, etc.
Easy to extract to your own apps/modules
Start importing

There's more

Check out the other tutorials for setting up workflows, queries, and more.

All tutorials
Support

You're not signed in to your Weavy account. To access live chat with our developer success team you need to be signed in.

Sign in or create a Weavy account