Stop Being Scared of Code - It's Easier Than You Think With AI
Diving into how to use Code with OpenAI's and Mistral's Code Interpreter and Canvas, as well as Claude's Analysis tool and Artifacts.
I love talking about practical ways to use AI in everyday work. Whether it's using it as a writing assistant, a brainstorming partner, or just a helper for daily tasks. But whenever I mention that AI can help you use code to solve problems, I see people instantly check out of the conversation.
And I get it. Code feels intimidating. It's not even about the barrier to entry—most people don't even consider it as an option. When faced with a task that could be solved with code, it doesn't even make the list of possible solutions. It feels like something that's "not for me" or "too technical."
How AI Has Changed the Game
But here's what's interesting: tools like Mistral, ChatGPT's Code Interpreter, and Claude's Analysis Tool have completely changed this game. Making use of code has become trivially easy. You don't need to learn coding, deal with installing software, or understand technical terms. You can just describe what you want to do in plain English, and these tools will not only write the code but run it for you right there in your browser.
I'm not talking about becoming a software engineer. I'm talking about smaller, bespoke use cases that are 100% personalized to what you need.
What You Can Actually Do With These Tools
Here are a few things you can now do in just a few minutes:
Create a graphical overview of your personal finances to better understand where your spending is going
Analyze your sales numbers to spot trends you might miss in Excel
Turn your smartwatch data into meaningful health insights
Combine different sources of information in ways that would be a nightmare in Excel, like matching your calendar events with your time tracking data to see your real productivity patterns, or connecting your expense data with your location history to understand your spending habits by neighborhood
All of this is 100% personalized to your needs. No pre-built dashboards or one-size-fits-all solutions. You can get exactly the insights you want, presented exactly the way you want them.
How Can You Get More Insights From Your Time Tracking Data?
Let's take a specific example. Say you track your time and you want to understand your work patterns better. Traditional time tracking apps give you basic charts, but what if you want something more personalized?
Using tools like Claude's Artifacts or Mistral and ChatGPT's Canvas, you can create interactive visualizations that show exactly what you want to see:
A heatmap showing your most productive hours
Interactive charts where you can filter by project or time period
Custom dashboards that combine multiple views
Visualizations that adjust based on what you want to analyze
The best part? You can modify these visualizations through simple conversation. Want different colors? Need to group the data differently? Just ask. The AI will update the visualization right there in your browser.
Which Tools Can Help You Create Custom Visualizations?
When it comes to creating custom visualizations and analyzing data, you have several powerful options available. Mistral, ChatGPT, and Claude offer these with slightly different names and a few small differences, but they are very similar. Let's look at what each tool does best:
Code Interpreter & Analysis Tool
Mistral, ChatGPT, and Claude offer a powerful tool for data analysis and visualization:
Analyzing data from CSV files and spreadsheets
Creating charts and graphs from your data
Running Python or JavaScript code to process information
Converting file formats and handling calculations
Canvas & Artifacts
For creating and editing visualizations in real time, Mistral, ChatGPT, and Claude provide:
Creating and editing code in real time
Rendering web interfaces and visualizations
Providing a collaborative workspace for refinement
Offering inline suggestions and improvements
Understanding the Difference:
Canvas/Artifacts: Think of Canvas or Artifacts as a creative workspace where you can draft, edit, and visualize content in real time. It's like a digital whiteboard for designing web interfaces, writing text, or creating diagrams with immediate visual feedback.
Code Interpreter/Analysis Tool: Code Interpreter or Analysis Tool is a behind-the-scenes assistant that runs code to analyze data, generate visualizations, or perform calculations. You describe the task, and it executes the code to deliver results.
Making your choice:
All the platforms have similar tools like explained above, but they do have some slight differences, whether that comes from a nice UI, well implemented coding environment or great models.
Speed and Efficiency
Claude: Particularly fast at generating and iterating on React components. The Haiku model, despite being the "basic" version, performs surprisingly well at this task.
ChatGPT: Speed depends on the model. GPT-4o is fast and decent, o1 is slow but capable of getting more things right in one go.
Mistral: Speed varies significantly based on the model being used. With Flash, it can be ridiculously fast, 10 times faster than the other models.
Error Handling
Claude: Excellent at self-correcting and providing clear explanations of issues with o1. GPT-4o is not as good, but still decently capable.
ChatGPT: Good error handling with clear explanations. Can sometimes get stuck on small problems, like a misplaced bracket.
Mistral: More basic error handling that sometimes requires additional prompting.
Code Quality
Claude: Consistently high-quality code output, especially for React components.
ChatGPT: High-quality code with good documentation.
Mistral: Quality varies but generally more basic; requires more iteration.
Making Your Choice
Since there’s so much overlap in these tools, whatever subscription you already have should be the main consideration. If you’re still undecided, or have multiple, then consider the following points:
If you're working with larger files and need to download results, ChatGPT's Code Interpreter is your best bet.
For React development or when you need high-quality code generation quickly, Claude's Artifacts shine.
If you're working with simpler tasks and want a more basic environment, Mistral can be a good choice, but model quality lags behind.
A Real-World Example: Building Your Productivity Dashboard
Let's walk through creating something actually useful: a dashboard that visualizes your time tracking data with your calendar to give you real insights into your productivity patterns. This is exactly the kind of project that would typically require knowledge of React, data visualization libraries, and API integrations—but we can build it just by having a conversation with AI.
Step 1: Access Your Data
The first step is to get the data you want to analyze. Whether it's time tracking data, calendar events, or any other dataset, make sure you have access to the files you need. Most apps allow you to export data as CSV, JSON, or other formats.
Here's an example of what your time tracking data might look like in CSV format:
Start;Stop;Workspace Name;Project Name;Client Name;Tags(s);Description
2025-02-10T07:30:00Z;2025-02-10T08:00:00Z;Dev Workspace;Daily Planning;Internal;Planning,Email;Review emails and plan the day.
2025-02-10T08:00:00Z;2025-02-10T08:30:00Z;Dev Workspace;Team Meeting;Internal;Meeting;Daily stand-up with the development team.
2025-02-10T08:45:00Z;2025-02-10T12:00:00Z;Dev Workspace;AI Platform Development;Product;Coding,Development;Develop new AI feature for product.
2025-02-10T12:00:00Z;2025-02-10T12:30:00Z;Dev Workspace;Break;Internal;Break;Lunch break.Step 2: Help AI Understand Your Data
Once you have your data, the next step is to help the AI understand it, and create the most barebones version of it. Copy the first few rows of your data and provide the following prompt to the AI:
Prompt:
Here are a few rows of my data. I want an upload feature that will handle this data. This is for a data visualization dashboard that uses React. Keep it simple for now.
As you can see, ChatGPT happily obliges and creates what I want in one single shot. I can upload the file, it shows a table, meaning it understood the data!
Tip: Tell the model to add some raw data as comments in the code. That will it’ll never forget what the original data looks like!
Step 3: Create Your First Visualization
Start simple. You might say something like: "Create a chart showing how many hours I spent on different projects each day."
And you might see something like this:
The AI will try to create a basic bar chart for you. Sometimes it’ll be a bit off, like what it shows right here. But with a bit of extra instructions, you can get there. Explain what it is you’re seeing, and explain what you want to see instead. In my case, I said something along these lines:
The days are visualized next to each other. They should be displayed horizontally like they’re shown right now, but stacked vertically. So Monday on top, Tuesday below that. Right now they’re next to each other and that makes it squished.
No technical language. No complicated prompting techniques, simply:
This is what I’m seeing right now, and this is not what I want. This is what I want instead.
And once it’s working, things get interesting. You can immediately start customizing it:
"Make the bars horizontal instead of vertical"
"Use different colors for different projects"
"Add hoverable tooltips showing the exact hours"
Step 4: (Optional) Modify the data
AI is very capable of modifying the data too! Maybe it should ignore any activity that was shorter than 20 minutes. Perhaps you want AI to group certain activities together to measure time spent. For example:
Meetings, Research and E-mails count towards “Work”
Reading, Games and Movies count towards “Leasure”
Etc.
Whatever you want, just ask the model to adjust the data, and display it for you! This can be especially powerful in work related settings.
Tip: Combine Code Interpreter with Canvas here. Upload the file and have code interpreter take a first look. It can count values, extract information like which categories are vailable or sort out how to calculate or modify your data. Then, have the model explain to you how that worked, and use that information to update canvas!
Step 5: Make it interactive
Here's where modern visualization tools really shine. You can add interactive features just by asking:
"Add a date range picker at the top"
"Let me filter by project type"
"Create a toggle to switch between daily and weekly views"
The AI will handle all the React components and state management behind the scenes. All you have to do is, is describe what you want! In my case, I added that I can hover over the categories up top, and that they light up in view!
Throughout this process, you're just having a conversation. No need to understand React components, D3.js, or data processing. Just describe what you want to see, and refine it until it's perfect.
Common Pitfalls to Avoid
Don’t try too much at the same time
When working with Canvas, it's best to take small steps and iterate gradually. Implementing small features one at a time allows you to build on what's already functional, decreases the likelihood of errors and gives you more insights in where the model might have made a mistake, which they fairly frequently will make.
Don’t get tunnel vision when solving problems
Don’t panic when a model makes a mistake - there are two effective ways to deal with them. Either undo what the model just did and go back to a previous version, adjust the prompt, and try again. It’s that, or the second approach is to provide the error to the AI model, and have it fix it for you.
My personal experience is that undoing and adjusting the prompt is incredibly effective and should sometimes be considered as the very first option instead of continuing the conversation, especially with reasoning models.
Debugging tips when working in Canvas
Troubleshooting options
It’s not a matter of if, but when you get a stuck. Like I explained above, there are two general approaches. Either dig in and get the model to solve it, or scroll back up, edit the prompt and give it another shot with extra instructions. Luckily, Code Interpreter and Artifacts all support versioning, so don’t be afraid to take a few steps back!
Second, there’s a lot of value in starting with a clean slate. Copy what you have in Canvas, maybe have the model summarize what you’re working on, and bring it into a new clean conversation. It can feel like you’re taking a few steps back, but more often than not will it help you progress quicker and further.
Third, if the model supports it, screenshots can be a great addition. The model just writes code and doesn’t see the end result. Share images and describe what’s wrong. The more descriptive, the more likely you’ll get the answer you’re looking for.
Don’t expect a stunning dashboard in 5 minutes, it can take a bit of back and forth. But take a few hours, and you’ll be able to create something that a year ago would’ve taken weeks. More likely that it wouldn’t have even been an option, as you (and I) lacked the skillset to be able to do this at all.
Why This Matters
2-3 years ago, if you told me I would be doing data analysis or visualizations, I wouldn’t have imagined that to be true. Especially not in 30-60 minutes. Achieving a nice-looking result that is genuinely useful, by yapping at an AI model that “things need to look better”.
The real magic happens when you stop thinking about "coding" and start thinking about solving problems. Maybe you have a spreadsheet that's becoming unwieldly, or data from different sources that you wish you could combine. That's your starting point. Pick a small project that actually matters to you, something you've been putting off because it seemed too technical. Try it with these tools. You might be surprised at how quickly you can go from "I can't do this" to "I wonder what else I could build."
On top of that, both the tools and the models will only get better! Right now it can sometimes still feel a bit buggy and clunky, but I bet in 6 months time, things will work even better than they do now.