Introducing Veryfront Code

Jun 22, 2026·Product

Koji Wakayama·7 min read

Table of Contents

Full-stack AI framework

Veryfront Code is the open source TypeScript and React framework for building AI apps and agents. It gives teams one project structure for agents, apps, skills, knowledge, tools, evals, workflows, schedules, and webhooks, from local development to deployment.

That means less runtime plumbing and more time spent putting agents to work.

The example below follows one customer-operations flow: a customer reports a production support issue, the project searches approved runbooks, the agent triages the request, evals check retrieval and grounding, and the same agent is reused in a workflow, source-defined schedule, webhook, and preview deployment.

You can try the complete customer-operations-agent example on GitHub.

An AI project is a directory

AI projects need a predictable structure for developers and coding agents to follow. Veryfront Code turns routes, chat, knowledge, tools, evals, workflows, triggers, and deployment config into convention-based project files.

1customer-operations-agent/2  agents/        # agent definitions3  skills/        # reusable agent instructions4  knowledge/     # approved runbooks5  tools/         # deterministic tools6  app/           # chat UI and AG-UI route7  evals/         # retrieval and grounding checks8  workflows/     # repeatable escalation operations9  schedules/     # source-defined scheduled runs10  webhooks/      # source-defined event runs

Agents own behavior; skills own process; knowledge files own approved reference material; tools own deterministic capabilities; evals own quality checks; and workflows, schedules, and webhooks own repeatable operations. That structure helps teams work efficiently as agents and projects scale.

Define agents as code

An agent is a file in the agents/ folder. It owns instructions, model behavior, tools, skills, memory, and execution limits like any other project primitive.

1import { agent } from "veryfront/agent";2 3export default agent({4  id: "support-agent",5  system:6    "You are a customer operations agent for support escalation. You help support teams turn customer issues into clear, evidence-based escalation summaries and next actions.",7  skills: ["support-escalation"],8  tools: true,9  maxSteps: 8,10});

Because the agent lives in the same project as the app, changes to its instructions, tools, and model behavior can be reviewed, tested, versioned, and deployed with the rest of the system.

Add skills

Skills turn tacit process knowledge into reviewable files that business users can read and edit. Veryfront Code follows the Agent Skills format: each skill is a skills/<name>/SKILL.md file with frontmatter and instructions.

1---2name: support-escalation3description: Triage customer issues and prepare support escalation summaries.4allowed-tools:5  - search_knowledge6---7 8# Support Escalation9 101. Confirm the customer, workspace, affected users, severity, and exact symptom.112. Use `search_knowledge` for the symptom-specific runbook.123. Separate confirmed facts from assumptions.134. Draft the escalation with owner, evidence, impact, attempted fixes, and next action.

Add knowledge

Knowledge keeps approved reference material out of the system prompt while still making it available to the agent. Veryfront Code stores knowledge as Markdown files with frontmatter, following the same shape as the Open Knowledge Format, so runbooks such as knowledge/login-troubleshooting.md stay readable, reviewable, and agent-ready.

1---2title: Login troubleshooting3description: Resolve sign-in, SSO, workspace, session, identity provider, and account access failures.4type: runbook5---6 7# Login troubleshooting8 9Use this when a customer cannot sign in, cannot complete SSO, or reports an10account access failure.11 12## Triage checklist13 14- Confirm whether the issue affects one user, one workspace, or all users on the account.15- Verify that the user is signing in to the correct workspace.16- Ask for the last successful login time, identity provider, browser, and exact error message.

The agent does not need every support rule copied into its system prompt. This follows progressive disclosure and context engineering best practices: keep runbooks small, reviewable, and versioned, then retrieve the right context when the agent needs it.

Give agents typed tools

Tools are server-side functions with schema-backed inputs and outputs. For project knowledge, Veryfront Code provides a standard search_knowledge adapter, so chat, workflows, evals, and deployments all use the same contract.

1import { createSearchKnowledgeTool } from "veryfront/knowledge";2 3export default createSearchKnowledgeTool();

Agents can also combine project-defined tools with MCP tools for external systems.

Expose the agent over AG-UI

Veryfront Code includes an AG-UI route handler that streams the support agent response from the same project.

1import { createAgUiHandler } from "veryfront/agent";2 3export const POST = createAgUiHandler("support-agent");

Build the UI in React

The React page uses Veryfront chat primitives to stream messages from the AG-UI route.

1"use client";2 3import { Chat, useChat } from "veryfront/chat";4 5export default function ChatPage(): React.JSX.Element {6  const chat = useChat();7 8  return (9    <Chat10      {...chat}11      className="flex-1 min-h-0"12      placeholder="Ask the support agent..."13    />14  );15}

The chat UI, eval suite, workflow, and triggers all use the same support-agent definition, so they ship as one system instead of drifting apart.

Evaluate the agent

