Creating AI Assistants That Work for You : Conversation to Action

✨ Imagine This:

It’s Monday morning.
You sit down at your desk and say:

💬 “Hey assistant, what important emails do I have today?”

But instead of reading out a long list of unread messages…

✅ Your assistant quickly scans your inbox
✅ Finds the most urgent messages
✅ And sends a neatly summarized update to your Slack channel 📩 ➡️ 💬

No more digging through dozens of emails. No wasting time scrolling.
Just the key info delivered where you work.

Sounds like a dream? It’s not ✨

This is exactly what’s possible when AI knows how to use tools — Not just generate text, but actually take real-world actions.

This story isn’t just about email. It’s about building your own AI helper that can:

🔍 Access your data
⚙️ Do tasks for you
🔗 Connect with the apps you rely on

To show how this works, a simple React App Assistant example will be used — but the same ideas apply to any assistant you want to build.

Ready to create an assistant that does more than just talk? Let’s get started! 🚀

---

🧰 What Is Tool Calling?

Tool calling lets your AI assistant do more than just talk — It gives it the power to take real actions.

It gives the AI the ability to call real functions you define — to interact with your local system, databases, APIs, or anything else.

💡 Example:

def get_weather(city: str):
    # API call
    return f"It’s sunny in {city}!"

Imagine you ask your AI assistant:

What’s the weather in Surat?

The AI selects the appropriate tool, uses the actual input, and responds with the real-time weather update.

Now imagine doing this for React apps:

• init_react_app

• install_package

• start_dev_server

🔥 Why It’s a Game Changer

• 🤖 Turns your AI into an action-taker, not just a responder

• ⚙️ Automates workflows across dev tools, email, Notion, APIs, etc.

• 🧠 Makes assistants smarter and more useful

• 💡 Perfect for building custom dev tools, productivity bots, or AI teammates

---

⚙️ Step 1: Define Your Tools

Tools are basically just regular functions — simple, reusable pieces of code your AI assistant can call to get stuff done.

Here's one that creates a new React app:

import json
import os

def init_react_app(params: str):
    data = json.loads(params)
    name = data.get("name", "my-app")
    typescript = data.get("typescript", False)
    package_manager = data.get("package_manager", "npm")

    template = "--template typescript" if typescript else ""
    command = f"npx create-react-app {name} {template} --use-{package_manager}"

    return os.system(command)

Some other useful tools in our setup includes:

• create_directory(name)

• install_package({ "directory": ..., "package": ... })

• start_dev_server(directory)

• read_file(path)

• update_file({ "path": ..., "content": ... })

You can define any tool you want. These tools act as your assistant’s hands.

---

🧠 Step 2: Guide the Assistant with a System Prompt

Now it’s time to teach the AI assistant how to use the tools.

We do this by writing a system prompt that gives the assistant a clear step-by-step structure to follow.

SYSTEM_PROMPT = """
You are an AI assistant that can create and manage React apps.

You work in steps:

1. Plan  
2. Call a tool (action)  
3. Observe the result  
4. Output the answer

Always respond in this JSON format:
{
  "step": "plan" | "action" | "observe" | "output",
  "function": "tool_name",  # required for action step
  "input": "..."            # string or JSON input
}
"""

🤔 What does this mean?

• Plan: The assistant thinks about what to do next

• Action: Calls the appropriate tool with the necessary inputs

• Observe: Waits for the tool’s result and verifies it

• Output: Provides the final response to the user

This structured approach helps the AI understand how to work step-by-step and when to use each tool.

---

🔁 Step 3: The Execution Loop

Once your tools and prompt are set, it’s time to bring everything to life with an execution loop — the assistant's brain 🧠.

This loop does everything:

1. 🔄 Sends the user input to OpenAI

2. ⚙️ Waits for a tool call (if needed)

3. 🛠️ Runs the tool in Python

4. 📤 Sends the result back to the assistant

🧩 Here’s the simplified version:

SYSTEM_PROMPT = """
    ...
"""

messages = [
  { "role": "system", "content": SYSTEM_PROMPT }
]

while True:
    user_input = input("> ")
    messages.append({ "role": "user", "content": user_input })

    while True:
        response = client.chat.completions.create(
            model="gpt-4.1-mini",
            response_format={"type": "json_object"},
            messages=messages
        )

        message = response.choices[0].message.content
        messages.append({ "role": "assistant", "content": message })

        reply = json.loads(response.choices[0].message.content)

        if reply["step"] == "action":
            result = available_tools[reply["function"]](reply["input"])
            messages.append({
                "role": "user",
                "content": json.dumps({ "step": "observe", "content": result })
            })
        elif reply["step"] == "output":
            print("✅", reply["content"])
            break

🧠 What’s Happening Here? The outer loop keeps the assistant running

• The inner loop handles multi-step reasoning

• If the assistant wants to call a tool ("step": "action"), we execute it in Python

• Then we pass the result back using "step": "observe"

• When the assistant is ready, it responds with "step": "output" — and we print the final message ✅

---

💡 Example: Building a React App by Natural Language

Here’s how our React assistant responds to a simple message:

👤 User Input

Create a React app called "portfolio" using TypeScript and Yarn

🤖 Assistant’s Step-by-Step Response

🧠 PLAN: Set context and initialize app

🔧 ACTION: set_project_context 
→ {"name": "portfolio", "typescript": true, "package_manager": "yarn"}

📥 OBSERVE: Context saved

🔧 ACTION: init_react_app 
→ {"name": "portfolio", "typescript": true, "package_manager": "yarn"}

📥 OBSERVE: App created

✅ OUTPUT: Your React app 'portfolio' is ready!

🛠️ What Just Happened?

• You typed a natural-language request

• The assistant understood the intent

• It chose and executed the right tools

• And responded with a clear, successful outcome — no manual setup needed!

🎥 Demo Time — Watch It in Action

Want to see the assistant do all this in real time? Watch this quick demo of the assistant:

---

💡 Bonus: You Can Build Any Kind of Assistant

The best part? This approach isn’t just for React dev assistant — you can use it to build any AI assistant that thinks, acts, and responds intelligently.

🌦️ Weather Assistant
def get_weather(city: str): ...

📁 File Manager
def list_files(path): ...
def delete_file(path): ...

🧪 Test Runner
def run_tests(project): ...

🎯 Deployment Bot
def deploy(env): ...

🛠️ All You Need Is:

• ✍️ A set of functions (these are your tools)

• 🧠 A system prompt that tells the AI how to plan, act, and respond

• 🔄 A simple loop that connects everything via OpenAI

If you can write functions, you can build an AI agent. The magic isn’t in the model — it’s in the way you guide it. 🔮

---

✅ Wrap-up

In just a few steps, you can build your own AI assistant that:

• 🧠 Understand natural language input

• 📋 Plan its next steps logically

• 🛠️ Call real functions (aka tools)

• 💬 Respond with actual results — not guesses

Whether it's helping you with weather updates, file tasks, or full-stack React apps — you now have the blueprint.

And the best part? You control everything.

---

🚀 Want the Full React Assistant Code?

Everything from this blog — tools, prompt, and execution loop — is available in the full GitHub repo below:

👉 GitHub Repository – React AI Assistant

Clone it, customize it, and start building your own assistant today! 💻✨