ShipAny

https://docs.shipany.ai/en
Admin
ShipAny is a Next.js development framework for rapidly building AI SaaS projects with built-in...
Tokens:23,390
Snippets:334
Trust Score:8.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://docs.shipany.ai/en

Run this command to start the local development server. You can then preview your project in the browser.

```bash
pnpm dev
```

--------------------------------

### Start ngrok Service

Source: https://docs.shipany.ai/en/features/payment/creem

Use this command to start the ngrok service to expose your local server to the internet. This is necessary for testing webhooks.

```bash
ngrok http http://localhost:3000
```

--------------------------------

### Install Project Dependencies

Source: https://docs.shipany.ai/en

Install all necessary project dependencies using pnpm. This command should be run from the project root directory.

```bash
pnpm install
```

--------------------------------

### Copy Environment Variable Example

Source: https://docs.shipany.ai/en

Create the development environment configuration file by copying the example file. This sets up default environment variables for local development.

```bash
cp .env.example .env.development
```

--------------------------------

### Database Connection String Example

Source: https://docs.shipany.ai/en/features/database

This is an example of a PostgreSQL connection string for Supabase. Replace '[YOUR-PASSWORD]' with your actual database password.

```text
postgresql://postgres.defqvdpquwyqqjlmurkg:[YOUR-PASSWORD]@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres
```

--------------------------------

### Example Environment Configuration

Source: https://docs.shipany.ai/en

This is an example of environment variable configuration for the web application. Configure `.env.development` and `.env.production` files according to your project needs.

```dotenv
# -----------------------------------------------------------------------------
# Web Information
# -----------------------------------------------------------------------------
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"
NEXT_PUBLIC_PROJECT_NAME = "ShipAny"
 
# -----------------------------------------------------------------------------
# Database with Supabase

```

--------------------------------

### Create Production Environment File

Source: https://docs.shipany.ai/en/deploy/deploy-to-cloudflare

Copy the example environment file to create a production-specific configuration. Update this file with your production environment settings.

```bash
cp .env.example .env.production
```

--------------------------------

### Install React Email Components

Source: https://docs.shipany.ai/en/features/email/resend

Install the necessary Resend and React Email packages using pnpm. This command adds the required libraries to your project.

```bash
pnpm add resend @react-email/components
```

--------------------------------

### Example Landing Page Content JSON

Source: https://docs.shipany.ai/en

This is an example of the JSON structure for landing page content. Update this file to customize your landing page.

```json
{
  "title": "Flux AI Image Generator",
  "description": "Create stunning AI-generated images with Flux AI.",
  "features": [
    "High-quality image generation",
    "Easy to use interface",
    "Fast processing times"
  ],
  "cta": {
    "text": "Try Flux AI Now",
    "link": "https://www.flux.ai/"
  }
}
```

--------------------------------

### View Blog List

Source: https://docs.shipany.ai/en/features/blog

Example URL structure for viewing the list of all published blog posts. Ensure the locale and domain are correctly specified.

```url
https://{your-domain}/{locale}/posts
```

--------------------------------

### Install pnpm Globally

Source: https://docs.shipany.ai/en/guide/good-to-know

Install the pnpm package manager globally using npm. This is recommended for managing packages in the ShipAny project.

```bash
$ npm install -g pnpm
```

--------------------------------

### Create Wrangler Configuration File

Source: https://docs.shipany.ai/en/deploy/deploy-to-cloudflare

Copy the example wrangler.toml file to set up Cloudflare deployment configurations. Ensure production variables from .env.production are included in the [vars] section and update the project name.

```bash
cp wrangler.toml.example wrangler.toml
```

--------------------------------

### Check npm Version

Source: https://docs.shipany.ai/en/guide/good-to-know

Verify your installed npm version. Ensure it meets the recommended version for ShipAny development.

```bash
$ npm -v
10.7.0
```

--------------------------------

### View Single Blog Post

Source: https://docs.shipany.ai/en/features/blog

Example URL structure for viewing a specific blog post. Replace placeholders with your domain, locale, and the post's slug.

```url
https://{your-domain}/{locale}/posts/{slug}
```

--------------------------------

### Check Git Version

Source: https://docs.shipany.ai/en/guide/good-to-know

Verify your installed Git version. This is necessary for version control and accessing your Github repository.

```bash
$ git --version
git version 2.39.3 (Apple Git-146)
```

--------------------------------

### Example Localization Text JSON

Source: https://docs.shipany.ai/en

This JSON file contains localization strings for the website. Update these messages for your project's specific content and keywords.

```json
{
  "greeting": "Welcome to Flux AI",
  "description": "Your AI Image Generator",
  "keywords": "flux ai, ai image generator"
}
```

--------------------------------

