Agentic-Astra Catalog

A Next.js frontend application for viewing and editing tools stored in an Astra DB catalog collection.

Features

• Dark/Light Mode: Toggle between dark and light themes
• Tool List: Browse all tools from the catalog collection
• Tool Editor: Edit tool details including parameters, configuration, and metadata
• Server-Side API: All database interactions happen on the server for security
• Real-time Updates: Connect directly to Astra DB using @datastax/astra-db-ts

Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• Astra DB credentials (token, endpoint, database name)

Setup

1. Install dependencies:

npm install

2. Configure environment variables:

Create a .env.local file in the frontend/ directory:

ASTRA_DB_APPLICATION_TOKEN=your_astra_db_token
ASTRA_DB_API_ENDPOINT=https://your-database-id-your-region.apps.astra.datastax.com
ASTRA_DB_DB_NAME=your_database_name
ASTRA_DB_CATALOG_COLLECTION=tool_catalog

Note: Next.js automatically loads environment variables from .env.local for local development. These variables are only available on the server side, keeping your credentials secure.

Development

Run the development server:

npm run dev

The app will be available at http://localhost:3000.

Building

Build for production:

npm run build

Start the production server:

npm start

Usage

Local Development

1. Set up environment variables (see Setup above)
2. Run npm run dev
3. Open the app in your browser at http://localhost:3000

Environment Variables

| Variable | Required | Description | Default | |----------|----------|-------------|---------| | ASTRA_DB_APPLICATION_TOKEN | Yes | Astra DB application token | - | | ASTRA_DB_API_ENDPOINT | Yes | Astra DB API endpoint URL | - | | ASTRA_DB_DB_NAME | Yes | Name of the Astra DB database | - | | ASTRA_DB_CATALOG_COLLECTION | No | Name of the catalog collection | tool_catalog |

Project Structure

frontend/
├── app/
│   ├── api/
│   │   └── tools/
│   │       └── route.ts        # API route for tools (GET, POST)
│   ├── globals.css              # Global styles with Tailwind
│   ├── layout.tsx               # Root layout
│   └── page.tsx                 # Main page component
├── components/
│   ├── ThemeToggle.tsx          # Dark/light mode toggle
│   ├── ToolList.tsx             # Tool list sidebar
│   └── ToolEditor.tsx           # Tool editing form
├── lib/
│   └── astraClient.ts           # Astra DB client (server-side only)
├── next.config.js
├── package.json
├── tailwind.config.js
└── tsconfig.json

Technologies

• Next.js 14: React framework with App Router
• React 18: UI framework
• TypeScript: Type safety
• Tailwind CSS: Styling with dark mode support
• @datastax/astra-db-ts: Official Astra DB TypeScript client (server-side only)

Architecture

This application uses Next.js API routes to handle all database interactions on the server:

• Client-side: React components make fetch requests to /api/tools
• Server-side: API routes in app/api/tools/route.ts handle database operations
• Security: Database credentials are never exposed to the client

API Endpoints

GET /api/tools

Fetches all tools from the catalog collection.

Response:

{
  "success": true,
  "tools": [...]
}

POST /api/tools

Creates or updates a tool in the catalog collection.

Request Body:

{
  "_id": "...",
  "name": "...",
  "description": "...",
  ...
}

Response:

{
  "success": true
}

License

Same as the parent project.