Specter Frontend - Agentic Legal AI system (based on Elysia)

October 12, 2025 · View on GitHub

front page

Specter is a specialized legal-focused AI assistant built on top of Elysia - a modern AI-powered platform. Specter extends Elysia's core capabilities with legal-specific features including document management, specialized agent creation, and enhanced knowledge organization designed for legal professionals.

⚖️ What Makes Specter Different

Specter builds upon Elysia's foundation with legal-domain enhancements:

📄 Document Upload & Management

  • Multi-format document support - Upload legal documents in various formats
  • Document parsing - Extract and process content from legal documents
  • Full Control over Document lifecycle management - Upload, retrieve, and delete documents (GDPR compliance)
  • Integration with collections - Organize legal documents by case, client, or topic

🤖 Specialized Agent Creation

  • Custom legal agents - Create AI agents specialized for specific legal tasks
  • Agent configuration - Tailor agents for contract review, case analysis, legal research, etc.
  • Multiple agent support - Deploy different agents for different legal domains
  • Agent management - Full lifecycle control (create, update, delete)

📊 Enhanced Knowledge Organization

  • Advanced collection metadata - Rich metadata for legal document categorization
  • Bulk operations - Efficient management of large document sets
  • Custom taxonomies - Organize documents by legal domains, jurisdictions, or case types

🏗️ Built With

Framework & Core Technologies:

  • Next.js 14 - React framework with App Router
  • React 18 - JavaScript library for building user interfaces
  • TypeScript - Type-safe JavaScript development
  • Tailwind CSS - Utility-first CSS framework

UI Libraries & Components:

  • Radix UI - Accessible, unstyled UI primitives
  • Shadcn - Beautiful & consistent component library
  • Framer Motion - Production-ready motion library
  • React Markdown - Markdown component for React
  • React Syntax Highlighter - Syntax highlighting component

3D Graphics & Visualization:

  • Three.js - 3D graphics library
  • React Three Fiber - React renderer for Three.js
  • React Three Drei - Useful helpers for React Three Fiber
  • React Three Postprocessing - Postprocessing effects

Data Visualization:

  • Recharts - Composable charting library
  • XYFlow React - Flow chart and node-based UI library

Development Tools:

  • ESLint - Code linting
  • Prettier - Code formatting
  • Cross-env - Cross-platform environment variables

📋 Requirements

  • Node.js (version 18 or higher)
  • npm (comes with Node.js)
  • Modern web browser with ES2017+ support

🚀 Getting Started

  1. Clone the repository

    git clone <repository-url>
cd specter-frontend

  2. Install dependencies

    npm install

  3. Start the development server

    npm run dev

  4. Open your browser Navigate to http://localhost:3000

📁 Project Structure

specter-frontend/
├── app/                          # Next.js app directory
│   ├── api/                      # API route handlers
│   │   ├── uploadDocument.ts     # Document upload endpoint
│   │   ├── deleteDocument.ts     # Document deletion endpoint
│   │   ├── getDocuments.ts       # Document retrieval endpoint
│   │   ├── getSupportedFormats.ts # Supported file formats endpoint
│   │   ├── getAgents.ts          # Agent retrieval endpoint
│   │   ├── updateAgent.ts        # Agent update endpoint
│   │   ├── deleteAgent.ts        # Agent deletion endpoint
│   │   ├── getCollectionMetadata.ts    # Collection metadata retrieval
│   │   ├── patchCollectionMetadata.ts  # Collection metadata updates
│   │   ├── deleteCollectionMetadata.ts # Single metadata deletion
│   │   └── deleteAllCollectionMetadata.ts # Bulk metadata deletion
│   ├── components/               # React components
│   │   ├── agents/               # Agent management components
│   │   ├── chat/                 # Chat-related components
│   │   │   ├── components/       # Shared chat components
│   │   │   ├── displays/         # Various display types
│   │   │   └── nodes/            # Flow node components
│   │   ├── configuration/        # Settings and config components
│   │   ├── contexts/             # React context providers
│   │   ├── debugging/            # Debug tools and utilities
│   │   ├── dialog/               # Modal and dialog components
│   │   ├── documents/            # Document management components
│   │   ├── evaluation/           # Evaluation and feedback components
│   │   ├── explorer/             # Data exploration components
│   │   ├── navigation/           # Navigation and sidebar components
│   │   └── threejs/              # 3D graphics components
│   ├── pages/                    # Main page components
│   ├── types/                    # TypeScript type definitions
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout component
│   └── page.tsx                  # Homepage component
├── components/                   # Shared UI components
│   └── ui/                       # Reusable UI primitives
├── hooks/                        # Custom React hooks
├── lib/                          # Utility functions
│   └── documentParser.ts         # Document parsing utilities
├── public/                       # Static assets
└── configuration files           # Config files (tsconfig, tailwind, etc.)