### Check pnpm Version

Source: https://docs.shipany.ai/en/guide/good-to-know

Verify your installed pnpm version. Ensure it meets the recommended version for ShipAny development.

```bash
$ pnpm -v
9.15.0
```

--------------------------------

### Check NodeJS Version

Source: https://docs.shipany.ai/en/guide/good-to-know

Verify your installed NodeJS version. Ensure it meets the recommended version for ShipAny development.

```bash
$ node -v
v22.2.0
```

--------------------------------

### AI Editor Prompt for Landing Page Content

Source: https://docs.shipany.ai/en/tutorials/customize-landing-page

Example prompt for using an AI editor like Cursor to generate new Landing Page content. It specifies the product name and provides a URL for content reference.

```text
I want to build a landing page for my product named "Flux AI Image Generator", please update the landing page json file, content reference @Web @https://www.flux.ai/
```

--------------------------------

### AI Chat Prompt for Landing Page Content

Source: https://docs.shipany.ai/en/tutorials/customize-landing-page

Example prompt for using AI chat products to rewrite existing Landing Page JSON content. It instructs the AI to focus on a specific product and topic.

```text
rewrite this json file with new content for my product, focus on topic "Flux AI Image Generator"
```

--------------------------------

### Import and Use Feedback Component in Layout

Source: https://docs.shipany.ai/en/features/feedback

Example of importing and rendering the Feedback component within a Next.js layout file. This component should be placed where it's accessible on your pages, typically near the footer.

```typescript
import Footer from "@/components/blocks/footer";
import Header from "@/components/blocks/header";
import { ReactNode } from "react";
import { getLandingPage } from "@/services/page";
import Feedback from "@/components/feedback";

export default async function DefaultLayout({
  children,
  params,
}: { 
  children: ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const page = await getLandingPage(locale);

  return (
    <>
      {page.header && <Header header={page.header} />}
      <main className="overflow-x-hidden">{children}</main>
      {page.footer && <Footer footer={page.footer} />}
      <Feedback socialLinks={page.footer?.social?.items} />
    </>
  );
}
```

--------------------------------

### Generate Image with Kling AI

Source: https://docs.shipany.ai/en/ai-integrations/image-generation

Generate images using Kling AI via the `experimental_generateImage` function. This example uses a custom Kling provider import path.

```typescript
import { experimental_generateImage as generateImage } from "ai";
import { kling } from "@/aisdk/kling";
 
const prompt = "a beautiful girl running with 2 cats";
const model = "kling-v1";
 
const imageModel = kling.image(model);
const providerOptions = {
  kling: {},
};

const { images, warnings } = await generateImage({
  model: imageModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});
```

--------------------------------

### Create POST API Endpoint in NextJS

Source: https://docs.shipany.ai/en/tutorials/api-call

Implement a POST request handler for an API endpoint. This example demonstrates basic JSON parsing and error handling. Ensure your request includes a 'message' field.

```typescript
import { respData, respErr } from "@/lib/resp";
 
export async function POST(req: Request) {
  try {
    const { message } = await req.json();
    if (!message) {
      return respErr("invalid params");
    }
 
    return respData({
      pong: `received message: ${message}`,
    });
  } catch (e) {
    console.log("test failed:", e);
    return respErr("test failed");
  }
}
```

--------------------------------

### Initialize Database Schema

Source: https://docs.shipany.ai/en/features/database

Run this command in the project root to execute all migration files and create database tables. Do not run if the database already contains ShipAny tables.

```bash
pnpm db:migrate
```

--------------------------------

### Navigate to Project Directory

Source: https://docs.shipany.ai/en

Change your current directory to the root of the cloned ShipAny project.

```bash
cd my-shipany-project
```

--------------------------------

### Set Up Kling AI Environment Variables

Source: https://docs.shipany.ai/en/ai-integrations/video-generation

Configure your development environment by setting the KLING_ACCESS_KEY and KLING_SECRET_KEY as environment variables.

```env
KLING_ACCESS_KEY = "xxx"
KLING_SECRET_KEY = "xxx"
```

--------------------------------

### Create Blog Posts Table

Source: https://docs.shipany.ai/en/features/blog

SQL statement to create the 'posts' table for storing blog content. Ensure database configuration is completed before running.

```sql
CREATE TABLE posts (
    id SERIAL PRIMARY KEY,
    uuid VARCHAR(255) UNIQUE NOT NULL,
    slug VARCHAR(255),
    title VARCHAR(255),
    description TEXT,
    content TEXT,
    created_at timestamptz,
    updated_at timestamptz,
    status VARCHAR(50),
    cover_url VARCHAR(255),
    author_name VARCHAR(255),
    author_avatar_url VARCHAR(255),
    locale VARCHAR(50)
);
```

