ai-kickstart-angular

This project was generated with Analog, the fullstack meta-framework for Angular.

An AI chat application powered by OpenAI and the Vercel AI SDK.

Setup

1. Run npm install to install the application dependencies.

2. Create a .env file in the root directory and add your OpenAI API key:

OPENAI_API_KEY=your_openai_api_key_here

Get your API key from OpenAI Platform.

Development

Run npm start for a dev server. Navigate to http://localhost:5173/. The application automatically reloads if you change any of the source files.

Visit http://localhost:5173/chat to test the AI chat interface.

Features

• AI Chat Interface: Real-time streaming chat with OpenAI's GPT-4o-mini
• Zard/UI Components: Beautiful, accessible UI components built with Tailwind CSS
• Dark Mode: Seamless theme switching with persistent preferences
• File-based Routing: Powered by Analog's file-based routing system
• API Routes: Server-side API endpoints using Nitro
• Tailwind CSS v4: Modern styling with CSS variables and custom variants
• TypeScript: Full type safety throughout the application

Project Structure

src/
├── app/
│   └── pages/
│       ├── index.page.ts       # Home page
│       └── chat.page.ts        # AI chat interface
└── server/
    └── routes/
        └── api/
            └── chat.post.ts    # Chat API endpoint

Build

Run npm run build to build the client/server project. The client build artifacts are located in the dist/analog/public directory. The server for the API build artifacts are located in the dist/analog/server directory.

Community

• Visit and Star the GitHub Repo
• Join the Discord
• Follow us on Twitter
• Become a Sponsor