steps

numbered step component with connecting line for sequential instructions.

example

install the agent chat component

bash

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

add the api proxy route

typescript

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

set your api key

bash

1INFERENCE_API_KEY=inf_...

use the component

tsx

1<Agent2  proxyUrl="/api/inference/proxy"3  agentConfig={{4    core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },5    description: 'a helpful ai assistant',6    system_prompt: 'you are helpful.',7  }}8/>

installation

bash

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

usage

tsx

1import { Steps, Step, StepTitle, StepContent } from "@/components/steps"23export function GettingStarted() {4  return (5    <Steps>6      <Step>7        <StepTitle>install the component</StepTitle>8        <StepContent>9          <p>run the shadcn cli to add the component.</p>10        </StepContent>11      </Step>1213      <Step>14        <StepTitle>add your api key</StepTitle>15        <StepContent>16          <p>set your environment variables.</p>17        </StepContent>18      </Step>1920      <Step>21        <StepTitle>use in your app</StepTitle>22        <StepContent>23          <p>import and render the component.</p>24        </StepContent>25      </Step>26    </Steps>27  )28}