--------------------------------

### Create React Email Template Component

Source: https://docs.shipany.ai/en/features/email/resend

Define an email template using React Email components. This example demonstrates a simple button component.

```typescript
import * as React from "react";
import { Html, Button } from "@react-email/components";
 
export function ReactEmail(props: { url: string }) {
  const { url } = props;
 
  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}
```

--------------------------------

### Clone ShipAny Project Repository

Source: https://docs.shipany.ai/en

Use this command to clone the ShipAny project template to your local machine. Ensure you have joined the repository first.

```bash
git clone git@github.com:shipanyai/shipany-template-one.git my-shipany-project
```

--------------------------------

### Create Custom Email Template Component

Source: https://docs.shipany.ai/en/features/email/resend

Define a React component to serve as your email template. This example shows a simple verification code template.

```typescript
export function VerifyCode({ code }: { code: string }) {
  return (
    <div>
      <h1>Verify Code</h1>
      <p style={{ color: "red" }}>Your verification code is: {code}</p>
    </div>
  );
}
```

--------------------------------

### Generate Video using Kling AI Provider

Source: https://docs.shipany.ai/en/ai-integrations/video-generation

Use the custom `generateVideo` method and `kling` provider from ShipAny's ai-sdk to generate videos. Ensure you have the correct import path for the custom provider. Video generation can take several minutes.

```typescript
import { generateVideo } from "@/aisdk";
import { kling } from "@/aisdk/kling";

const prompt = "a beautiful girl running with 2 cats";
const model = "kling-v1-6";

const videoModel = kling.video(model);
const providerOptions = {
  kling: {
    mode: "std",
    duration: 5,
  },
};

const { videos, warnings } = await generateVideo({
  model: videoModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});
```

--------------------------------

### Debug API Endpoint with cURL

Source: https://docs.shipany.ai/en/tutorials/api-call

Use the `curl` command to send a POST request to your API endpoint for debugging. This example sends a JSON payload with a 'message' field.

```bash
curl -X POST -H "Content-Type: application/json" \
    -d '{"message": "hello"}' \
    http://localhost:3000/api/ping
```

--------------------------------

### Generate Database Migration Files

Source: https://docs.shipany.ai/en/features/database

Command to generate database migration files after completing database configuration steps.

```bash
pnpm db:generate
```

--------------------------------

### Get User UUID and Redirect if Not Logged In

Source: https://docs.shipany.ai/en/user-console/new-table

Create a page component that retrieves the current user's UUID. If the user is not logged in, redirect them to the sign-in page, preserving the intended callback URL.

```typescript
import { getUserUuid } from "@/services/user";
import { redirect } from "next/navigation";
 
export default async function MyOrdersPage() {
  const user_uuid = await getUserUuid();
 
  const callbackUrl = `${process.env.NEXT_PUBLIC_WEB_URL}/my-orders`;
  if (!user_uuid) {
    redirect(`/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`);
  }
 
  return <div>My Orders With User UUID: {user_uuid}</div>;
}
```

--------------------------------

### Configure Google Login Environment Variables

Source: https://docs.shipany.ai/en/features/oauth

Set these environment variables to enable and configure Google Login. Ensure you have obtained the Client ID and Client Secret from Google Cloud Console.

```env
AUTH_SECRET = "xxx"
AUTH_GOOGLE_ID = "4680xx-xxx.apps.googleusercontent.com"
AUTH_GOOGLE_SECRET = "GOxxx"

NEXT_PUBLIC_AUTH_GOOGLE_ENABLED = "true"
```

--------------------------------

### Database Connection Instance for ShipAny

Source: https://docs.shipany.ai/en/features/database

Set up a database connection instance for ShipAny, handling both Node.js environments with connection pooling and Cloudflare Workers with single connections. Throws an error if DATABASE_URL is not set.

```typescript
import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
 
// Detect if running in Cloudflare Workers environment
const isCloudflareWorker =
  typeof globalThis !== "undefined" && "Cloudflare" in globalThis;
 
// Database instance for Node.js environment
let dbInstance: ReturnType<typeof drizzle> | null = null;
 
export function db() {
  const databaseUrl = process.env.DATABASE_URL;
  if (!databaseUrl) {
    throw new Error("DATABASE_URL is not set");
  }
 
  // In Cloudflare Workers, create new connection each time
  if (isCloudflareWorker) {
    // Workers environment uses minimal configuration
    const client = postgres(databaseUrl, {
      prepare: false,
      max: 1, // Limit to 1 connection in Workers
      idle_timeout: 10, // Shorter timeout for Workers
      connect_timeout: 5,
    });
 
    return drizzle(client);
  }
 
  // In Node.js environment, use singleton pattern
  if (dbInstance) {
    return dbInstance;
  }
 
  // Node.js environment with connection pool configuration
  const client = postgres(databaseUrl, {
    prepare: false,
    max: 10, // Maximum connections in pool
    idle_timeout: 30, // Idle connection timeout (seconds)
    connect_timeout: 10, // Connection timeout (seconds)
  });
  dbInstance = drizzle({ client });
 
  return dbInstance;
}
```

