Building Your First AI Agent with Grok in 50 Lines of JavaScript

Most AI agent tutorials are long on theory and short on code. You'll read about reasoning loops and tool orchestration and emergent behavior, and at the end you'll have… a flowchart.

Here's a different approach. We're going to build a working AI agent with xAI's Grok API in about 50 lines of JavaScript. It will reason about problems, call tools, observe results, and decide what to do next. A real agent — not a chatbot with a fancy prompt.

What We're Building

A simple research agent that can:

1. Decide what information it needs
2. Call a tool to get that information
3. Look at the results
4. Decide if it has enough to answer, or if it needs to do more
5. Return a final answer

This is the ReAct pattern — Reason, Act, Observe, Repeat — and it's the foundation of most useful AI agent architectures.

Prerequisites

You'll need:

• Node.js 18+
• An xAI API key (get one at console.x.ai)
• The OpenAI Node.js SDK (xAI's API is compatible)

npm install openai

Yes, you read that right. xAI's API uses the same protocol as OpenAI's, so you use the OpenAI SDK pointed at xAI's endpoint. One line of configuration is all that changes.

The Code

Here's the complete agent:

import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.XAI_API_KEY,
  baseURL: "https://api.x.ai/v1",
});

const tools = [
  {
    type: "function",
    function: {
      name: "calculate",
      description: "Evaluate a mathematical expression",
      parameters: {
        type: "object",
        properties: {
          expression: { type: "string", description: "Math expression to evaluate" },
        },
        required: ["expression"],
      },
    },
  },
];

function executeTool(name, args) {
  if (name === "calculate") return String(evaluate(args.expression));
  return "Unknown tool";
}

async function runAgent(task) {
  const messages = [
    { role: "system", content: "You are a helpful agent. Use tools when needed. When you have the final answer, respond directly." },
    { role: "user", content: task },
  ];

  for (let i = 0; i < 10; i++) {
    const response = await client.chat.completions.create({
      model: "grok-4-fast",
      messages,
      tools,
    });

    const msg = response.choices[0].message;
    messages.push(msg);

    if (!msg.tool_calls) return msg.content;

    for (const call of msg.tool_calls) {
      const result = executeTool(call.function.name, JSON.parse(call.function.arguments));
      messages.push({ role: "tool", tool_call_id: call.id, content: result });
    }
  }
  return "Agent reached iteration limit.";
}

const answer = await runAgent("What is 47 * 89 + 123 / 3?");
console.log(answer);

That's it. About 50 lines, and you have a working AI agent.

One note on evaluate: use a real expression parser (mathjs or similar), not JavaScript's eval. The whole point of a tool is that a language model chooses its arguments, and handing model-generated strings to eval means handing it arbitrary code execution on your machine. This is the first thing to get right, not the last.

How It Works

Let's break down what's happening, because every line matters.

1. The Client Setup

const client = new OpenAI({
  apiKey: process.env.XAI_API_KEY,
  baseURL: "https://api.x.ai/v1",
});

This is the entire difference between calling OpenAI and calling Grok. Same SDK, different baseURL. Your agent code is provider-portable from the start.

2. Tool Definitions

The tools array tells Grok what capabilities the agent has. Each tool has a name, description, and a JSON Schema defining its parameters. Grok reads these definitions and decides when to call them based on the conversation context.

This is function calling — the mechanism that turns a language model into an agent. Without tools, Grok can only generate text. With tools, it can take action.

3. Tool Execution

When Grok decides to use a tool, it returns a tool_calls array instead of a text response. Each tool call has a name and arguments. Your code executes the tool and sends the result back.

This is where the agent pattern diverges from a simple chatbot. The model doesn't just respond — it acts, and you execute those actions. Which is also why every tool needs to be written as if a stranger is choosing its inputs, because effectively one is.

4. The Agent Loop

for (let i = 0; i < 10; i++) {
  const response = await client.chat.completions.create({ ... });
  const msg = response.choices[0].message;
  messages.push(msg);

  if (!msg.tool_calls) return msg.content;

  for (const call of msg.tool_calls) {
    const result = executeTool(...);
    messages.push({ role: "tool", tool_call_id: call.id, content: result });
  }
}

This is the ReAct loop. Each iteration:

1. Reason — Grok looks at the conversation history and decides what to do
2. Act — it either calls a tool or returns a final answer
3. Observe — tool results are added to the conversation
4. Repeat — the loop continues until Grok responds with text and no tool calls

The for loop with a limit of 10 is your safety net. Without it, a confused agent could loop forever. In production, you'd also add cost tracking and timeout logic.

Making It Useful

A calculator agent is a demo. Here's what makes the pattern powerful.

Add More Tools

The same loop handles any number of tools. Add an HTTP tool and your agent can fetch web pages. Add a database tool and it can query data. Add a file system tool and it can read and write files. Grok decides which tool to use based on the task.

const tools = [
  { type: "function", function: { name: "calculate", ... } },
  { type: "function", function: { name: "fetch_url", ... } },
  { type: "function", function: { name: "query_database", ... } },
  { type: "function", function: { name: "read_file", ... } },
];

The agent loop doesn't change. Grok figures out the right tool for the job.

Handle Multi-Step Problems

Because tool results feed back into the conversation, the agent naturally handles multi-step problems. Ask it to find the average price of the top five products in the database and it will:

1. Query the database for the top five products
2. Observe the results
3. Call the calculator to compute the average
4. Return the answer

You didn't program that sequence. Grok figured it out from the tool descriptions and the task.

Add Error Handling

Production agents need resilience. The basic pattern extends cleanly:

function executeTool(name, args) {
  try {
    if (name === "calculate") return String(evaluate(args.expression));
    if (name === "fetch_url") return fetchWithTimeout(args.url, 5000);
    return "Unknown tool";
  } catch (error) {
    return `Error: ${error.message}`;
  }
}

When a tool returns an error, Grok sees it as an observation and adapts. It might retry with different parameters, try a different tool, or explain to the user what went wrong. Error handling becomes part of the reasoning loop rather than a separate code path.

Why Grok?

You can build this same agent with any major model — the code would be nearly identical, changing the baseURL and model name. So why Grok?

Speed. Grok's fast tier is genuinely quick in agent loops. When your agent makes ten or twenty API calls per task, latency on each call compounds. Faster inference means more responsive agents.

Cost. For sustained agent workloads with hundreds of tool calls per session, Grok's pricing is competitive. Token costs add up fast in agent architectures.

Built-in tools. Grok has native web search and X search. Instead of integrating a third-party search API, you can use those directly.

Portability. Because xAI uses the OpenAI protocol, your code runs on both platforms. That's real multi-provider support with zero abstraction layers.

What's Next

This 50-line agent is the starting point. A production agent system needs:

• Persistent memory, so agents remember across sessions
• State machines for complex multi-step workflows
• Router patterns to dispatch tasks to specialist agents
• Observability, to understand what your agents are actually doing
• Cost controls, so a runaway agent doesn't drain your API budget

Building AI Agents from Scratch with Grok covers all of this across fourteen chapters. Each chapter builds on the last, and each ends with a working project. By the end you'll have a deployed multi-agent system with full observability.

If you'd rather start with the orchestration layer — how multiple agents coordinate — the companion book is Building a Multi-Agent Orchestrator in Node.js.

The 50-line agent above took five minutes to build. The rest is knowing what breaks when you scale it.