Merge pull request #310 from DefangLabs/linda-nextjs-claude

Next.js and Claude (Anthropic AI) Sample

Author: raphaeltm

.github/workflows/deploy-changed-samples.yml

@@ -65,6 +65,7 @@ jobs:
         if: env.should_continue == 'true'
         env:
           FIXED_VERIFIER_PK: ${{ secrets.FIXED_VERIFIER_PK }}
+          TEST_ANTHROPIC_API_KEY: ${{ secrets.TEST_ANTHROPIC_API_KEY }}
           TEST_AWS_ACCESS_KEY: ${{ secrets.TEST_AWS_ACCESS_KEY }}
           TEST_AWS_SECRET_KEY: ${{ secrets.TEST_AWS_SECRET_KEY }}
           TEST_BOARD_PASSWORD: ${{ secrets.TEST_BOARD_PASSWORD }}

samples/nextjs-claude/.devcontainer/Dockerfile

@@ -0,0 +1 @@
+FROM mcr.microsoft.com/devcontainers/typescript-node:22-bookworm

samples/nextjs-claude/.devcontainer/devcontainer.json

@@ -0,0 +1,11 @@
+{
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },
+  "features": {
+    "ghcr.io/defanglabs/devcontainer-feature/defang-cli:1.0.4": {},
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
+    "ghcr.io/devcontainers/features/aws-cli:1": {}
+  }
+}

samples/nextjs-claude/.github/workflows/deploy.yaml

@@ -0,0 +1,25 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    environment: playground
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+    - name: Checkout Repo
+      uses: actions/checkout@v4
+
+    - name: Deploy
+      uses: DefangLabs/[email protected]
+      with:
+        config-env-vars: ANTHROPIC_API_KEY
+      env:
+        ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}

samples/nextjs-claude/README.md

@@ -0,0 +1,56 @@
+# Next.js & Claude
+
+[![1-click-deploy](https://defang.io/deploy-with-defang.png)](https://portal.defang.dev/redirect?url=https%3A%2F%2Fgithub.com%2Fnew%3Ftemplate_name%3Dsample-nextjs-claude-template%26template_owner%3DDefangSamples)
+
+This sample shows a Next.js and Claude application deployed using Defang. It uses Anthropic API for its chatbot functionality.
+
+## Prerequisites
+
+1. Download [Defang CLI](https://github.com/DefangLabs/defang)
+2. (Optional) If you are using [Defang BYOC](https://docs.defang.io/docs/concepts/defang-byoc) authenticate with your cloud provider account
+3. (Optional for local development) [Docker CLI](https://docs.docker.com/engine/install/)
+
+## Development
+
+To run the application locally, you can use the following command:
+
+```bash
+docker compose -f compose.dev.yaml up --build
+```
+
+## Configuration
+For this sample, you will need to provide the following [configuration](https://docs.defang.io/docs/concepts/configuration): 
+
+> Note that if you are using the 1-click deploy option, you can set these values as secrets in your GitHub repository and the action will automatically deploy them for you.
+
+### `ANTHROPIC_API_KEY` 
+An API key for Anthropic AI.
+```bash
+defang config set ANTHROPIC_API_KEY
+```
+
+## Deployment
+
+> [!NOTE]
+> Download [Defang CLI](https://github.com/DefangLabs/defang)
+
+### Defang Playground
+
+Deploy your application to the Defang Playground by opening up your terminal and typing:
+```bash
+defang compose up
+```
+
+### BYOC 
+
+If you want to deploy to your own cloud account, you can [use Defang BYOC](https://docs.defang.io/docs/tutorials/deploy-to-your-cloud).
+
+---
+
+Title: Next.js & Claude
+
+Short Description: A fun chatbot created with Next.js and Claude. 
+
+Tags: Next.js, TypeScript, React, JavaScript, Chatbot, Claude, AI, Anthropic
+
+Languages: TypeScript

samples/nextjs-claude/compose.dev.yaml

@@ -0,0 +1,10 @@
+services:
+  nextjs-claude:
+    extends:
+      file: compose.yaml
+      service: nextjs-claude
+    volumes:
+      - type: bind
+        source: ./ui
+        target: /app
+    command: ["npm", "run", "dev"]

samples/nextjs-claude/compose.yaml

@@ -0,0 +1,19 @@
+services:
+  nextjs-claude:
+    # uncomment to add your own domain
+    # domainname: example.com
+    build:
+      context: ./ui
+      dockerfile: Dockerfile
+    ports:
+      - target: 3000
+        published: 3000
+        mode: ingress
+    deploy:
+      resources:
+        reservations:
+          memory: 256M
+    environment: 
+      - ANTHROPIC_API_KEY
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/"]

samples/nextjs-claude/ui/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.next

samples/nextjs-claude/ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

samples/nextjs-claude/ui/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts