inference.sh

agent

full-featured agent component powered by inference.sh

agents support 5 tool types: app, agent, webhook, client, and internal tools. learn more about tools

demo

agents can use client-side tools to interact with DOM elements. this demo shows an assistant that can read and manipulate a pricing form.

Pricing Configurator

Choose your pricing tier: Starter at $9, Pro at $29, or Enterprise at $99 per seat per month
Enter the number of user seats (1-100)
Billing Cycle
Add-ons
Estimated Total$154/mo
agent

how can I help?

I can help configure your pricing plan

source code

the agent component uses client-side tools with an accessibility tree scanner to understand and interact with DOM elements.

tsx
1import { useRef, useMemo, useState } from 'react'2import { Agent } from '@/components/agent'3import { createScopedTools, FORM_ASSISTANT_PROMPT } from './lib/client-tools'45function PricingAssistantDemo() {6  const formRef = useRef<HTMLFormElement>(null)7  const scopedTools = useMemo(() => createScopedTools(formRef), [])89  const systemPrompt = FORM_ASSISTANT_PROMPT + `10    ## Form Context11    - Plan: starter ($9), pro ($29), enterprise ($99) per seat/month12    - Seats: 1-10013    - Billing: monthly or yearly (2 months free)14    - Add-ons: addon_support ($19), addon_analytics ($9), addon_api ($49)1516    ## Instructions17    1. Use scan_ui to see current form state18    2. Use fill_field("plan", "starter") to change fields19    3. Be concise and confirm changes`2021  return (22    <div className="grid lg:grid-cols-2 gap-4">23      <form ref={formRef}>{/* Your form fields */}</form>24      <Agent25        proxyUrl="/api/inference/proxy"26        name="pricing-assistant"27        config={{28          core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },29          description: 'I can help configure your pricing plan',30          system_prompt: systemPrompt,31          tools: scopedTools,32          example_prompts: [33            'set me up with the cheapest option',34            'i need 10 seats with API access',35          ],36        }}37      />38    </div>39  )40}

image agent

agents can also be used with just a ref - no ad-hoc configuration needed. this demo uses a template agent for image generation.

agent

how can I help?

I can generate images from your descriptions

tsx
1<Agent2  proxyUrl="/api/inference/proxy"3  config={{ agent: 'okaris/shadcn-image@045tep9w' }}4  description="I can generate images from your descriptions"5  examplePrompts={['a cat wearing a top hat']}6/>

installation

bash
1npx shadcn@latest add https://ui.inference.sh/r/agent.json

setup

api proxy

add the API proxy route to your Next.js app:

typescript
1// app/api/inference/proxy/route.ts2import { route } from '@inferencesh/sdk/proxy/nextjs';3export const { GET, POST, PUT } = route;

environment variables

set your API key in .env.local:

bash
1INFERENCE_API_KEY=inf_...

get your API key at inference.sh

usage

the simplest way to use the Agent component:

tsx
1import { Agent } from '@/components/agent'23export function ChatAssistant() {4  return (5    <Agent6      proxyUrl="/api/inference/proxy"7      agentConfig={{8        core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },9        description: 'A helpful AI assistant',10        system_prompt: 'You are helpful and concise.',11        example_prompts: [12          'What can you help me with?',13          'Tell me a joke',14        ],15      }}16      agentName="my-assistant"17    />18  )19}

for more control, use the AgentProvider with custom chat components and client-side tools:

tsx
1import { useRef, useMemo } from 'react'2import { AgentProvider } from '@/registry/blocks/agent/provider'3import { useAgent, useAgentActions } from '@/registry/blocks/agent/hooks/use-agent'4import { ChatContainer } from '@/components/chat/components/chat-container'5import { ChatMessages } from '@/components/chat/components/chat-messages'6import { ChatInput } from '@/components/chat/components/chat-input'7import { MessageBubble } from '@/components/chat/components/message-bubble'8import { Inference } from '@inferencesh/sdk'9import { createScopedTools, FORM_ASSISTANT_PROMPT } from './lib/client-tools'1011function MyAssistant() {12  const formRef = useRef<HTMLFormElement>(null)13  const scopedTools = useMemo(() => createScopedTools(formRef), [])14  const client = useMemo(() => new Inference({ proxyUrl: '/api/inference/proxy' }), [])1516  const agentConfig = {17    core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },18    system_prompt: FORM_ASSISTANT_PROMPT,19    tools: scopedTools, // Client-side tools that can interact with the DOM20  }2122  return (23    <div className="grid lg:grid-cols-2 gap-4">24      <form ref={formRef}>{/* Your form fields here */}</form>25      <AgentProvider client={client} agentConfig={agentConfig} agentName="form-assistant">26        <ChatContainer>27          <ChatMessages>28            {({ messages }) => messages.map(m => <MessageBubble key={m.id} message={m} />)}29          </ChatMessages>30          <ChatInput />31        </ChatContainer>32      </AgentProvider>33    </div>34  )35}