# 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:
```bash
npm install
```
2. Configure environment variables:
Create a `.env.local` file in the `frontend/` directory:
```env
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:
```bash
npm run dev
```
The app will be available at `http://localhost:3000`.
## Building
Build for production:
```bash
npm run build
```
Start the production server:
```bash
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:**
```json
{
"success": true,
"tools": [...]
}
```
### POST `/api/tools`
Creates or updates a tool in the catalog collection.
**Request Body:**
```json
{
"_id": "...",
"name": "...",
"description": "...",
...
}
```
**Response:**
```json
{
"success": true
}
```
## License
Same as the parent project.