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 help users navigate complex forms. this demo shows an assistant that fills out a business registration form using client tools that manipulate React state directly.

business entity registration

entity information
registered agent *
principal office
officers / directors

no officers added yet. required for corporations and nonprofits.

filing options
total fees$0
agent

how can I help?

I can help you fill out this business registration form

source code

client tools read and write React state directly via refs.

tsx
1import { useState, useRef, useMemo } from 'react'2import { Agent } from '@/components/agent'3import { createFormTools, FORM_SYSTEM_PROMPT, type BusinessFormActions } from './demo-tools'45function RegistrationDemo() {6  const [formState, setFormState] = useState(DEFAULT_FORM_STATE)7  const setField = (field, value) => setFormState(prev => ({ ...prev, [field]: value }))8  const addOfficer = (officer) => setFormState(prev => ({9    ...prev, officers: [...prev.officers, officer],10  }))11  // ... other actions1213  // Ref always points to latest — tools never see stale closures14  const actionsRef = useRef<BusinessFormActions>(null!)15  actionsRef.current = { getState: () => formState, setField, addOfficer, removeOfficer, setSameAsAgent }1617  const tools = useMemo(() => createFormTools(actionsRef), [])1819  return (20    <div className="grid lg:grid-cols-2 gap-4">21      <RegistrationForm state={formState} setField={setField} ... />22      <Agent23        proxyUrl="/api/inference/proxy"24        name="registration-assistant"25        config={{26          core_app: { ref: 'openrouter/claude-haiku-45@1ps10tmc' },27          system_prompt: FORM_SYSTEM_PROMPT,28          tools,29          example_prompts: ['I want to register an LLC in Delaware'],30        }}31      />32    </div>33  )34}

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

for more control, use the AgentChatProvider with custom chat components and client tools:

tsx
1import { useState, useRef, useMemo } from 'react'2import { Inference } from '@inferencesh/sdk'3import { AgentChatProvider } from '@inferencesh/sdk/agent'4import { ChatContainer, ChatMessages, ChatInput, MessageBubble } from '@/components/infsh/agent'5import { createFormTools, FORM_SYSTEM_PROMPT } from './demo-tools'67function MyAssistant() {8  const [formState, setFormState] = useState(DEFAULT_FORM_STATE)9  // ... build actions (setField, addOfficer, etc.)1011  const actionsRef = useRef({ getState: () => formState, setField, ... })12  actionsRef.current = { getState: () => formState, setField, ... }1314  const tools = useMemo(() => createFormTools(actionsRef), [])15  const client = useMemo(() => new Inference({ proxyUrl: '/api/inference/proxy' }), [])1617  return (18    <div className="grid lg:grid-cols-2 gap-4">19      <RegistrationForm state={formState} setField={setField} ... />20      <AgentChatProvider client={client} agentConfig={{21        core_app: { ref: 'openrouter/claude-haiku-45@1ps10tmc' },22        system_prompt: FORM_SYSTEM_PROMPT,23        tools, // Client tools that read/write React state via ref24      }}>25        <ChatContainer>26          <ChatMessages>27            {({ messages }) => messages.map(m => <MessageBubble key={m.id} message={m} />)}28          </ChatMessages>29          <ChatInput />30        </ChatContainer>31      </AgentChatProvider>32    </div>33  )34}