--------------------------------

### Drizzle ORM - Post Database Operations

Source: https://docs.shipany.ai/en/features/database

This TypeScript code defines functions for CRUD operations on the 'posts' table using drizzle-orm. It includes functions for inserting, updating, finding by UUID or slug, retrieving all posts, posts by locale, and getting the total post count.

```typescript
import {
  posts
} from "@/db/schema";
import {
  db
} from "@/db";
import {
  and,
  desc,
  eq
} from "drizzle-orm";
 
export enum PostStatus {
  Created = "created",
  Deleted = "deleted",
  Online = "online",
  Offline = "offline",
}
 
export async function insertPost(
  data: typeof posts.$inferInsert
): Promise<typeof posts.$inferSelect | undefined> {
  const [post] = await db().insert(posts).values(data).returning();
 
  return post;
}
 
export async function updatePost(
  uuid: string,
  data: Partial<typeof posts.$inferInsert>
): Promise<typeof posts.$inferSelect | undefined> {
  const [post] = await db()
    .update(posts)
    .set(data)
    .where(eq(posts.uuid, uuid))
    .returning();
 
  return post;
}
 
export async function findPostByUuid(
  uuid: string
): Promise<typeof posts.$inferSelect | undefined> {
  const [post] = await db()
    .select()
    .from(posts)
    .where(eq(posts.uuid, uuid))
    .limit(1);
 
  return post;
}
 
export async function findPostBySlug(
  slug: string,
  locale: string
): Promise<typeof posts.$inferSelect | undefined> {
  const [post] = await db()
    .select()
    .from(posts)
    .where(and(eq(posts.slug, slug), eq(posts.locale, locale)))
    .limit(1);
 
  return post;
}
 
export async function getAllPosts(
  page: number = 1,
  limit: number = 50
): Promise<(typeof posts.$inferSelect)[] | undefined> {
  const offset = (page - 1) * limit;
 
  const data = await db()
    .select()
    .from(posts)
    .orderBy(desc(posts.created_at))
    .limit(limit)
    .offset(offset);
 
  return data;
}
 
export async function getPostsByLocale(
  locale: string,
  page: number = 1,
  limit: number = 50
): Promise<(typeof posts.$inferSelect)[] | undefined> {
  const offset = (page - 1) * limit;
 
  const data = await db()
    .select()
    .from(posts)
    .where(and(eq(posts.locale, locale), eq(posts.status, PostStatus.Online)))
    .orderBy(desc(posts.created_at))
    .limit(limit)
    .offset(offset);
 
  return data;
}
 
export async function getPostsTotal(): Promise<number> {
  const total = await db().$count(posts);
 
  return total;
}
```

--------------------------------

### Drizzle Kit Configuration for Database

Source: https://docs.shipany.ai/en/features/database

Configure Drizzle Kit for database migrations and schema management. Ensure .env files are loaded and specify the database dialect and credentials.

```typescript
import "dotenv/config";
import { config } from "dotenv";
import { defineConfig } from "drizzle-kit";
 
config({ path: ".env" });
config({ path: ".env.development" });
config({ path: ".env.local" });
 
export default defineConfig({
  out: "./src/db/migrations",
  schema: "./src/db/schema.ts",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});
```

--------------------------------

### Deploy to Cloudflare

Source: https://docs.shipany.ai/en/deploy/deploy-to-cloudflare

Execute the deployment script to deploy your project to Cloudflare Workers. Follow the prompts for project name, branch, and Cloudflare account connection.

```bash
npm run cf:deploy
```

--------------------------------

### Configure Zhipu AI (OpenAI Compatible)

Source: https://docs.shipany.ai/en/ai-integrations/text-generation

Set the base URL and API key for Zhipu AI in your .env file.

```dotenv
ZHIPU_BASE_URL = "https://open.bigmodel.cn/api/paas/v4";
ZHIPU_API_KEY = "xxx";
```

--------------------------------

### Environment Variable for Database URL

Source: https://docs.shipany.ai/en/features/database

Configure the DATABASE_URL in your project's environment files (.env.development, .env.production) to connect to your database.

```env
DATABASE_URL="postgresql://postgres.defqvdpquwyqqjlmurkg:******@aws-0-ap-southeast-1.pooler.supabase.com:6543/postgres"
```

--------------------------------

