Joe Giglio, Chief Remote Officer

Posted on Aug 27 • Updated on Aug 29

Part 3 - Using Claude, Claude-Dev and Aider to Build a Ticketing System

#ai #python #webdev #programming

The project has been open sourced if you would like to play along at home: https://github.com/joegiglio/helpdesk-claude-dev-ai

PART 3 -

I would now like to add a couple of basic features to the Knowledge Base. Right now, we only have a skeleton UI. Let’s see if we can have Claude do something useful with it.

[PROMPT]
I would now like to add a couple of basic features to the Knowledge Base. Right now, the knowledge-base URL shows a placeholder UI but let’s start to make it do something useful. Let’s start with the following:
Add a link in the lefthand navigation bar for “Knowledge Base Settings”. This should link to a new template that contains these settings.
Inside the Knowledge Base Settings page, add a placeholder image and placeholder text.
Inside the Knowledge Base Settings page, add a link for “Topics”, which will be created by the end user. These topics will contain articles in a future step. Make the necessary database updates to support these changes.
[/PROMPT]

Claude made the necessary changes but had issues with missing libraries. It once again lost track of the virtual environment, .venv, which I needed to remind it of.

[PROMPT]
Please make sure you are using the virtual environment, directory named .venv
[/PROMPT]

We ended up with this UI which was missing an image, had a couple of different fonts and the Manage Topics button was not functional. I asked Claude to clean it up.

[PROMPT]
We need to make some changes to the UI of the knowledge base settings page.

The placeholder image is missing.
There are a couple of different fonts. Please pick one and stay with it.
The Manage Topics button does not do anything. It looks like there is no framework for it so let’s make it functional.
Update the database by creating a table to hold the Topics. It only needs one field for now, named Topic.
Create a page so a user can create and delete new topics. Confirm deletions. [/PROMPT]

Claude tried to use a local placeholder image again but I reminded it to use the via.placeholder.com service as discussed in part 2.

Watching the output, I noticed a DB migration error which Claude was able to fix:

Exception during DB migration:
raise ValueError("Constraint must have a name")
ValueError: Constraint must have a name

After some clean up, this was the UI, which I did not care for:

[PROMPT]
Please update the UI for the knowledge-base/settings page using the integrations/slack page as a guide. Improve the fonts and replace the placeholder image with a local image that represents a Knowledge Base - perhaps a book?
[/PROMPT]

API limits are tightening up!

429 {"type":"error","error":{"type":"rate_limit_error","message":"Number of request tokens has exceeded your per-minute rate limit (https://docs.anthropic.com/en/api/rate-limits); see the response headers for current usage. Please reduce the prompt length or the maximum tokens requested, or try again later. You may also contact sales at https://www.anthropic.com/contact-sales to discuss your options for a rate limit increase."}}

Watching the requests go by, I saw Claude using a cURL command to download an icon to represent the Knowledge Base. However, it was not loading. When asked, Claude says an SVG file was downloaded but saved as a PNG. That’s a new one. One more iteration and it was fixed, leaving me with:

I am not sure if I love the layout with the big Manage Topics button but it will do for now. Moving on to managing topics:

Not bad, but if I try to add a topic name that already exists, I hit an exception:

sqlalchemy.exc.IntegrityError: (sqlite3.IntegrityError) UNIQUE constraint failed: knowledge_base_topic.name [SQL: INSERT INTO knowledge_base_topic (name) VALUES (?)] [parameters: ('topic 1',)]

This is the same constraint it had a problem creating earlier. Let’s see if Claude can fix it.

[PROMPT]
If I try to create a topic name that already exists, I get an exception. Please fix? sqlalchemy.exc.IntegrityError: (sqlite3.IntegrityError) UNIQUE constraint failed: knowledge_base_topic.name
[SQL: INSERT INTO knowledge_base_topic (name) VALUES (?)]
[parameters: ('topic 1',)]
[/PROMPT]

…and another 429 error:

Claude must be getting hit very hard! Almost unusable tonight…

[PROMPT]
I am now blocked from creating multiple topics with the same name but there are a couple of problems: 1. Missing styling for the “error” flash message. The background color should probably be red. 2. The topic names should be case insensitive. If “topic” already exists, “I should not also be allowed to create “TOPIC”.
[/PROMPT]

