Parable PM Assistant

A Next.js application for interacting with AI models through a chat interface. Built with TypeScript, supports multiple model providers (currently Anthropic), and stores configuration in local storage.

Features

• 🚀 Deployable on Vercel
• 💬 Chat interface for AI models
• 🔧 Model-agnostic architecture (extensible for multiple providers)
• 📦 Local storage for configuration (no database required)
• 🔐 Secure API key handling (tokens stored server-side)
• 🎨 Modern UI with Tailwind CSS

Setup

Prerequisites

• Node.js 18+
• npm or yarn
• API keys for the model providers you want to use

Installation

1. Clone the repository:

git clone <your-repo-url>
cd parable-pm-assistant

2. Install dependencies:

npm install

3. Create a .env.local file in the root directory:

# Anthropic API Key
ANTHROPIC_API_KEY=your_anthropic_api_key_here

# Other provider API keys (for future use)
OPENAI_API_KEY=your_openai_api_key_here

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

Deployment on Vercel

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket).

2. Import your project on Vercel:

   • Go to https://vercel.com/new
   • Import your Git repository
   • Vercel will automatically detect Next.js

3. Add environment variables in Vercel:

   • Go to your project settings
   • Navigate to "Environment Variables"
   • Add ANTHROPIC_API_KEY with your API key value
   • Add any other provider keys you plan to use

4. Deploy! Vercel will automatically build and deploy your application.

Configuration

The application uses local storage to persist user preferences:

• Provider: Choose between Anthropic, OpenAI (coming soon), or Google (coming soon)
• Model: Specify which model to use (e.g., claude-3-5-sonnet-20241022)
• Temperature: Control randomness (0-2)
• Max Tokens: Maximum response length

Configuration is saved automatically and persists across sessions.

Architecture

Project Structure

parable-pm-assistant/
├── pages/
│   ├── api/
│   │   └── chat.ts          # Backend API route for chat
│   ├── _app.tsx             # Next.js app wrapper
│   └── index.tsx            # Main chat interface
├── lib/
│   ├── providers.ts         # Model provider abstraction
│   ├── config.ts            # Local storage config management
│   └── chat.ts              # Frontend chat service
├── types/
│   └── index.ts             # TypeScript type definitions
└── styles/
    └── globals.css          # Global styles

Model Provider System

The application uses a provider-agnostic architecture:

• IModelProvider: Interface that all providers must implement
• ModelProviderFactory: Creates provider instances based on configuration
• Currently supports Anthropic (Claude), with OpenAI and Google planned

Security

• API keys are stored server-side only (in environment variables)
• Client never sees or handles API keys
• All API calls go through backend routes (/api/chat)

Development

Adding a New Model Provider

1. Create a new provider class implementing IModelProvider:

export class NewProvider implements IModelProvider {
  async chat(messages: ChatMessage[], config: ModelConfig): Promise<ChatResponse> {
    // Implementation here
  }
}

2. Add the provider to ModelProviderFactory.create()
3. Add the provider option to the frontend config UI
4. Add the environment variable for the API key

License

MIT