ALLWEONE® AI Presentation Generator Documentation

To create a presentation from scratch using AI:

1. Sign in and navigate to the presentation dashboard.
2. Enter your topic and select a text model (OpenAI, Ollama, or LM Studio).
3. Configure slide count (5-10 recommended), language, and optional web search.
4. Click "Generate Outline" and review/edit the result.
5. Select a theme, image source (ai/stock), and style (Professional/Casual).
6. Click "Generate Presentation" to watch the real-time build.
7. Use the editor to refine content or export to .pptx.

Follow these steps to set up the project locally for development:

1. Clone the repository:

   git clone git@github.com:allweonedev/presentation-ai.git
   cd presentation-ai

2. Install dependencies using pnpm:

   pnpm install

3. Configure environment variables: Create a .env file in the root directory. You can copy .env.example as a template. Required variables include DATABASE_URL, NEXTAUTH_SECRET, NEXTAUTH_URL, GOOGLE_CLIENT_ID, and GOOGLE_CLIENT_SECRET. Optional keys for AI and media services include OPENAI_API_KEY, TOGETHER_AI_API_KEY, FAL_API_KEY, UNSPLASH_ACCESS_KEY, and TAVILY_API_KEY.
4. Initialize the database:

   pnpm db:push

5. Start the development server:

   pnpm dev

   The application will be available at http://localhost:3000.

To contribute to the ALLWEONE® AI Presentation Generator, follow the standard fork-and-pull-request workflow:

1. Fork the repository.
2. Create a new feature branch.
3. Commit your changes.
4. Push your branch to your fork.
5. Open a Pull Request.

Ensure you follow existing code styles and conventions, and refer to the CONTRIBUTING.md file for detailed guidelines.

git checkout -b feature/amazing-feature
git commit -m 'Add some amazing feature'
git push origin feature/amazing-feature

You can use local LLMs instead of cloud providers like OpenAI.

LM Studio

1. Install LM Studio.
2. In the LM Studio app, turn the Server ON and enable CORS.
3. Download your desired model.
4. Load the model in LM Studio before selecting it in the app.

Ollama

1. Install Ollama.
2. Download a model (e.g., ollama pull llama3.1).
3. Models will appear automatically in the app's text model selector when the Ollama daemon is running.

Note: For LM Studio, ensuring CORS is enabled is critical for the browser to connect to the local server.

Create a .env file in the root directory. The following variables are used for database connection, authentication, AI providers, and file uploads:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/presentation_ai"

# Authentication
NEXTAUTH_SECRET=""
NEXTAUTH_URL="http://localhost:3000"

# Google OAuth Provider
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

# AI Providers
OPENAI_API_KEY=""
TOGETHER_AI_API_KEY=""
FAL_API_KEY=""

# File Upload Service
UPLOADTHING_TOKEN=""

# Optional search and media providers
UNSPLASH_ACCESS_KEY=""
TAVILY_API_KEY=""

The prisma.config.ts file defines the Prisma schema location, database connection URL, and seeding command. It uses defineConfig from prisma/config to structure these settings. Ensure that the DATABASE_URL environment variable is set, as it is required for the datasource configuration.

import "dotenv/config";

import { defineConfig, env } from "prisma/config";

export default defineConfig({
  schema: "./prisma/schema.prisma",
  migrations: {
    seed: "node prisma/seed.js",
  },
  datasource: {
    url: env("DATABASE_URL"),
  },
});

The command used to seed the database is defined within the migrations.seed property in prisma.config.ts. By default, this project uses node prisma/seed.js.

migrations: {
  seed: "node prisma/seed.js",
}

The database connection URL is configured via the datasource.url property in prisma.config.ts. It retrieves the value from the DATABASE_URL environment variable using the env() helper function.

datasource: {
  url: env("DATABASE_URL"),
}

The project provides several scripts for managing the development lifecycle:

• pnpm dev: Start the Next.js dev server
• pnpm build: Build the application
• pnpm start: Start the production server
• pnpm db:push: Push the Prisma schema to the database
• pnpm db:studio: Open Prisma Studio
• pnpm type: Run TypeScript type-checking
• pnpm check: Run Biome checks
• pnpm lint: Run Biome linting

pnpm dev       # Start the Next.js dev server
pnpm build     # Build the application
pnpm start     # Start the production server
pnpm db:push   # Push the Prisma schema to the database
pnpm db:studio # Open Prisma Studio
pnpm type      # Run TypeScript type-checking
pnpm check     # Run Biome checks
pnpm lint      # Run Biome linting

Use togglePresentationPublicStatus(id: string, isPublic: boolean) to change whether a presentation is publicly accessible.

Requirements:

• The user must be authenticated.
• The user must be the owner of the presentation (the userId must match the session user ID).

Returns:

• A success object with a message indicating if the presentation is now public or private.
• An error object if the user is unauthorized, does not own the presentation, or if the update fails.

The InfographicDataEditor component accepts the following props:

Behavioral notes:

• If data.sourceField is "root", it renders an InfographicTreeEditor in hierarchy mode.
• If data.sourceField is "compares", it renders an InfographicTreeEditor in compare mode.
• If data.sourceField is "nodes", it renders an InfographicItemList and enables the RelationEditor section.