Another 429 error. This is grueling…

I was able to sneak in one more request until I supposedly hit my DAILY limit:

429 {"type":"error","error":{"type":"rate_limit_error","message":"Number of request tokens has exceeded your daily rate limit (https://docs.anthropic.com/en/api/rate-limits); see the response headers for current usage. Please reduce the prompt length or the maximum tokens requested, or try again later. You may also contact sales at https://www.anthropic.com/contact-sales to discuss your options for a rate limit increase."}}

I did not do much with Claude tonight but quickly hit my token limit. I am not really sure how that is calculated but the API seems very restrictive tonight. All I can do is smile and wait til tomorrow.

Next day:

[PROMPT]
Let’s continue to improve the Knowledge Base topics UI by making the following changes: 1. The topic names should be case insensitive. If “topic” already exists, “I should not also be allowed to create “TOPIC”. 2. Put a limit of 10 on how many topics can be created and display this count in the UI. Disable the Create Topic button if there are 10 topics and display an appropriate message.
[/PROMPT]

Claude came up with some fancy class function code to check for number of topics and case insensitivity. Pretty elegant:

I noticed that a maxlength was not being enforced for the topic name, even though I tell Claude to do so in my system prompt which is supposed to apply to every prompt I send. Disappointing…

Even though the field in the database is configured to accept 100 characters, I was able to submit a topic name with thousands and nothing blew up. I am not sure how that all works but from where I come from, a lack of enforced limits leads to trouble.

[PROMPT]
It does not look like you are enforcing any length limit on a topic name. Is that correct?
[/PROMPT]

You're right, and I apologize for overlooking this important detail. Let's add a length limit to the topic names. We'll set a maximum length of 50 characters for topic names. I'll make the necessary changes to enforce this limit both in the backend and frontend.

Claude added some code but it was plain Javascript and I wanted jQuery which is already part of the project. I also have jQuery in my system prompt but it seems to ignore that too. Claude changed it to jQuery and even added a character counter (nice touch!). But… it doesn’t work!

[PROMPT]
I see you added a character counter but it doesn’t work. I do not see any errors in the web console. Please fix.
[/PROMPT]

Claude made a few changes to the order of script tags and now it works. Again, similar issues to what we had before.

[PROMPT]
Let’s make a couple more UI tweaks on the manage-topics page. 1. Sort the topics in alphabetical order, case insensitive. 2. Move the Topic count next to the “Existing Topics” header, removing it from below the Create Topic button.
[/PROMPT]

In the middle of this iteration, I hit my daily API limit AGAIN. Whatever Anthropic recently changed with “prompt caching” has done nothing to help me. It seems to have gotten worse.

And, of course:

400 {"type":"error","error":{"type":"invalid_request_error","message":"Your credit balance is too low to access the Claude API. Please go to Plans & Billing to upgrade or purchase credits."}}

This is the current UI. Not bad!

To the next day… Next, I want to create the code to add articles to the knowledge base.

[PROMPT]
Now I would like to create another feature where we can add articles to the knowledge base. Some requirements:
Each article must be in a topic.
If a topic has articles, the articles should also be deleted when its parent topic is deleted. The deletion confirmation should warn the user of how many articles will also be deleted. The user needs to type the word “delete” (case insensitive) to confirm the topic deletion, if it has articles in it.
Click a topic name to view the articles within it.

In the next prompt, we will build out the UI for the article creation page. For now, put together a placeholder page with placeholder images and text.

Please make the necessary changes to the files and database structure to support this feature.
[/PROMPT]

This is a pretty meaty prompt. Let’s see how Claude does…

There were a couple of issues with the database migration which seemed to be caused by Claude again not detecting the .venv
environment. I am going to add that to the System Prompt setting in Claude-Dev. Hopefully it helps.

After those issues were straightened out, I found the results to be pretty good. Of course it needs a few tweaks after some quick testing. I will pick these off in the next prompt:

[PROMPT]
We need a few tweaks to the article creation implementation. Please make these changes:
When deleting topics, we should always show a confirmation. However, only if a topic contains articles should we ask for a confirmation that requires the user to type the word “delete”, case insensitive.
Add a mechanism to delete articles and confirm these deletions.
On the main knowledge-base page, hide the search bar and placeholder messages if there are no topics. Add placeholder text that says there are no topics yet.

Add a more advanced article editor so users can format their articles during creation and editing. Protect against potentially dangerous characters by encoding and decoding article text upon saving and retrieval.
[/PROMPT]

I was curious to see which article editor Claude would select. It went with TinyMCE. However it did not appear.

[PROMPT]
Some more tweaks are needed:
The manage-topics page should show how many articles are in each topic.
“View All Articles” button should not appear if there are no articles in a topic. Instead, show text like “There are no articles in this topic”.
You attempted to add the TinyMCE editor for adding and editing articles but it does not appear. I see no errors in the console.
[/PROMPT]

TinyMCE is still not working. This feels like another websocket and JIRA ticket issue where Claude can’t fix the issue and I run out of requests. I hope not. More tweaks needed!

[PROMPT]
Some more tweaks are needed:
If there are no articles in a topic, the manage-topics shows both an article counter and the text “There are no articles in this topic”. There is no need to show both so remove the text “There are no articles in this topic”.

On the “knowledge-base” page, we are still displaying the “View All Articles” button if there are no articles in the topic. Instead, show text like “There are no articles in this topic”.
The TinyMCE editor still does not appear for adding or editing articles. I see no errors in the console.
[/PROMPT]

The TinyMCE UI is loading now but it is asking for an API key. I will ask Claude if there is a simpler, free editor available instead.

[PROMPT]
The TinyMCE editor is appearing now but it is asking for an API key. Is there another editor we can use that does not require a key? Basic formatting options should be fine for now. If you can find one, please replace TinyMCE with it.
[/PROMPT]

Claude replaced TinyMCE with CKEditor and now it loads! However, it is not without its issues. I am not able to upload an image or save the article. Errors in the dev console:

[PROMPT]
I am able to view CKEditor but I am having a couple of issues:
I can not save an article. Dev console shows this error: new:1 An invalid form control with name='content' is not focusable.
I can not upload an image. Dev console shows this error: ckeditorerror.ts:140 filerepository-no-upload-adapter
Please fix?
[/PROMPT]

Claude says:

I apologize for the issues you're experiencing. Let's address both problems:
The error "An invalid form control with name='content' is not focusable" is likely due to the CKEditor replacing the textarea with its own element, causing issues with form validation. We'll need to update our form submission process to handle this.
The "filerepository-no-upload-adapter" error occurs because we haven't configured an upload adapter for CKEditor. We'll need to implement a simple upload adapter to handle image uploads.

The first fix looked easy but Claude was adding some very complex Javascript code to accommodate file uploads. I pushed back:

[PROMPT]
That looks like some very complicated code for the upload adapter. Are you sure there is not a simpler solution, perhaps something built into CKEditor?
[/PROMPT]

Claude:

I apologize for the complexity. You're right, there is a simpler solution using CKEditor's built-in features. Let's simplify our approach by using CKEditor's Basic package, which doesn't include image uploads but provides basic formatting options. This should resolve both issues without requiring a complex upload adapter.

I want file upload capabilities but can live without it during this exercise. Unfortunately, I hit my daily API limit so that’s it for today’s activities. Such a momentum killer…

However, I did preview some of Claude’s fixes. I am able to save an article now but the preview is showing HTML code. There is also no way to actually view an entire article. An oversight on my part. Will need to fix!

Due to some shortcomings in my earlier prompts when building the UI, pages and functions intended for an Admin are getting mixed with those of an end user. I am going to have to clean that up one of these days. For now, let’s continue on with some fixes and tweaks… Here is another meaty one. I am about to run out of credits but here we go!

[PROMPT]
There are still some bugs and shortcomings that need to be fixed:
I still have an option to upload images when creating and editing an article. Trying to upload an image shows an error: ckeditorerror.ts:140. I would like to be able to upload images using the editor so please fix. We can use the /static/uploads/ directory to store uploaded images if necessary.

When I go to the topic/[topic number] page, I see article previews but they appear with visible HTML code. This page should act as an article preview and we should perhaps see a plain text version of the beginning of this article. We may have to tweak this later.
We need a new route to view an article, and the article should appear properly formatted. Right now, when you click an article it brings you to edit mode. We need to separate viewing from editing.