### Open Database Management Interface

Source: https://docs.shipany.ai/en/features/database

This command opens a user interface for viewing, editing, and deleting database tables.

```bash
pnpm db:studio
```

--------------------------------

### Build Project After Merge

Source: https://docs.shipany.ai/en/guide/faq

After resolving any merge conflicts and saving the changes, compile the project to ensure it builds successfully and runs without errors.

```bash
pnpm build
```

--------------------------------

### Configure Environment Variables

Source: https://docs.shipany.ai/en/features/payment/creem

Set your Creem API key and webhook signing secret in the .env.development file for local testing. Ensure these are test keys and secrets.

```dotenv
CREEM_API_KEY = "creem_test_xxx"
CREEM_WEBHOOK_SECRET = "whsec_xxx"
```

--------------------------------

### Configure OpenAI API Key

Source: https://docs.shipany.ai/en/ai-integrations/text-generation

Set your OpenAI API key in the .env file for authentication.

```dotenv
OPENAI_API_KEY = "sk-xxx";
```

--------------------------------

### Configure Google One-Tap Login Environment Variables

Source: https://docs.shipany.ai/en/features/oauth

Enable and configure Google One-Tap login by setting these environment variables. The Google ID should match the one used for standard Google login.

```env
NEXT_PUBLIC_AUTH_GOOGLE_ONE_TAP_ENABLED = "true"
NEXT_PUBLIC_AUTH_GOOGLE_ID = "4680xx-xxx.apps.googleusercontent.com"
```

--------------------------------

### Implement User Center Layout with Sidebar

Source: https://docs.shipany.ai/en/user-console/console

Use this layout component to structure the user center. It requires user authentication and a sidebar configuration. Redirects to sign-in if user info is not available.

```typescript
import ConsoleLayout from "@/components/console/layout";
import { ReactNode } from "react";
import { Sidebar } from "@/types/blocks/sidebar";
import { getTranslations } from "next-intl/server";
import { getUserInfo } from "@/services/user";
import { redirect } from "next/navigation";
 
export default async function ({ children }: { children: ReactNode }) {
  const userInfo = await getUserInfo();
  if (!userInfo || !userInfo.email) {
    redirect("/auth/signin");
  }
 
  const t = await getTranslations();
 
  const sidebar: Sidebar = {
    nav: {
      items: [
        {
          title: t("user.my_orders"),
          url: "/my-orders",
          icon: "RiOrderPlayLine",
          is_active: true,
        },
      ],
    },
  };
 
  return <ConsoleLayout sidebar={sidebar}>{children}</ConsoleLayout>;
}
```

--------------------------------

### Configure Cloud Storage Environment Variables

Source: https://docs.shipany.ai/en/features/storage

Set these environment variables in your .env file to configure your cloud storage connection.

```env
STORAGE_ENDPOINT = ""
STORAGE_REGION = ""
STORAGE_ACCESS_KEY = ""
STORAGE_SECRET_KEY = ""
STORAGE_BUCKET = ""
STORAGE_DOMAIN = ""
```

--------------------------------

### ShipAny Environment Configuration for Creem

Source: https://docs.shipany.ai/en/features/payment/creem

Configure these environment variables in your .env.development or .env.production / wrangler.toml files to enable Creem payments. Ensure to use the correct API keys and product IDs for your environment.

```env
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"

NEXT_PUBLIC_PAY_SUCCESS_URL = "/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "/pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "/pricing"

PAY_PROVIDER = "creem"

CREEM_ENV = "test"
CREEM_API_KEY = "creem_test_xxx"
CREEM_WEBHOOK_SECRET = "whsec_xxx"
CREEM_PRODUCTS = '{"starter": "prod_xxx", "standard": "prod_xxx", "premium": "prod_xxx"}'
```

--------------------------------

### Generate Image with Replicate

Source: https://docs.shipany.ai/en/ai-integrations/image-generation

Utilize the `experimental_generateImage` function with the Replicate provider. Select a model from the Replicate Model Hub and configure provider options as needed.

```typescript
import { experimental_generateImage as generateImage } from "ai";
import { replicate } from "@ai-sdk/replicate";
 
const prompt = "a beautiful girl running with 2 cats";
const model = "black-forest-labs/flux-1.1-pro";
 
const imageModel = replicate.image(model);
const providerOptions = {
  replicate: {
    output_quality: 90,
  },
};

const { images, warnings } = await generateImage({
  model: imageModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});
```

--------------------------------

### Set Replicate Environment Variables

Source: https://docs.shipany.ai/en/ai-integrations/image-generation

Configure your environment with your Replicate API token for image generation.

```env
REPLICATE_API_TOKEN = "r8_xxx"
```

--------------------------------

