Get started with Fullstack Components

Start using AI-powered building blocks to create your next great idea from end-to-end.

Installation

npm install @trikinco/fullstack-components

Requirements

• next>=13, supporting both App and Pages Routers.
• Your own OpenAI API key.

Styling

Fullstack Components uses Tailwind as the default styling engine, but it's an optional dependency, letting you use whatever styling approach you prefer.

View Usage for details on styling.

Setup

If you're using Next.js 13 you must enable server actions in your next.config.js file. You must remove this if you later upgrade to Next.js 14 or higher.

Step 1: Add environment variables

These environment variables are required to use the OpenAI API and to let you call your own internal Next.js API route handler.

OPENAI_API_KEY=<key>
NEXT_PUBLIC_HOST=<url>

1. Replace <key> with your OpenAI API key
2. Replace <url> with the full URL of your project. e.g http://localhost:3000 for local development and https://example.com for production

Step 2: Add the API route handler

A new catch-all dynamic route with an API route handler in your Next.js app will handle all the endpoints needed by fullstack-components.

These endpoints are needed for all client-side functionality to serve data to components, hooks and other utilities.

Adding the route handler file

Depending on which router you use in Next.js, the location of the new API route handler will differ:

• App Router: app/api/fsutils/[...fscomponents]/route.ts
• Pages Router: pages/api/fsutils/[...fscomponents].ts

E.g when using the App Router, add the fsutils/[...fscomponents] folders to app/api, and a new route.ts file to the [...fscomponents] folder.

Step 3: Configure the API route handler

As an example, let's set up the API route handler for the <Image> component by adding image: handleImageRequest().

import {
  handleFSComponents,
  handleImageRequest,
} from '@trikinco/fullstack-components'
 
const fscHandler = handleFSComponents({
  // Configure one or more handlers
  image: handleImageRequest({
    openAiApiKey: process.env.OPENAI_API_KEY || '',
  }),
  // ...Add more handlers here
})
 
export { fscHandler as GET, fscHandler as POST }

All requests to /api/fsutils/*(image, prompt, notFoundEnhancer, etc.) will automatically be handled by fullstack-components, as long as you've added the appropriate handler.

Now that you've added the image handler you'll be able to call /api/fsutils/image from Client Components, hooks and fetchers.

For using Server Components and getters API route handlers are not necessary.

Note on API route handlers

All handlers can be imported from @trikinco/fullstack-components and are prefixed with handle.

Handlers examples:

• image: handleImageRequest
• htmlPage: handleHtmlPageRequest
• notFoundEnhancer: handleNotFoundEnhancement

View the documentation for each feature for more details about each handler.