Key Directories Explained:

  • app/api/ - Contains server-side API routes including document and agent management
  • app/components/agents/ - Components for creating and managing specialized legal agents
  • app/components/documents/ - Document upload, display, and management UI
  • app/components/ - Core application components organized by feature
  • app/pages/ - Main page components (Chat, Data, Settings, etc.)
  • app/types/ - TypeScript interfaces and type definitions
  • components/ui/ - Reusable UI components built with Radix UI
  • hooks/ - Custom React hooks for shared logic
  • lib/documentParser.ts - Utility for parsing and processing legal documents
  • public/ - Static files like images and icons

🎯 Application Features

Single Page Application (SPA)

Specter is built as a SPA using Next.js with client-side routing. The main navigation happens through React context (RouterContext) without page reloads, providing a smooth user experience.

Main Sections:

  • Chat - AI conversation interface with legal-specialized agents
  • Documents - Upload and manage legal documents
  • Agents - Create and configure specialized legal AI agents
  • Data - Data exploration and visualization
  • Settings - Configuration management
  • Evaluation - AI model evaluation tools
  • Explorer - Advanced data browsing
  • 📄 Document Management - Upload, parse, and organize legal documents
  • 🤖 Agent Specialization - Create agents for contract review, case analysis, legal research
  • 📚 Knowledge Organization - Organize documents by cases, clients, legal domains
  • 🔍 Metadata Management - Rich metadata for document categorization
  • 💬 Legal Chat Interface - Conversational AI tailored for legal queries
  • 📊 Document Analytics - Visualize and analyze legal document collections

Core Capabilities (from Elysia):

  • Real-time chat with AI models
  • Interactive data visualizations
  • 3D graphics and globe visualizations
  • Configurable AI model settings
  • Data collection management
  • Feedback and evaluation systems

🔧 Available Scripts

# Development
npm run dev              # Start development server

# Building
npm run build           # Build for production
npm run build:clean     # Clean build (removes cache first)

# Export & Assembly
npm run export          # Export static files to backend
npm run assemble        # Build and export in one command
npm run assemble:clean  # Clean build and export

# Other
npm start              # Start production server
npm run lint           # Run ESLint

🔨 Build Process

The application uses a custom build process designed for static export:

  1. Build: Creates an optimized production build
  2. Export: Generates static files in the out/ directory
  3. Assembly: Copies exported files to the backend's static directory

The export.sh script handles copying the built static files to ../specter/api/static for integration with the backend server.

🌐 Environment Configuration

The application supports various environment variables:

  • NEXT_PUBLIC_IS_STATIC - Enables static export mode

🎨 Styling & Theming

  • Tailwind CSS for utility-first styling
  • CSS Custom Properties for dynamic theming
  • Custom fonts: Space Grotesk (text) and Manrope (headings)
  • Responsive design with mobile-first approach
  • Dark mode support via CSS classes

🧩 Architecture Patterns

  • Context-based state management for global state
  • Component composition with Radix UI primitives
  • Custom hooks for shared logic
  • TypeScript interfaces for type safety
  • Modular component organization by feature

🌟 Open Source & Contributing

Specter is built on the open-source Elysia platform, and we welcome contributions from the legal tech community! Whether you're fixing bugs, adding features, improving documentation, or suggesting legal-specific enhancements, your contributions help make Specter better for legal professionals everywhere.

Ways to Contribute:

  • 🐛 Bug Reports - Help us identify and fix issues
  • ✨ Feature Requests - Suggest new legal-focused functionality
  • 💻 Code Contributions - Submit pull requests with improvements
  • 📚 Documentation - Help improve our docs and examples
  • 🧪 Testing - Help us test new features and report issues
  • ⚖️ Legal Domain Expertise - Share insights on legal workflows and requirements

Contribution Guidelines:

  1. Fork the repository and create your feature branch
  2. Make your changes following our coding standards
  3. Ensure all tests pass and the build is successful
  4. Submit a pull request with a clear description of your changes

🚨 Before Contributing - Build Requirement

IMPORTANT: Before submitting any contribution, you MUST ensure that the build process completes successfully:

npm run build

This command must run without errors before your pull request will be accepted. This ensures:

  • All TypeScript types are valid
  • Components render correctly
  • Dependencies are properly resolved
  • The application can be successfully deployed

If the build fails, please fix all issues before submitting your contribution.

Getting Help

  • Open an issue for bug reports or feature requests
  • Join our Weaviate community discussions
  • Check out the existing issues for contribution opportunities

We appreciate every contribution, no matter how small. Thank you for helping make Specter better for the legal community! 🎉

🙏 Acknowledgments

Specter is built on top of Elysia by Weaviate. We extend our gratitude to the Elysia team and the open-source community for providing the foundation that made Specter possible.