### Generate Terms of Service Prompt

Source: https://docs.shipany.ai/en/tutorials/edit-agreement

Use this prompt in Cursor to generate new terms of service content. Ensure to replace placeholders with your specific brand information.

```plaintext
update terms-of-service according to landing page content @en.json
with brand name "ShipAny", domain "shipany.ai", contact email is "support@shipany.ai"
```

--------------------------------

### Create a New Page Component

Source: https://docs.shipany.ai/en/tutorials/new-page

Define a React component for your new page. This component will be rendered at the specified URL. Ensure it's placed within the `app/[locale]/(default)` directory.

```tsx
export default function NewPage() {
  return (
    <div className="container py-36 flex items-center justify-center">
      New Page
    </div>
  );
}
```

--------------------------------

### Configure Robots.txt

Source: https://docs.shipany.ai/en/features/seo

Modify the robots.txt file to control search engine crawling. Disallow specific paths as needed.

```text
User-agent: *
Disallow: /*?*q=
Disallow: /privacy-policy
Disallow: /terms-of-service
```

--------------------------------

### Generate Text with Zhipu AI

Source: https://docs.shipany.ai/en/ai-integrations/text-generation

Use `createOpenAICompatible` to integrate Zhipu AI. Ensure API keys and base URL are configured.

```typescript
import { generateText } from "ai";
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
 
const zhipu = createOpenAICompatible({
  name: "zhipu",
  apiKey: process.env.ZHIPU_API_KEY,
  baseURL: process.env.ZHIPU_BASE_URL,
});
 
const prompt = "who are you?";
const model = "glm-4-flash";
 
const textModel = zhipu(model);
 
const { text, warnings } = await generateText({
  model: textModel,
  prompt: prompt,
});
 
if (warnings && warnings.length > 0) {
  throw new Error("gen text failed");
}
 
console.log("gen text ok:", text);
```

--------------------------------

### Configure OpenRouter API Key

Source: https://docs.shipany.ai/en/ai-integrations/text-generation

Set your OpenRouter API key in the .env file for authentication.

```dotenv
OPENROUTER_API_KEY = "sk-or-v1-xxx";
```

--------------------------------

### Generate Image with OpenAI's DALL-E 3

Source: https://docs.shipany.ai/en/ai-integrations/image-generation

Use the `experimental_generateImage` function with the OpenAI provider to create images using the dall-e-3 model. Ensure your OpenAI account has funds and an API key.

```typescript
import { experimental_generateImage as generateImage } from "ai";
import { openai } from "@ai-sdk/openai";
 
const prompt = "a beautiful girl running with 2 cats";
const model = "dall-e-3";
 
const imageModel = openai.image(model);
const providerOptions = {
  openai: {
    quality: "hd",
    style: "natural",
  },
};

const { images, warnings } = await generateImage({
  model: imageModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});
```

--------------------------------

### Configure English Pricing Table Content

Source: https://docs.shipany.ai/en/features/payment/creem

This JSON file defines the content for the English pricing table. Modify this file to change pricing details, features, and button configurations.

```json
{
  "pricing": {
    "name": "pricing",
    "label": "Pricing",
    "title": "Pricing",
    "description": "Get all features of ShipAny, Ship your AI SaaS startups fast.",
    "groups": [],
    "items": [
      {
        "title": "Starter",
        "description": "Get started with your first SaaS startup.",
        "features_title": "Includes",
        "features": [
          "100 credits, valid for 1 month",
          "NextJS boilerplate",
          "SEO-friendly structure",
          "Payment with Stripe",
          "Data storage with Supabase",
          "Google Oauth & One-Tap Login",
          "i18n support"
        ],
        "interval": "one-time",
        "amount": 9900,
        "cn_amount": 69900,
        "currency": "USD",
        "price": "$99",
        "original_price": "$199",
        "unit": "USD",
        "is_featured": false,
        "tip": "Pay once. Build unlimited projects!",
        "button": {
          "title": "Get ShipAny",
          "url": "/#pricing",
          "icon": "RiFlashlightFill"
        },
        "product_id": "starter",
        "product_name": "ShipAny Boilerplate Starter",
        "credits": 100,
        "valid_months": 1
      },
      {
        "title": "Standard",
        "description": "Ship Fast with your SaaS Startups.",
        "label": "Popular",
        "features_title": "Everything in Starter, plus",
        "features": [
          "200 credits, valid for 3 month",
          "Deploy with Vercel or Cloudflare",
          "Generation of Privacy & Terms",
          "Google Analytics Integration",
          "Google Search Console Integration",
          "Discord community",
          "Technical support for your first ship",
          "Lifetime updates"
        ],
        "interval": "one-time",
        "amount": 19900,
        "cn_amount": 139900,
        "currency": "USD",
        "price": "$199",
        "original_price": "$299",
        "unit": "USD",
        "is_featured": true,
        "tip": "Pay once. Build unlimited projects!",
        "button": {
          "title": "Get ShipAny",
          "url": "/#pricing",
          "icon": "RiFlashlightFill"
        },
        "product_id": "standard",
        "product_name": "ShipAny Boilerplate Standard",
        "credits": 200,
        "valid_months": 3
      },
      {
        "title": "Premium",
        "description": "Ship Any AI SaaS Startups.",
        "features_title": "Everything in Standard, plus",
        "features": [
          "300 credits, valid for 1 year",
          "Business Functions with AI",
          "User Center",
          "Credits System",
          "API Sales for your SaaS",
          "Admin System",
          "Priority Technical Support"
        ],
        "interval": "one-time",
        "amount": 29900,
        "cn_amount": 199900,
        "currency": "USD",
        "price": "$299",
        "original_price": "$399",
        "unit": "USD",
        "is_featured": false,
        "tip": "Pay once. Build unlimited projects!",
        "button": {
          "title": "Get ShipAny",
          "url": "/#pricing",
          "icon": "RiFlashlightFill"
        },
        "product_id": "premium",
        "product_name": "ShipAny Boilerplate Premium",
        "credits": 300,
        "valid_months": 12
      }
    ]
  }
}
```

