• Create & Configure: Support for all Pinecone index types (Serverless, Pod-based)
• Real-time Monitoring: Live status updates, capacity monitoring, and health checks
• Multi-metric Support: Cosine, Euclidean, and Dot Product similarity metrics
• Batch Operations: Efficient bulk index management

• Semantic Search: Execute similarity searches with custom vectors
• Smart Filtering: JSON-based metadata filtering with complex conditions
• Namespace Management: Organize and isolate your vector data
• Export Capabilities: Download query results in multiple formats

• Interactive Dashboards: Real-time charts powered by Recharts
• Capacity Planning: Monitor index fullness and storage utilization
• Distribution Analysis: Visualize vector distributions across namespaces
• Performance Metrics: Track query performance and usage patterns

• Dark/Light Mode: Adaptive theming for comfortable development
• Responsive Design: Works seamlessly across all devices
• Type Safety: Full TypeScript support with comprehensive type definitions
• Error Handling: Graceful error management with detailed feedback

🌐 Try the Live Demo →

Experience the full functionality with your own Pinecone API key

📝 Note: You'll need to configure your Pinecone API key to access all features

💡 Want to see it in action first? Check out the live demo or view the demo screenshot above!

• Node.js 18.0 or later
• npm or yarn package manager
• Pinecone account with API key (Get one here)

1. Clone the repository

   git clone https://github.com/wookingwoo/pinecone-dashboard.git
   cd pinecone-dashboard

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Setup

   Create .env.local file in the root directory:

   PINECONE_API_KEY=your_pinecone_api_key_here

4. Start development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000

// POST /api/indexes
{
  "name": "my-index",
  "dimension": 1536,
  "metric": "cosine"
}

// Response
{
  "success": true,
  "index": {
    "name": "my-index",
    "dimension": 1536,
    "metric": "cosine",
    "status": "Initializing"
  }
}

// POST /api/query
{
  "indexName": "my-index",
  "vector": [0.1, 0.2, 0.3, ...],
  "topK": 10,
  "filter": {
    "category": "document",
    "year": {"$gte": 2020}
  },
  "includeMetadata": true
}

// Response
{
  "matches": [
    {
      "id": "doc-1",
      "score": 0.95,
      "metadata": {
        "title": "Document Title",
        "category": "document"
      }
    }
  ]
}

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   React Client  │────│  Next.js API    │────│  Pinecone API   │
│                 │    │                 │    │                 │
│  • Dashboard    │    │  • Authentication│    │  • Vector Ops   │
│  • Components   │    │  • Rate Limiting │    │  • Index Mgmt   │
│  • State Mgmt   │    │  • Error Handling│    │  • Analytics    │
└─────────────────┘    └─────────────────┘    └─────────────────┘

src/
├── app/                    # Next.js App Router
│   ├── api/               # API Routes
│   │   ├── indexes/       # Index management
│   │   ├── query/         # Vector queries
│   │   └── vectors/       # Vector operations
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React Components
│   ├── Dashboard.tsx      # Main dashboard
│   ├── IndexManager.tsx   # Index management
│   ├── QueryInterface.tsx # Query interface
│   ├── VectorSearch.tsx   # Vector operations
│   ├── Analytics.tsx      # Analytics dashboard
│   └── Settings.tsx       # Configuration
└── lib/                   # Utilities
    ├── api.ts            # API client
    ├── pinecone.ts       # Pinecone utilities
    └── pinecone-server.ts # Server-side client

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# Type checking
npx tsc --noEmit     # TypeScript type check

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Use TypeScript for all new code
• Follow ESLint configuration
• Write meaningful commit messages
• Add JSDoc comments for public APIs
• Ensure responsive design for UI changes

1. Click the deploy button above
2. Set your PINECONE_API_KEY environment variable (optional)
3. Deploy!

Live Example: pinecone.ronny.dev

# Build the application
npm run build

# Start production server
npm start

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

// Create a new index
const response = await fetch('/api/indexes', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'semantic-search',
    dimension: 1536,
    metric: 'cosine'
  })
});

// Perform similarity search
const searchResults = await fetch('/api/query', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    indexName: 'semantic-search',
    vector: embeddings,
    topK: 5,
    filter: { category: 'documentation' }
  })
});

1. Create a Pinecone account
2. Generate an API key from your dashboard
3. Choose your preferred cloud region
4. Set up your first index (or use the dashboard!)

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      }
    }
  }
}

// Implement in your API middleware
const rateLimit = {
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests per windowMs
};

We welcome contributions! Here's how you can help:

• Use the issue template
• Include steps to reproduce
• Provide environment details

• Check existing feature requests
• Use the feature template
• Explain the use case

• Read our contributing guide
• Follow the code style guidelines
• Add tests for new features
• Update documentation

• Pinecone - For the amazing vector database platform
• Vercel - For the excellent hosting and deployment experience
• Next.js Team - For the powerful React framework
• Tailwind CSS - For the utility-first CSS framework
• Open Source Community - For inspiration and contributions

This project is licensed under the MIT License - see the LICENSE file for details.

• 🎬 Live Demo: pinecone.ronny.dev
• 📖 Pinecone Docs: docs.pinecone.io
• 🌐 Pinecone Platform: pinecone.io
• ⚛️ Next.js Docs: nextjs.org/docs
• 🐛 Report Issues: GitHub Issues