Gibson MCP Frontend - A modern web interface for the Gibson MCP system with architecture diagrams and documentation

GIST.md

Gibson MCP Frontend

A modern web interface for the Gibson MCP (Mission Control Platform) system, built with Next.js 14 and Prisma. This application provides a comprehensive dashboard for managing system features, knowledge base entries, and data structures.

🌟 Features

Core Functionality

• Interactive Dashboard: Real-time data visualization and system monitoring
• Feature Management: Track and manage system capabilities
• Knowledge Base: Store and retrieve system facts and documentation
• Data Structure Management: Define and maintain system data schemas

Technical Features

• Modern Stack: Next.js 14, React 18, TypeScript
• Database: Prisma ORM with SQLite
• Styling: Tailwind CSS for responsive design
• API Routes: RESTful endpoints for all operations
• Type Safety: Full TypeScript support

📊 Architecture Diagrams

System Overview

graph TB
    subgraph Frontend
        UI[Next.js UI]
        API[API Routes]
        State[State Management]
    end

    subgraph Backend
        Prisma[Prisma ORM]
        DB[(SQLite DB)]
    end

    UI --> API
    API --> Prisma
    Prisma --> DB
    State --> API

Loading

Data Flow

sequenceDiagram
    participant User
    participant UI
    participant API
    participant Prisma
    participant DB

    User->>UI: Interact
    UI->>API: Request
    API->>Prisma: Query
    Prisma->>DB: Execute
    DB-->>Prisma: Result
    Prisma-->>API: Data
    API-->>UI: Response
    UI-->>User: Update

Loading

Database Schema

erDiagram
    Feature {
        int id PK
        string name
        string description
        string category
        datetime createdAt
        datetime updatedAt
    }
    Fact {
        int id PK
        string content
        string source
        string category
        datetime createdAt
        datetime updatedAt
    }
    Table {
        int id PK
        string name
        string description
        string schema
        string category
        datetime createdAt
        datetime updatedAt
    }

Loading

API Routes

graph LR
    subgraph API
        Items[/api/items]
        Search[/api/search]
        Stats[/api/stats]
    end

    subgraph Operations
        GET[GET]
        POST[POST]
        PUT[PUT]
        DELETE[DELETE]
    end

    Items --> GET
    Items --> POST
    Items --> PUT
    Items --> DELETE
    Search --> GET
    Stats --> GET

Loading

Component Structure

graph TB
    subgraph Pages
        Home[Home Page]
        Features[Features Page]
        Facts[Facts Page]
        Tables[Tables Page]
    end

    subgraph Components
        Layout[Layout]
        Card[Card]
        Modal[Modal]
        Search[Search]
        Stats[Stats]
    end

    Layout --> Home
    Layout --> Features
    Layout --> Facts
    Layout --> Tables
    Home --> Card
    Home --> Modal
    Home --> Search
    Home --> Stats

Loading

State Management

stateDiagram-v2
    [*] --> Loading
    Loading --> Loaded
    Loading --> Error
    Loaded --> Updating
    Updating --> Loaded
    Updating --> Error
    Error --> Loading
    Loaded --> [*]

Loading

Authentication Flow

sequenceDiagram
    participant User
    participant UI
    participant Auth
    participant API

    User->>UI: Login
    UI->>Auth: Request
    Auth->>API: Validate
    API-->>Auth: Token
    Auth-->>UI: Session
    UI-->>User: Authenticated

Loading

Deployment Pipeline

graph LR
    subgraph Development
        Local[Local Dev]
        Test[Testing]
    end

    subgraph Production
        Build[Build]
        Deploy[Deploy]
        Monitor[Monitor]
    end

    Local --> Test
    Test --> Build
    Build --> Deploy
    Deploy --> Monitor

Loading

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Python 3.8+ (for virtual environment)
• Git

Installation

1. Clone the repository:

git clone <repository-url>
cd gibson-frontend

2. Create a .env file:

# Environment variables
DATABASE_URL="file:./prisma/dev.db"
NODE_ENV="development"

# API Configuration
NEXT_PUBLIC_API_URL="http://localhost:3000/api"

# Feature flags
NEXT_PUBLIC_ENABLE_SEARCH=true
NEXT_PUBLIC_ENABLE_STATS=true

3. Run the setup script:

.\setup.ps1

📦 Project Structure

gibson-frontend/
├── app/
│   ├── api/
│   │   ├── items/
│   │   ├── search/
│   │   └── stats/
│   ├── components/
│   ├── lib/
│   └── page.tsx
├── prisma/
│   ├── schema.prisma
│   └── seed.ts
├── public/
├── .env
├── .env.example
├── package.json
├── setup.ps1
└── README.md

🔧 Development

Available Scripts

• npm run dev: Start development server
• npm run build: Build for production
• npm start: Start production server
• npm run lint: Run ESLint
• npm run db:push: Push schema changes
• npm run db:seed: Seed database

API Routes

1. Items API (/api/items)

   • GET: Fetch items by type
   • POST: Create new items
   • PUT: Update items
   • DELETE: Remove items

2. Search API (/api/search)

   • GET: Search across all items

3. Stats API (/api/stats)

   • GET: System statistics

📚 Database Schema

model Feature {
  id          Int      @id @default(autoincrement())
  name        String
  description String
  category    String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

model Fact {
  id          Int      @id @default(autoincrement())
  content     String
  source      String
  category    String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

model Table {
  id          Int      @id @default(autoincrement())
  name        String
  description String
  schema      String
  category    String
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

🔍 Troubleshooting

Common Issues

1. Prisma Client Not Found

   • Run npx prisma generate
   • Check DATABASE_URL in .env

2. Module Resolution Errors

   • Clear .next directory
   • Run npm install
   • Restart development server

3. Database Connection Issues

   • Verify database path
   • Check file permissions
   • Ensure Prisma schema is synced

📄 License

MIT License - See LICENSE file for details