--------------------------------

### Configure GitHub Login Environment Variables

Source: https://docs.shipany.ai/en/features/oauth

Set these environment variables to enable and configure GitHub Login. You will need to create a GitHub OAuth app and obtain its Client ID and Client Secret.

```env
AUTH_GITHUB_ID = "xxx"
AUTH_GITHUB_SECRET = "xxx"
NEXT_PUBLIC_AUTH_GITHUB_ENABLED = "true"
```

--------------------------------

### Set OpenAI Environment Variables

Source: https://docs.shipany.ai/en/ai-integrations/image-generation

Configure your environment with OpenAI API credentials for image generation.

```env
OPENAI_BASE_URL = "https://api.openai.com/v1"
OPENAI_API_KEY = "sk-xxx"
```

--------------------------------

### Create Local Branch for Backup

Source: https://docs.shipany.ai/en/guide/faq

Before syncing upstream code, create a new local branch to back up your current main branch. This ensures you have a restore point.

```bash
git checkout -b backup
```

--------------------------------

### Implement Testimonial Component in Page

Source: https://docs.shipany.ai/en/components/testimonial

Shows how to import and use the custom Testimonial component within a page.tsx file, including defining the testimonial data structure.

```typescript
import Testimonial from "@/components/blocks/testimonial";
import { Testimonial as TestimonialType } from "@/types/blocks/testimonial";

export default function Page() {
  // custom Testimonial data
  const testimonial: TestimonialType = {
    "title": "What Users Say About ShipAny",
    "description": "Hear from developers and founders who launched their AI startups with ShipAny.",
    "items": [
      {
        "avatar": {
          "src": "/imgs/user/1.png"
        },
        "name": "David Chen",
        "title": "Founder of AIWallpaper.shop",
        "comment": "ShipAny saved us months of development time. We launched our AI wallpaper business in just 2 days and got our first paying customer within a week!",
      },
      // ...other testimonials
    ],
  };

  return <>
      <Testimonial testimonial={testimonial} />
      // ...other components
    </>
  );
}
```

--------------------------------

### Generate Text with OpenRouter

Source: https://docs.shipany.ai/en/ai-integrations/text-generation

Use `createOpenRouter` to integrate with models available on OpenRouter. Ensure your API key is configured.

```typescript
import { generateText } from "ai";
import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
const openrouter = createOpenRouter({
  apiKey: process.env.OPENROUTER_API_KEY,
});
 
const prompt = "who are you?";
const model = "deepseek/deepseek-r1";
 
const textModel = openrouter(model);
 
const { text, warnings } = await generateText({
  model: textModel,
  prompt: prompt,
});
 
if (warnings && warnings.length > 0) {
  throw new Error("gen text failed");
}
 
console.log("gen text ok:", text);
```

--------------------------------

### Importing a New Component in Next.js

Source: https://docs.shipany.ai/en/tutorials/new-components

Import the newly created component into your page file to render it. Ensure the import path is correct.

```tsx
import { LoginForm } from "@/components/new-component";
 
export const runtime = "edge";
 
export default function NewPage() {
  return (
    <div className="container py-36 flex items-center justify-center">
      <LoginForm />
    </div>
  );
}
```

--------------------------------

### Configure OpenPanel Client ID

Source: https://docs.shipany.ai/en/features/analytics

Add your OpenPanel client ID to the .env.production file to enable OpenPanel analytics.