Agent behavior is non-deterministic, so evaluation is critical before it becomes automation. Veryfront Code evals target the same agent definition and check both tool behavior and answer quality.

1import { datasets, evalAgent, judges, metrics } from "veryfront/eval";2 3export default evalAgent({4  id: "eval:support-triage",5  name: "Support triage quality",6  target: "agent:support-agent",7  dataset: datasets.json("evals/datasets/support-triage.json"),8  metrics: [9    metrics.agent.calledTool("search_knowledge").gate(),10    metrics.agent.noFailedTools().gate(),11    metrics.knowledge.recallAtK({ k: 3 }).gate({ min: 0.75 }),12    metrics.knowledge.precisionAtK({ k: 3 }).soft({ min: 0.34 }),13    metrics.knowledge.mrr({ k: 3 }).soft({ min: 0.5 }),14    metrics.answer.groundedness({15      judge: judges.llm.groundedness(),16    }).gate({ min: 0.8 }),17  ],18});

Each dataset row declares the expected runbooks, so evals can measure whether the agent called search_knowledge, retrieved the right knowledge, and answered from approved material.

Orchestrate durable work

Not every agent task should live inside a chat turn. Veryfront Code workflows turn customer operations work into durable runs with ordered steps, source knowledge, agent output, logs, and an inspectable record.

1import { step, workflow } from "veryfront/workflow";2 3type EscalationInput = {4  customer?: string;5  subject?: string;6  description?: string;7  severity?: string;8  priority?: string;9};10 11function buildKnowledgeQuery(input: EscalationInput): string {12  return [13    input.subject,14    input.description,15    input.severity,16    input.priority,17    input.customer,18  ]19    .filter(Boolean)20    .join("\n");21}22 23export default workflow({24  id: "escalate-ticket",25  description: "Triage a customer issue and draft an escalation plan.",26  steps: ({ input }: { input: EscalationInput }) => [27    step("knowledge", {28      tool: "search_knowledge",29      input: { query: buildKnowledgeQuery(input) },30    }),31    step("triage", {32      agent: "support-agent",33      input: ({ knowledge }) => ({34        task: "Triage this customer issue using approved project knowledge.",35        issue: input,36        approvedKnowledge: knowledge,37      }),38    }),39    step("draft-escalation", {40      agent: "support-agent",41      input: ({ triage }) => ({42        task: "Draft the internal escalation summary with scope, evidence, owner, and next action.",43        triage,44      }),45    }),46  ],47});

Starting the workflow creates a run. Runs give long-lived work identity, status, events, logs, output, and a production record for the escalation.

Schedule work from source

Scheduled jobs automate recurring agent work, such as daily support triage or periodic account reviews. In Veryfront Code, schedules are source files that can target agents, workflows, or tasks, then run locally or deploy with the rest of the project.

1import { schedule } from "veryfront/schedule";2 3export default schedule({4  id: "daily-support-triage",5  name: "Daily support triage",6  schedule: "0 9 * * 1-5",7  timezone: "Europe/Stockholm",8  target: { kind: "workflow", id: "escalate-ticket" },9  input: {10    customer: "Acme Retail",11    subject: "Daily review of high-priority support issues",12    severity: "medium",13  },14});

Trigger work from webhooks

Webhooks listen for external events and trigger work when matching events arrive. Like schedules, they are source files that can target agents, workflows, or tasks.

1import { webhook } from "veryfront/webhook";2 3export default webhook({4  id: "customer-escalation",5  name: "Customer escalation",6  target: { kind: "workflow", id: "escalate-ticket" },7  eventFilter: {8    mode: "any",9    conditions: [10      { path: "severity", operator: "equals", value: "high" },11      { path: "priority", operator: "equals", value: "urgent" },12    ],13  },14});

The workflow, schedule, and webhook all use the same agent and the same search_knowledge tool. In Veryfront Cloud, deployment creates or updates the hosted schedule and webhook from those source files.

Run locally, ship anywhere

Start the app locally, validate the agent, run the automation fixtures, and then sync or deploy the same source tree.

1npm install2npm run dev -- --port 3010

1npm run eval2npm run workflow:run3npm run schedule:run4npm run webhook:run

1npx veryfront push --branch main2npx veryfront deploy --branch main --env preview

Veryfront Code runs on Node.js, Deno, and Bun. You can self-host it or ship it through the Veryfront platform with preview environments and production hosting.

What this unlocks

Veryfront Code gives teams one framework where:

• agents, skills, knowledge, tools, evals, workflows, schedules, and webhooks are file-defined
• developers and coding agents know where each behavior change belongs
• typed tools connect model behavior to deterministic code
• evals measure retrieval, grounding, and tool use before automation
• React, AG-UI, workflows, schedules, webhooks, and deployment share one project model

The point is less runtime plumbing and more time spent putting agents to work.

Getting started