There should be a way to create a new article in each topic from the manage-topics page.
When creating a new article, there is a topic dropdown at the bottom of the page. This dropdown is not contextually aware of the topic the user is in. The dropdown should reflect the correct topic.
[/PROMPT]

While watching Claude build the code for the file upload feature, I noticed it was creating the same block of Javascript in a couple of different files.

[PROMPT]
It looks like there is some similar Javascript code in the new_article.html and edit_article.html files. Can we create this in a common file and share the code instead?
[/PROMPT]

Claude:

You're right, and that's a great suggestion. Let's create a common JavaScript file for the CKEditor configuration and use it in both new_article.html and edit_article.html.
First, let's create a new file called ckeditor_config.js in the static/js directory.

That was a lot of changes. While reviewing the code changes, I noticed the diff showed a bunch of code being removed from the app.py file and being replaced with the text “# … (rest of the existing code)”. I had never seen this before and though it was maybe how Claude dealt with a large file and it was not really going to delete existing code. Well, I was wrong!

When Claude completed these tweaks, I tried to hit the home page and it was 404. Lots of code and routes were removed and line 80 is literally "# … (rest of the existing code)”. Wow, that’s bad! Hopefully we can fix this but I smell API limits lurking!

[PROMPT]
Oh no! I seem to have lost a lot of code from the app.py file after your last change. Many of the routes are gone and have been replaced with "# ... (rest of the existing code)" on line 29 and 80 of app.py. Please fix!
[/PROMPT]

Claude:

I apologize for the oversight. You're absolutely right, and I'll fix this issue immediately. Let's restore the missing code in the app.py file.

Claude was able to fix the code but Wow - that’s a bad one. What the hell was that all about?

[PROMPT]
If I try to create the “New Article” button, I get this error: jinja2.exceptions.UndefinedError: 'csrf_token' is undefined
[/PROMPT]

Claude says we now need the Flask-WTF package and it will install it using pip. Let’s see if the system prompt to use the .venv directory will work…

No way! Claude did it again, deleting all the code during the code merge! You really need to pay attention and not just accept the generated code.

[PROMPT]
I can not accept this code! Line 31 “has # ... (rest of the existing code)” and you removed the rest of the code again!
[/PROMPT]

When Claude was done, the server tried to restart but failed with “ModuleNotFoundError: No module named 'flask_wtf'” which indicates that it was not using the .venv directory so I don’t believe the System Prompt is working. This may be an issue with the Claude-Dev extension.

[PROMPT]
I am getting the error "ModuleNotFoundError: No module named 'flask_wtf'" so please make sure you are using the .venv virtual directory when adding new libraries!
[/PROMPT]

Claude:

I apologize for the oversight. You're right, we need to install Flask-WTF in the virtual environment. Let's do that now.

And… like clockwork:

The good news is that Claude was able to use the correct virtual environment and the server started.

The bad news is that if I try to submit a new article, I am hit with another CSRF error. Wake up, Claude. You have some work to do!

[PROMPT]
Please fix the following bugs:
If I try to submit a new article, I get an error: “Bad Request. The CSRF token is missing.”
If I try to view an article, HTML tags are visible. The article should display formatted without the tags.

[/PROMPT]

Someone woke up in a bad mood… I am barely using it and I am getting hit with rate limits already.

[PROMPT]
I am still finding some bugs. These are all very basic and should not have made it into the code. Please check your code more carefully as these are costing my money each time you need to fix them! Perhaps the application is getting complicated enough that it is time to add some automated testing that will run on each code change? The issues I am finding:
When I try to view an article such as the one found at article/2, it is still showing HTML markup and not rendering the formatted article. Perhaps this is breaking when the article is saved? I am seeing lt; and gt; in the database and notice you have “content = html.escape(content)” on app.py line 416.
If I try to create a new topic, I am now getting “Bad Request. The CSRF token is missing.”
If I try to create a new article, I am getting “UndefinedError jinja2.exceptions.UndefinedError: 'form' is undefined”
[/PROMPT]

Watching Claude make code changes, I think it is melting down. Why is it deleting all this code again??

[PROMPT]
Why are you deleting all that code again? Line 35 has # ... (keep all the existing model definitions and helper functions) and all the other code is deleted? Be careful!
[/PROMPT]

