Lawson Oates home

Appnotes

Visit Appnotes

The goal of Appnotes was to provide powerful AI-enabled features within a familiar interface for the everyday non-technical user. This started as an editor with features as outlined in this excerpt from a pitch below.

Currently AI tools like ChatGPT enable users to effortlessly generate text, but why limit AI just to words? With Appnotes, you can generate entire documents including tables, graphs, images and more. This combines the benefit of AI's natural language interface and speed with rich and dynamic content.

At the heart of Appnotes is a unique design challenge: to merge the UI of creating, editing and transforming native document elements (like tables) with that of an App (like a form). This includes clicking on text to edit, clicking on elements to transform, and much more. The video below demonstrates creating a table with a prompt and typical UI buttons, and then altering the table state with either. This creates an interaction that feels powerful but new and quirky as it blends the lines of what is being created and manipulated.

Challenges

Choosing the right editor framework for JSX code within a node was challenging due to my limited experience. Lexical's React support seemed promising, but its node types did not fit. I switched to Slate JS, which better supports JSX.

Constructing the entire build process of an app from a prompt required refreshing my understanding of React and web fundamentals.

  • Building and transpiling from memory or file
  • SSR and serving to the client via iframe
  • Using structured output or parsing XML in plain text
  • Using an agent versus a prompt-chaining workflow

Technical Details

  • Web app built with Next.js 15 and React 19, using TypeScript for type safety.
  • Server for building apps built with Bun for performance.
  • Styled with Tailwind CSS and Shadcn/ui for dynamic and consistent design with accessibility.
  • Prisma ORM used to manage the PostgreSQL database.
  • Groq, Anthropic, and OpenAI models used via the Vercel AI SDK and LangChain.
  • Dev tools like React-scan, ESLint, and Prettier used.