Nocti

A character-driven AI companion that helps overwhelmed creatives turn unfinished ideas into clear, manageable next steps through three distinct personality modes.

Comment

Inspiration

Nocti began with a feeling I know personally: having too many ideas, unfinished projects, and creative ambitions, but feeling too overwhelmed to decide what to do next.

Traditional productivity tools can make that feeling worse by adding more lists, deadlines, and pressure. AI assistants can offer useful advice, but they often feel impersonal. I wanted to create something that combined practical support with the emotional connection of a memorable character.

That idea became Nocti, a celestial goblin companion who helps overwhelmed creatives find clarity, return to neglected ideas, and take one manageable step forward.

What it does

Users can tell Nocti about an unfinished project, creative block, new idea, or anything else weighing on their mind. Nocti uses GPT-5.6 to generate a concise, character-driven response that helps the user identify a realistic next step without creating more pressure.

Users can also choose between distinct personality modes, changing how gently or directly Nocti responds while preserving her central purpose.

The experience was designed to feel more like meeting a companion than opening a conventional chatbot. Nocti appears within an immersive celestial interface featuring a glowing aura, floating stars, subtle animation, and responsive feedback while she considers the user’s message.

How we built it

I built Nocti using React, Vite, JavaScript, and custom CSS. The frontend manages the user’s message, selected personality mode, loading state, error handling, and Nocti’s response.

Messages are sent to a serverless API endpoint hosted through Vercel. The endpoint securely communicates with the OpenAI API and uses GPT-5.6 to generate Nocti’s response. Mode-specific instructions shape her tone, response length, and character while keeping the guidance useful and focused.

I used Codex with GPT-5.6 throughout development to:

  • Plan the application architecture and interaction flow
  • Build and refine the React components
  • Create the serverless OpenAI API integration
  • Develop Nocti’s personality and mode-specific prompts
  • Implement loading, error, and fallback states
  • Debug local Node.js, Vercel, and environment-variable issues
  • Improve the responsive interface and animated visual states
  • Translate design feedback into targeted code changes

I made the creative direction, product, character, and design decisions, while Codex helped turn those decisions into functional code and guided me through technologies I was still learning.

Challenges we ran into

The first major challenge was securely connecting the application to the OpenAI API. I needed to route requests through a serverless function, configure local and deployed environment variables, and protect the API key from being exposed in the frontend.

I also encountered local Node.js and Vercel development issues. Determining whether an error came from the React interface, API endpoint, environment configuration, account credits, or development server required testing each part of the system separately.

Another unexpected challenge involved Nocti’s response card. Longer responses caused it to expand over the character artwork, hiding the visual centerpiece of the experience. I redesigned the interaction area with fixed card dimensions and internal scrolling so the response remains readable without consuming Nocti’s space.

That challenge reinforced an important product decision: the AI should support the character experience, not overpower it.

Accomplishments that we're proud of

I am especially proud that Nocti developed from an original character concept into a functional AI application.

The final prototype includes:

  • Live GPT-5.6-generated responses
  • Multiple personality modes
  • A secure serverless API connection
  • Loading and error states
  • A responsive celestial interface
  • Custom character-driven prompt design
  • Fixed, scrollable response presentation
  • A complete experience that feels different from a standard chatbot

I am also proud that I built the project while actively learning React, Vite, Git, GitHub, serverless functions, and deployment. Each technical obstacle became part of the learning process instead of a reason to abandon the idea.

What we learned

Building Nocti taught me that creating an AI product involves much more than connecting a text box to a model.

Prompt design became part of the overall experience design. Small adjustments to tone, length, structure, and personality dramatically changed how Nocti felt to interact with. I also learned how to separate frontend and server-side responsibilities, protect sensitive credentials, debug an API workflow, and prepare a React application for deployment.

Most importantly, I learned that an AI tool can be practical without feeling cold. Productivity support can still be imaginative, emotionally resonant, and intentionally designed.

What's next for Nocti

The next major feature will be Lanterns, allowing users to save ideas, advice, and next steps instead of losing them after an interaction.

Future versions could also include:

  • Saved projects and unfinished ideas
  • Gentle progress check-ins
  • Conversation history
  • Additional personality modes
  • Custom goals and milestones
  • A lantern that visually grows as users complete steps
  • Accessibility and interface customization
  • Optional reminders for ideas users want to revisit

Nocti is currently a focused first version, but the larger vision is a creative companion that helps people return to the ideas they once cared about—one small light at a time.

Built With

Share this project:

Updates