██FR█████ █INTELL███████████

Building a Portfolio while you Chat: My TamboHack Project


This content originally appeared on DEV Community and was authored by Fudail Zafar

I’m thrilled to share my project for TamboHack: ChatPortfolio (aka Cursor for Portfolio) — a smart, minimalitistic AI Portfolio built with Tambo AI, Next.js & TypeScript.

Before you read any further, check out the demo:

(Link to the code: fudailzafar/tambo-hack)

You can see the live demo here: tambohack.vercel.app

🛠 What it Does?

ChatPortfolio translates your English into a shareable Portfolio — which you can customize it. Ask it stuff like:

  • “Change my name to Steve Jobs.”
  • “Enable Dark Mode.”
  • “Change my skills to a full stack dev role and update my font to Times New Roman.”

It understands your query, dynamically pulling from multiple components & updates your portfolio!

Step 1: Create Your Tambo App (Yay!)

Start off building this by creating a new Tambo App (The Best AI Orchestration tool out there)

npx tambo create-app my-personal-portfolio
cd my-personal-portfolio
npx tambo init

Once you’re done with the initial setup, you can delete a couple files.

rm src/components/ui/card-data.tsx src/services/population-stats.ts
rm src/app/interactables/settings-panel.tsx

Step 2: Add the initial data and UI components

Add the below portfolio-interactable.tsx in the same place where you’ve deleted the settings-panel.tsx.

import { useState } from "react";
import { withInteractable } from "@tambo-ai/react";
import { z } from "zod";
import Portfolio from "./portfolio";
import { DATA as initialData } from "@/data/resume";

// Define schema for portfolio data (simplified for demo)
const portfolioSchema = z.object({
  name: z.string(),
  description: z.string(),
  summary: z.string(),
  skills: z.array(z.string()),
  projects: z.array(
// ...

There are a couple of other components which have to added for the custom UI. You can find them here –> fudailzafar/tambo-hack

Step 3: Add Magic UI components for making beautiful UI!

Using the following code, add Magic UI components so that you can implement beautiful UI.

npx shadcn@latest add "https://magicui.design/r/blur-fade"
npx shadcn@latest add "https://magicui.design/r/dock"
npx shadcn@latest add "https://magicui.design/r/blur-fade-text"

Step 4: Main Portfolio component

Add the following code for your main portfolio component:

import { Separator } from "@/components/ui/separator";
import { ModeToggle } from "@/components/mode-toggle";
import { HomeIcon } from "lucide-react";
import { useEffect } from "react";
import { useTheme } from "next-themes";

const BLUR_FADE_DELAY = 0.04;

export default function Portfolio({ data }: { data?: any }) {
  const safeData = data ?? defaultData;
  const { theme, setTheme } = useTheme();

  // Sync theme from props
  useEffect(() => {
    if (safeData.theme && safeData.theme !== theme) {
      setTheme(safeData.theme);
    }
  }, [safeData.theme, theme, setTheme]);

  // Portfolio-only font and color styles
  const portfolioFont = safeData.font ? { fontFamily: safeData.font } : {};
  const portfolioColor = safeData.color ? { color: safeData.color } : {};
  const portfolioTextStyle = { ...portfolioFont, ...portfolioColor };

  return (
// ...

Step 5: Integrate your components into Tambo!

The last thing is to integrate your portfolio components into Tambo. Add the following lines of code in your src\app\interactables\components\portfolio-interactable.tsx

Embed the following code in the end of your component, or just copy from the repo: fudailzafar/tambo-hack

const InteractablePortfolio = withInteractable(PortfolioInteractableBase, {
  componentName: "Portfolio",
  description: "Portfolio interactable with AI chatbox",
  propsSchema: portfolioSchema,
});

export function PortfolioInteractable() {
  const [portfolioData, setPortfolioData] = useState(initialData);

  // Handler for AI updates
  const handlePropsUpdate = (newProps: any) => {
    setPortfolioData((prev: any) => ({ ...prev, ...newProps }));
    console.log("Portfolio updated from Tambo:", newProps);
  };

  return (
    <InteractablePortfolio
      {...portfolioData}
      onPropsUpdate={handlePropsUpdate}
    />
  );
}

Then visit localhost:3000 to see it live locally.

The End

And yes, that’s it, if the app doesn’t work after this step-by-step guide, I’m sorry, my coding skills aren’t the same as my writing skills. You can clone the repo using the following commands:

git clone https://github.com/fudailzafar/tambo-hack.git

And change your .env.local files to Tambo API.

Thank you for reading! If you have feedback, ideas, or want to contribute, let me know! 😊


This content originally appeared on DEV Community and was authored by Fudail Zafar