Claude:

I apologize for the confusion. You're absolutely right, and I appreciate your attention to detail. Let's make the necessary changes while keeping all the existing code intact. We'll only update the specific parts that need to be modified.
Let's update the app.py file, focusing only on the parts that need to be changed

Sigh…

[PROMPT]
Lines 35, 37 and 46 still have those comments and you are deleting huge blocks of code. Why?
[/PROMPT]

And of course -

I can’t be the only one having these problems. Everyone else says they are making millions with Claude and I seem to be finding all the bugs! I opened an issue in the Claude-Dev Github project since I can’t live like this: Github link

After doing some more research, it does sound like my project is hitting some type of token limit which is documented here: Github issue. This really limits the complexity of the project you can work with and is the likely cause of so many API limit errors as the project became more complex.

If I understand the problem correctly, in order to increase code quality, Claude-dev sends the entire contents of the active file back and forth in requests. This eats up tokens and at some point, my app.py file became too large to manage. One suggestion is to break the code into smaller files. Way back in Part 1, this was the direction we were going but had some issues with circular imports and Uvicorn so here we are…

I guess I will put this project to bed for now and follow the Github thread for updates. This gives some hope that an upcoming Claude update will ease the pain: Github comment

Next up: Cursor? Last time I tried, I did not like the UX as much but a lot of people seem to have made the switch. Cursor seems to be the new kid in town for Developers that are using UI to increase their productivity. Because what we need right now is another IDE.

Round and round we go…

So, some conclusions?

Is Claude ready to replace software Engineers? Eh, not quite yet but it can make existing Engineers more productive. The API limits are restrictive for anything more than a small project, refactoring, bug fixes and use as a virtual pair programmer.

I have read that Claude can read complex codebases and fix bugs within it. In my experience, it ran into a couple of bugs it could not fix in a fairly simple project on code that it created itself so that did not give me the warm and fuzzies. How would it fare on an old codebase written by dozens of people with a complicated file structure? Claude would not have any business context and if asked to fix a UI bug, it did not do a great job at matching already existing UI and UX flow in this simple prooject. It needed several iterations to clean up after itself.

I find backend code “easier” than front end code so I would personally use it to help me build project structure and a skeleton UI. One of Claude’s strengths is “computer vision” which enables you to upload a file and ask Claude to recreate it in code. If you like the UI of a website, this should give you a great starting point. Perhaps this is the new “View Source”. Embrace and enhance, as they say.

Although one of my earliest prompts asked Claude to use Bootstrap to make a Responsive UI, I just checked the mobile view for the first time and found that it is not really functional in anything smaller than IPad Mini resolution and that doesn’t look great either. So make no assumptions. Claude’s code needs the same amount of testing as any other code.

In fact, it would make sense to have it build out an automated testing harness which can run prior to code check in. Nobody likes doing THAT work. Make Claude responsible for writing, maintaining and running tests. Definitely an avenue worth exploring.

I asked Claude to create some automated tests in one of my final prompts but the token and API limits put an end to this experiment before we ever got there.

ABOUT THE AUTHOR

About the Author

Joe Giglio is a 25+ year veteran of the software industry. In his career, he has worked for a local dial-up ISP, startups of all sizes and a well established, slow moving enterprise. There were important lessons learned along every stop.

His recent projects include:

Remote work training and consulting: chiefremoteofficer.com

Kindle book "Making Remote Work, Work For You"

Remote company rankings. Think "Glassdoor for remote companies": remotescorecard.com

Joe’s guiding principles are: Remote first, quality driven, customer champion and lifelong learning. He was an introvert and practiced social distancing long before it was cool!

He currently resides in North Carolina and is always interested in new opportunities, meeting quality people and learning about exciting projects.

Contact Joe Giglio: joe -AT- joegiglio.org | Twitter | LinkedIn

DEV Community

Part 3 - Using Claude, Claude-Dev and Aider to Build a Ticketing System

Top comments (0)

Read next

1310. XOR Queries of a Subarray

Performance Impact Using Context API

Top 10 Machine Learning Frameworks to Watch in 2024

Creating a Professional-Quality Slideshow with Python: A Guide to Building Your Own iMovie Alternative