```env
NEXT_PUBLIC_OPENPANEL_CLIENT_ID = "xxx-xxx-xxx-xxx"
```

--------------------------------

### Configure Stripe Checkout to Allow Promotion Codes

Source: https://docs.shipany.ai/en/features/payment/stripe

Set `allow_promotion_codes` to true to enable users to enter custom discount codes during Stripe checkout.

```typescript
options.allow_promotion_codes = true;
```

--------------------------------

### Implement Custom FAQ Component

Source: https://docs.shipany.ai/en/components/faq

Use this snippet to integrate the custom FAQ component into your page. Define your FAQ data according to the FAQType structure.

```typescript
import FAQ from "@/components/blocks/faq";
import { FAQ as FAQType } from "@/types/blocks/faq";
 
export default function Page() {
  // custom FAQ data
  const faq: FAQType = {
    "title": "FAQ",
    "description": "Frequently Asked Questions About ShipAny",
    "items": [
      {
        "question": "What exactly is ShipAny and how does it work?",
        "answer": "ShipAny is a comprehensive NextJS boilerplate designed specifically for building AI SaaS startups. It provides ready-to-use templates, infrastructure setup, and deployment tools that help you launch your AI business in hours instead of days."
      },
      // ...other questions
    ],
  };
 
  return <>
      <FAQ faq={faq} />
      // ...other components
    </>
  );
}
```

--------------------------------

### Configure Stripe Checkout with Specific Discount Codes

Source: https://docs.shipany.ai/en/features/payment/stripe

Set `allow_promotion_codes` to false and provide a list of specific discount codes to be applied during Stripe checkout.

```typescript
options.allow_promotion_codes = false;
options.discounts = [
  {
    coupon: "HAPPY-NEW-YEAR",
  },
];
```

--------------------------------

### Resend Environment Variables Configuration

Source: https://docs.shipany.ai/en/features/email/resend

Configure these environment variables in your .env.development or .env.production files, or in wrangler.toml for production. Ensure the API key is created in Resend and the sender email domain is verified.

```env
RESEND_API_KEY = "re_xxx"
RESEND_SENDER_EMAIL = "contact@mail.shipany.ai"
```

--------------------------------

### ShipAny Stripe Environment Configuration

Source: https://docs.shipany.ai/en/features/payment/stripe

Configure Stripe payment settings in your environment files. Ensure these variables are set correctly for development and production environments.

```env
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"

NEXT_PUBLIC_PAY_SUCCESS_URL = "/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "/pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "/pricing"

PAY_PROVIDER = "stripe"

STRIPE_PUBLIC_KEY = "pk_test_xxx"
STRIPE_PRIVATE_KEY = "sk_test_xxx"
STRIPE_WEBHOOK_SECRET = "whsec_cexxx"
```

--------------------------------

### Save Generated Videos to Local Files

Source: https://docs.shipany.ai/en/ai-integrations/video-generation

Process the `base64` encoded video strings returned by `generateVideo`. This snippet demonstrates how to decode the base64 data, create a file buffer, and save the video to a specified local path.

```typescript
const { videos, warnings } = await generateVideo({
  model: videoModel,
  prompt: prompt,
  n: 1,
  providerOptions,
});

if (warnings.length > 0) {
  console.log("gen videos warnings:", provider, warnings);
  return respErr("gen videos failed");
}

const batch = getUuid();

const processedImages = await Promise.all(
  videos.map(async (video, index) => {
    const fileName = `${provider}_video_${batch}_${index}.mp4`;
    const filePath = path.join(process.cwd(), ".tmp", fileName);

    const buffer = Buffer.from(video.base64, "base64");
    await writeFile(filePath, buffer);

    return {
      provider,
      fileName,
      filePath,
    };
  })
);
```

--------------------------------

### Create Credits Table SQL

Source: https://docs.shipany.ai/en/user-console/credits

SQL statement to create the 'credits' table in the database. Ensure your database is configured before running this.

```sql
CREATE TABLE credits (
    id SERIAL PRIMARY KEY,
    trans_no VARCHAR(255) UNIQUE NOT NULL,
    created_at timestamptz,
    user_uuid VARCHAR(255) NOT NULL,
    trans_type VARCHAR(50) NOT NULL,
    credits INT NOT NULL,
    order_no VARCHAR(255),
    expired_at timestamptz
);
```

--------------------------------

### Configure Stripe Checkout with No Discounts

Source: https://docs.shipany.ai/en/features/payment/stripe

Set `allow_promotion_codes` to false and provide an empty `discounts` array to ensure no discounts are applied during Stripe checkout.

```typescript
options.allow_promotion_codes = false;
options.discounts = [];
```
Tokens:
Raw