AI Tool

A deployable AI interface built for prompt-based products.

Overview

The AI Tool archetype is a deployable Next.js application shell for prompt-based products. Running the deploy command copies the full file tree into your project — no black-box abstraction, no hidden config. Every file is yours to edit from day one.

What's included:

  • A main AI page with a mock response, mode selector, and chat input
  • A history page with a list of previous prompts
  • A settings page with model selector and temperature input
  • SidebarNav, Topbar, and DashboardLayout pre-wired
  • Two local components: ChatInput and ChatMessage

Deploy

npx venator init ai-tool

Then:

cd my-ai-tool
npm install
npm run dev

What's included

my-app/
app/
  layout.tsx           # Root layout with ToastProvider
  page.tsx             # Redirects to /ai
  ai/
    layout.tsx         # DashboardLayout with Sidebar and Header
    page.tsx           # Main AI interface with prompt input and mock response
    history/
      page.tsx         # Previous prompts list
    settings/
      page.tsx         # Model and temperature settings
components/
  chat-input.tsx       # Textarea + submit button
  chat-message.tsx     # Card-based response display
  sidebar.tsx          # SidebarNav with AI sections
  header.tsx           # Topbar with dark mode toggle
tailwind.config.js     # Pre-configured with venatorPreset
package.json           # Required dependencies and scripts

Venator packages used

  • @venator-ui/ui — Button, Card, Input, Label, Select, Separator
  • @venator-ui/patterns — DashboardLayout, SidebarNav, Topbar, PageHeader
  • @venator-ui/tokens — included via venatorPreset in tailwind.config.js

Use cases

  • AI assistants and chat-based tools
  • Internal copilots and analysis interfaces
  • Prompt-based workflows with configurable models

Customization

All files are copied into your project and are fully yours. Common entry points:

  • Connect a real AI API in app/ai/page.tsx by replacing the mock response with a fetch call
  • Add conversation state and API integration in app/ai/page.tsx to turn the starter into a full chat workflow
  • Update components/sidebar.tsx sections with your own routes

Next steps

Add an individual pattern:

npx venator add page-header

Install UI components directly:

npm install @venator-ui/ui