@shaper-sdk/next v0.0.1-alpha.5

Shaper SDK for Next.js

Shaper builds generative components that adapt on the fly. Translation, structure, behavior, you name it. It reshapes in real time.

Installation

# Using npm
npm install @shaper-sdk/next

# Using yarn
yarn add @shaper-sdk/next

# Using pnpm
pnpm add @shaper-sdk/next

Prerequisites

Before using the library, ensure you have:

1. A Next.js project (version 13 or higher recommended)
2. An API endpoint set up to handle generation requests (default: /api/generate), or just use the sample provided here
3. Required environment variables:

   SHAPER_ENDPOINT=shaper_endpoint
   SHAPER_API_KEY=your_api_key_here

Quick Start

Here's a simple example to get you started:

import { GenerativeComponent } from '@shaper-sdk/next'

function ContactForm() {
  return <GenerativeComponent prompt="Create a contact form" />
}

Advanced Usage

Incremental Refinement

You can refine your component through multiple steps:

import { GenerativeComponent } from '@shaper-sdk/next'

function ContactForm() {
  return (
    <GenerativeComponent
      prompt="Create a contact form"
      steps={['Make it simpler']}
    />
  )
}

Variants Support

Generate variants of the same component:

import { GenerativeComponent } from '@shaper-sdk/next'

function ContactForm() {
  return (
    <GenerativeComponent
      prompt="Create a contact form"
      steps={['Make it simpler']}
      variants={['Translate to Japanese']}
    />
  )
}

Type Safety with Zod

Help to define your component's data structure using Zod schemas:

import { GenerativeComponent } from '@shaper-sdk/next'
import { z } from 'zod'

function ContactForm() {
  return (
    <GenerativeComponent
      prompt="Create a contact form"
      base={{
        schema: z.object({
          name: z.string().describe('The user name'),
          email: z.string().email().describe('The user email'),
          content: z.string().min(10).describe('The user contact content'),
          onSubmit: z
            .string()
            .url()
            .describe('The url to send the form after submit'),
        }),
      }}
    />
  )
}

Initial State

Provide initial values for your component:

import { GenerativeComponent } from '@shaper-sdk/next'

function ContactForm() {
  return (
    <GenerativeComponent
      prompt="Create a contact form"
      initState={{
        name: 'John Smith',
        email: 'John.smith@example.com',
      }}
    />
  )
}

API Reference

Props

Troubleshooting

Common Issues

1. Component not generating

   • Check your API endpoint is correctly configured
   • Verify your API key is set in environment variables
   • Avoid using external or incompatibly libraries

2. Type errors with schema

   • Make sure your Zod schema matches the expected component structure
   • Verify all required fields are included in the schema
   • Check that field types match your requirements