Codementor Events

I Built a Claude Chat UI Because I Was Tired of the Official Limitations

Published Nov 11, 2024
I Built a Claude Chat UI Because I Was Tired of the Official Limitations

Hey folks!

Let me tell you about why I decided to build my own Claude chat interface.

You know that feeling when you're using a tool and keep hitting walls?

That's exactly what happened to me with Claude's platform.

Don't get me wrong - Claude is amazing, but whether you're on the free or paid plan, there are some frustrating limitations.

Using Nuxt.js, I built a chat interface that gives me everything I was missing.

The best part?

I can store ALL my conversation history locally. No more losing valuable discussions or having to repeat myself because a chat timed out.

It's all right there in my SQLite database, safe and sound.

One of my favorite features is the ability to customize Claude's behavior per chat using system prompts.

Sometimes I want Claude to be a coding buddy, other times a writing assistant - now I can switch between these modes easily.

And you know what's cool? I can adjust the temperature setting for each conversation, making Claude more creative or more focused depending on what I need.

The limitations of attachment handling in the official platform were also driving me nuts.

So I added proper file support with text extraction capabilities. Now I can easily discuss documents with Claude without any hassle.

Here's what makes this solution better than the official platform:

  • Complete control over conversation history
  • Custom behavior settings for each chat
  • No arbitrary conversation limits
  • Local data storage
  • Flexible file handling
  • Dark/light mode because... why not?

I built this using some pretty solid tech: Nuxt 3 for the framework, Drizzle ORM for database management, and the official Anthropic AI SDK for Claude integration.

It's all wrapped up in a clean, user-friendly interface that doesn't get in your way.

Of course, you'll still need your own Anthropic API key (can't get around that!), but once you have it, you're free from most of the platform limitations. Just clone the repo, set up your environment, and you're good to go.

I'm still working on adding features like streaming support for those longer chats, but even in its current state, it's already made my Claude experience so much better.

No more frustration with disappearing conversations or platform restrictions!

Want to try it out?

Setup is pretty straightforward with npm, yarn, or pnpm. Just remember to add your API key in the .env file, and you'll be chatting with a more flexible version of Claude in no time.

Have you also been frustrated with Claude's platform limitations? What features would you add to make it even better?

Drop your thoughts below - I'd love to hear your ideas!

P.S. Still on my todo list: adding user authentication and better form validation. But hey, when you're building something to scratch your own itch, you get to prioritize what matters most to you! 😉

Discover and read more posts from Nabil CHIHEB
get started