Skip to main content

Working with ValorIDE

Now that you understand ThorAPI and OpenAPI specs, let's explore ValorIDE - your AI coding buddy!

What Makes ValorIDE Special?​

ValorIDE isn't like traditional code editors where you have to type everything yourself. Instead:

  • You talk to ValorIDE in plain English
  • It understands what you want to build
  • It writes the code for you
  • It explains what it did and why

This approach is called "agentic coding" - where an AI agent does the coding work for you!

Getting Started with ValorIDE​

When you open ValorIDE, you'll see:

  1. A chat window where you talk to ValorIDE
  2. A file explorer showing all your project files
  3. A code editor where ValorIDE makes changes
  4. A preview area to see your app running

How to Talk to ValorIDE​

ValorIDE understands normal, everyday language. Here are some examples of things you can ask:

Creating New Features​

Interactive playgrounds load on the client. Refresh in a browser to edit this lesson.
Interactive playgrounds load on the client. Refresh in a browser to edit this lesson.

Fixing Problems​

Interactive playgrounds load on the client. Refresh in a browser to edit this lesson.
Interactive playgrounds load on the client. Refresh in a browser to edit this lesson.

Making Improvements​

Interactive playgrounds load on the client. Refresh in a browser to edit this lesson.
Interactive playgrounds load on the client. Refresh in a browser to edit this lesson.

Understanding How ValorIDE Works​

When you ask ValorIDE to do something:

  1. It analyzes your request to understand what you want
  2. It examines the current code to see what's already there
  3. It identifies which files need to be modified
  4. It writes or updates the necessary code
  5. It explains what changes it made

ValorIDE knows about the components ThorAPI generated, so it can use them to build exactly what you need!

Working with ThorAPI-Generated Components​

When ThorAPI generates your application, it creates reusable components that ValorIDE can work with:

Data Models​

ValorIDE knows about all the objects in your spec (like Products, Users, Orders). You can simply say things like:

Show a list of all products from the database on the homepage

API Services​

ValorIDE knows how to use the API endpoints ThorAPI created:

When a user clicks "Add to Cart", add the product to their cart in the database

UI Components​

ValorIDE can use and customize the UI components ThorAPI generated:

Create a product detail page using the ProductDetailView component

Step-by-Step Example: Building a Feature​

Let's see an example of working with ValorIDE to build a shopping cart feature:

Step 1: Ask ValorIDE to Create the Cart Page​

You:

Create a shopping cart page that shows all items in the user's cart, 
with the ability to change quantities and remove items.

ValorIDE will:

  • Create a new CartPage.tsx file
  • Import the necessary components
  • Set up the page structure
  • Add functionality to display, update, and remove cart items

Step 2: Ask ValorIDE to Add a Checkout Button​

You:

Add a checkout button to the cart page that calculates the total price
and asks for shipping information.

ValorIDE will:

  • Add a checkout button
  • Create a form for shipping information
  • Add code to calculate the total price

Step 3: Ask ValorIDE to Fix Any Issues​

You:

The total price calculation isn't including the tax. 
Can you add 8% tax to the total?

ValorIDE will update the calculation code to include tax.

Best Practices for Working with ValorIDE​

To get the most out of ValorIDE:

  1. Start with clear goals: Know what you want to build before asking
  2. Be specific but not technical: Describe what you want, not how to code it
  3. Break big tasks into smaller steps: Ask for one feature at a time
  4. Provide feedback: If something isn't quite right, explain what you'd like changed
  5. Learn from explanations: ValorIDE will explain what it did, helping you learn

What If ValorIDE Gets Confused?​

If ValorIDE doesn't understand what you want:

  1. Try rephrasing: Explain what you want in different words
  2. Be more specific: Give more details about what you're trying to achieve
  3. Ask for help: Say "I want to create X, can you help me figure out how?"
  4. Break it down: Split your request into smaller, simpler parts

Beyond the Basics: Advanced ValorIDE Features​

As you get more comfortable, you can use ValorIDE for more advanced tasks:

  • Integrating third-party services: "Add Stripe payment processing to the checkout page"
  • Creating custom animations: "Make products fade in when the page loads"
  • Optimizing performance: "The product page loads slowly. Can you make it faster?"
  • Adding complex features: "Add a recommendation system that suggests products based on what's in the cart"

Next Steps​

Now that you understand how to work with ValorIDE, you're ready to build amazing applications! Here are some next steps:

Remember: The power of ValkyrAI comes from combining ThorAPI's automatic code generation with ValorIDE's ability to understand and build exactly what you want. Happy building!