Fullstack Components

Fullstack Components is a library of AI-powered building blocks for Next.js that help you build your great ideas from end-to-end.

Installation

npm i @trinkinco/fullstack-components

fullstack-components comes with built-in TypeScript types.

Requirements

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

Get started

fullstack-components lets you work securely with AI on the web while being in full control of your code.

The easiest way to start building with fullstack-components is to follow the get started steps in the documentation.

Quick features and usage examples

All features in the documentation have usage examples like these:

• Get started with GPT prompts quickly: Use Server Components and React hooks designed for seamless prompting, including support for strict JSON mode.
• Dynamic Generative UI: Effortlessly create versatile React components and entire HTML pages using a single prompt.
• Intelligent 'Not Found' Handling: Use AI to find the closest matching page to the not found URL and show helpful messages.
• Advanced Error Resolution: AI-powered smart error boundaries offer clear, comprehensible error details for end-users and practical debugging tips for developers.
• Image Generation and Vision API: Use the <Image> Server Component for auto-generating alt tags or creating images using DALL·E, enhancing next/image.
• Speech-to-text and text-to-speech: Audio Server Components that transform React trees or text into lifelike speech and transcribe audio files into text.
• AI Text Generation: Simplify the creation, modification, and editing of text with Server Components and React hooks.
• AI Select Dropdown & Lists: Generate, sort, select and label content in dropdowns or lists.

See fullstack-components.vercel.app for more information, documentation and examples of these features.

Documentation

Visit fullstack-components.vercel.app for the full documentation.

Once you've completed the get started steps, we recommend taking a quick look at the core concepts before diving into coding with the usage example.

Feedback and discussions

The Fullstack Components community can be found on GitHub Discussions, where you can provide feedback, ask questions, voice ideas, and share your projects.

Authors

• Lars Magnus Klavenes (@larsmagnus)
• Darragh O'Riordan (@darraghoriordan)
• Connor Thomsen (@cononic)