Nuxt + Netlify AI Starter

This is a Nuxt.js v3 project bootstrapped with create nuxt and set up to be instantly deployed to Netlify! You can take a look at the live version of the site here.

This project is a simple chat app that gives you the option to deploy either Anthropics Claude Sonnet or OpenAI's GPT-4o Mini. It is a very minimal site that includes 2 server functions that call the models depending on what environment variable you set.

With Netlify, you'll have access to features like Branch Deploys and Deploy Previews, so we encourage you to deploy this, modify it, learn and have fun!

(If you click this button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify)

⚠️ Warning ⚠️

This project will deploy a live site available all over the web. If you do not want your Model being hit directly from the public internet, we recommend locking your site on Netlify using Site Protection

Table of Contents:

• Getting Started
• Installation options
• App Images

Getting Started

Make sure to install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

First, run the development server, if you have the Netlify CLI installed, you can run:

netlify dev

If you don't have the Netlify CLI installed, you can run:

npm run dev
# or
yarn dev

Open http://localhost:3001 with your browser to see the result.

You can start editing the page by modifying pages/index.vue. The page auto-updates as you edit the file.

Installation options

Option one: One-click deploy

Option two: Manual clone

1. Clone this repo: git clone https://github.com/SeanMcTernan/nuxt_chat_app.git
2. Navigate to the directory and run npm install
3. Run npm run dev or ntl dev
4. Make your changes

Environment Variables

Currently this Nuxt site supports Anthropics Claude's Sonnet and Open AI's GPT 4o Mini please enter them exactly as you see them below to avoid errors:

MODEL_PROVIDER:

openai

or

anthropic

MODEL_API_KEY:

sk-proj-******** your key ***

⚠️ Warning ⚠️

This project will deploy a live site available all over the web. If you do not want your Model being hit directly from the public internet, we recommend locking your site on Netlify using Site Protection

App Images

The application using OpenAI's GPT-4o Mini: A screenshot showing the chat interface with a response from the OpenAI model.

The application using Anthropic's Claude 3.7 Sonnet: A screenshot showing the chat interface with a response from the Anthropic model.