Arc.AI – The Superhero of Productivity
Overview
Arc.AI is a full-stack, AI-powered assistant designed to integrate directly with Notion and empower users to architect their digital workflows. Unlike Notion AI’s limited features, Arc.AI gives users control, flexibility, and the ability to plug in their own AI keys (BYOK), all while maintaining a seamless chat interface backed by custom tools.
Tech Stack:
- Next.js – App Router architecture for optimized routing and performance.
- TailwindCSS – Clean, scalable styling with custom gradients and layouts.
- Shadcn/UI – Used for accessible, composable UI primitives.
- Vercel AI SDK – Powering streaming chat, tool calling, and multi-provider support.
- Supabase – Handles authentication and secure encrypted key storage.
- Notion API – Enables page creation, updates, block appending, and search.
- Zod – Strict schema validation for tool arguments and safe type handling.
Creation Process
- Problem Identification: Notion AI lacked real control, extensibility, and privacy — Arc.AI fixes that.
- Design System: Built a blue-purple gradient theme, the Inter font, and a bold minimal layout.
- Tool Layer: Custom tool execution with full type-safe Zod validation and internal encryption logic.
- Chat System: Full streaming response flow via Vercel AI SDK, model switching, markdown rendering and more (based on the Luminary AI Kit).
- BYOK Security: Integrated encrypted storage via Supabase, decrypted securely at runtime.
- Voice & File Input: Enabled real-time voice mode and multimodal support.
- Testing & Debugging: Performance optimized, accessibility improved, mobile-first polish applied.
Key Features
- 🔐 BYOK (Bring Your Own Key) for OpenAI, Groq, OpenRouter
- ⚙️ Custom Notion Tools: Create, update, append, search, and transcribe
- 💬 Streaming Chat with context tracking and custom error feedback
- 🔎 YouTube Podcast Transcription directly into Notion pages
- 🧠 System Prompt Templating: dynamic injection of user context + workflow IDs
- 🎙️ Voice Mode and Markdown rendering
- 🌘 Full Dark Mode Support and Mobile UX
Pages & UX Flow
- Home Page: Hero section, feature highlights, usage demo.
- Chat Interface: Rich prompt-to-action with tool streaming, file input, and voice.
- Signup/Login: BYOK token setup, API selection.
- Dashboard (Planned): User tool configuration, logs, usage insights.
Lessons Learned
- Security First: Encrypted BYOK implementation is non-negotiable for trust.
- Error Boundaries Matter: Custom error feedback for tool calling significantly boosts UX clarity.
- Streaming UX: Maintaining stream consistency across retries and tool calls needs deliberate architecture.
- Simplify for Power: Removing fluff = clearer workflows for end users.
Final Thoughts
Arc.AI isn’t a toy assistant. It’s a robust foundation for building powerful Notion-integrated AI workflows. Built for speed, flexibility, and privacy, it allows you to create with purpose — without ever sacrificing control.