Skip to main content
The Toolshed web app is a Vite + React application at apps/web/ that provides a browser-based interface for managing your Toolshed configuration.

​
Running locally

# Start the server (requires .env.local with credentials)
pnpm --filter @toolshed/server dev

# Start the web app
pnpm --filter @toolshed/web dev
The web app runs at http://localhost:5173 and connects to the server at http://localhost:3000.

​
Authentication

Users sign in via email/password or Google OAuth. Only @philo.ventures email addresses are allowed. Authentication is handled by Better Auth with session cookies. The login page features a split layout with the auth form on the left and an animated WebGL gradient on the right.

​
Dashboard tabs

​
Tools

Three sections for managing tool connections:
  • Personal tools — each user connects their own account (GitHub, Google, Granola Personal)
  • Team tools — shared across the org (Slack, Linear, QuickBooks, DocuSign, Carta, Google Cloud, Granola Enterprise)
  • Built-in tools — ready-to-use tools with on/off toggles (Attio, Browserbase, Cloudflare Markdown Fetch, SEC Edgar, Firecrawl, Perplexity)

​
Connector availability filter

On every dashboard mount, the page calls GET /api/connectors/availability and hides any tile whose underlying creds aren’t configured on the server. So if SLACK_CLIENT_ID is empty, the Slack tile won’t appear at all (rather than showing a broken Connect button). This keeps the UI honest about what’s actually wired up.

​
Connect button dispatch

The Connect button branches by tile category:
  • apiKeyAuth: true tiles (granola personal/enterprise) open the API-key paste dialog and store the secret encrypted in tool_connections.
  • OAuth tiles dispatch by provider id: github/google/slack/linear use authClient.signIn.social({ provider }) (Better Auth social), and the rest (quickbooks/gcp/docusign/carta) use authClient.signIn.oauth2({ providerId }) (Better Auth genericOAuth plugin).
Multi-instance tools (GitHub orgs, Linear workspaces) support multiple connections through the multi-instance dialog and per-row management.

​
Authorizations

Per-action permission controls for every tool. Each action can be set to:
  • Allow — execute without confirmation
  • Ask — pause and request user approval
  • Deny — block execution

​
MCP URLs

Create and manage MCP endpoints for connecting AI tools (Claude, Cursor, etc.) to Toolshed. Each endpoint gets a unique ts_mcp_ token with:
  • Stdio config (JSON for claude_desktop_config.json or .cursor/mcp.json)
  • HTTP endpoint URL

​
Tech stack

  • Vite + React + TypeScript
  • shadcn/ui (@base-ui/react primitives, with the render prop where shadcn would normally pass asChild) and custom Philo brand palette
  • Tailwind CSS v4
  • GT Sectra Display (headings) + IBM Plex Sans (body) + IBM Plex Mono (code)
  • Shiki for syntax highlighting
  • WebGL animated mesh gradient on auth pages